Firebase 电话身份验证在 Vue js 中不起作用答案

【问题标题】：Firebase Phone Auth Not Workng in Vue jsFirebase 电话身份验证在 Vue js 中不起作用
【发布时间】：2020-08-21 20:12:09
【问题描述】：

下面是显示的错误

Uncaught TypeError: Cannot read property 'auth' of undefined
at HTMLButtonElement.eval (Login.vue?7463:65)
at HTMLButtonElement.dispatch (jquery.js?1157:5429)
at HTMLButtonElement.elemData.handle (jquery.js?1157:5233)

下面是我的代码

mounted() {
    window.$("#submit").click(function() {
      var input = window
        .$("#inputPhone")
        .val()
        .trim();
      if (input.length > 13 || input.length < 10 || isNaN(input)) {
        alert("Please enter a valid phone no");
      } else {
        window.$("#phone").hide();
        window.$("#code").show();

        window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
          "submit",
          {
            size: "invisible"
          }
        );

        //         window.recaptchaVerifier = new firebase.auth().RecaptchaVerifier('submit', {
        //   'size': 'invisible',
        //   'callback': function(response) {
        //     // reCAPTCHA solved, allow signInWithPhoneNumber.
        //     console.log(response);
        //   }
        // });
        firebase
          .auth()
          .signInWithPhoneNumber(input, window.recaptchaVerifier)
          .then(function(confirmationResult) {
            window.confirmationResult = confirmationResult;
            console.log(confirmationResult);
          });
        window.$("#login").click(function() {
          var inp = window
            .$("")
            .val()
            .trim();
          if (inp.length === 0) {
            alert("Please enter code");
          } else {
            var myFunction = function() {
              window.confirmationResult
                .confirm(inp)
                .then(function(result) {
                  console.log(result);
                })
                .catch(function(error) {
                  console.log(error);
                });
            };
            myFunction();
          }
        });
      }
    });
}

请查看我的代码并帮助我。
下面是我导入的配置代码
下面是我导入的配置代码
下面是我导入的配置代码
下面是我导入的配置代码
下面是我导入的配置代码

import { firebase } from "../firebase";

根据 chrome 开发者工具，错误出现在下面的代码行中

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
      "submit",
      {
        size: "invisible"
      }
    );

【问题讨论】：

firebase 未定义，是否添加了配置对象？
是的，我添加了配置
尝试调试。在 Chrome 中，右键单击 -> Inspect -> Sources 然后添加断点并调试
我无法调试，错误仍然出现

标签： javascript firebase vue.js firebase-authentication

【解决方案1】：

您是否正确设置了身份验证？
Setup Firebase Auth

<body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js"></script>

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-firestore.js"></script>
</body>

【讨论】：

您是否在firebase控制台中启用了手机身份验证登录方法？
您提到初始化 RecaptchaVerifier 时会引发错误，请检查它何时初始化，即它应该在您初始化 firebase.initializeApp(firebaseConfig); 后初始化；
我先导入了firebase，然后初始化了RecaptchaVerifier
如果你使用谷歌浏览器，打开你的页面，按F12打开开发者工具，在控制台中首先输入firebase，如果它抛出错误firebase未初始化，检查为什么它没有初始化，如果它显示你的对象数据都很好，第二个类型 firebase.auth 如果它给出一个错误，那么 Firebase Auth 肯定没有被初始化。