使用Vue.js进行的Firebase电话号码身份验证不起作用

Question

我正在基于Vue.js构建一个新的Webpack模板应用程序。我有一个/登录路由，它加载一个名为SignIn的组件。我试图使用消防电话号码认证使用Firebase对我的用户进行身份验证。

我用npm install firebase安装了Firebase，并在我的main.js文件中初始化了它，如下所示：

/src/main.js

import firebase from 'firebase';

import Vue from 'vue';
import App from './App';
import router from './router';

Vue.config.productionTip = false;

// Initialize Firebase
const config = {
  apiKey: 'MY_API_KEY',
  authDomain: 'MY_PROJECT.firebaseapp.com',
  databaseURL: 'https://MY_PROJECT.firebaseio.com',
  projectId: 'MY_PROJECT_ID',
  storageBucket: 'MY_PROJECT.appspot.com',
  messagingSenderId: 'MY_SENDER_ID',
};

firebase.initializeApp(config);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
});

在上面的示例中，为了安全起见，对我的凭据进行了修改。

当用户打开/登录时，这是他们看到的组件：

/src/components/pages/SignIn.vue

<template>
  <div>
    <!-- Number Input Form -->
    <div v-if="showNumberInput">
      <form v-on:submit.prevent>
        <div class="form-group">
          <input type="text" class="form-control form-control-lg" v-model="numberInputForm.number" placeholder="Phone number" required>
        </div>
        <div class="form-group">
          <button type="submit" id="get-sign-in-code" class="btn btn-block btn-lg success theme-accent">{{ getSignInCodeButton.text }}</button>
        </div>
      </form>
    </div>

    <!-- SMS Verification Form -->
    <div v-if="showCodeInput">
      <form>
        <div class="form-group">
          <input type="text" class="form-control form-control-lg" value="9944" placeholder="Verification Code" required>
        </div>
        <div class="form-group">
          <a href="javascript:void" class="btn btn-block btn-lg success theme-accent" @click="signIn">{{ signInButton.text }}</a>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import firebase from 'firebase';

export default {
  name: 'SignIn',

  data() {
    return {
      // UI States
      showNumberInput: true,
      showCodeInput: false,

      // Forms
      numberInputForm: {
        number: '',
      },

      // Buttons
      getSignInCodeButton: {
        text: 'Get sign in code',
      },
      signInButton: {
        text: 'Sign in',
      },
    };
  },

  mounted() {
    const self = this;

    // Start Firebase invisible reCAPTCHA verifier
    window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('get-sign-in-code', {
      'size': 'invisible',
      'callback': (response) => {
        // reCAPTCHA solved, allow signInWithPhoneNumber.
        self.sendSMS();
      }
    });
  },

  methods: {
    /**
     * Sends the user an SMS-verification code using Firebase auth
     *
     * @see https://firebase.google.com/docs/auth/web/phone-auth
     */
    sendSMS() {
      const self = this;

      self.getSignInCodeButton = {
        showSpinner: true,
        text: 'Sending SMS..',
        disabled: true,
      };
    },


    /**
     * Authenticates the user with Firebase auth
     */
    signIn() {
      // Redirect the user to the authenticated page
    },
  },
};
</script>

正如您所看到的，我在模板中有两个表单-一个用于捕获电话号码，另一个用于允许用户输入验证代码。我正在以编程方式切换这些表单的可见性。

当组件挂载时，我将调用Firebase reCAPTCHA验证器并传递提交按钮的ID (本例中为“获取登录代码”)。但是，当我单击按钮时，什么都不会发生。我在开发工具网络选项卡中没有看到reCAPTCHA XHR。

这可能是因为按钮是动态地插入到DOM中的，而当组件挂载时传递ID时，firebase.auth.RecaptchaVerifier()无法检测它吗？我该怎么解决这个问题？我可以使用$el或其他一些Vue.js方法来使reCAPTCHA验证器正常工作吗？谢谢。

更新

通过向mounted()事件添加以下行，我能够让这个脚本工作：

window.recaptchaVerifier.render().then((widgetId) => {
  window.recaptchaWidgetId = widgetId;
});

这就是我的mounted()方法现在的样子：

mounted() {
  const self = this;

  // Start Firebase invisible reCAPTCHA verifier
  window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('get-sign-in-code', {
    size: 'invisible',
    callback: () => {
      // reCAPTCHA solved, allow signInWithPhoneNumber.
      self.sendSMS();
    },
  });

  window.recaptchaVerifier.render().then((widgetId) => {
    window.recaptchaWidgetId = widgetId;
  });
},

然而，这导致了一个新的问题--脚本现在添加了一个随机位置的“受reCAPTCHA保护”的徽章，我想去掉它。有没有办法让这个剧本在不显示徽章的情况下工作？

Answer 1

我想现在回答已经晚了。但是我在您的代码中看到，当mounted()钩子出现时，您可以在回调后在recaptchaVerifier中调用sendSMS()函数。但在插入第一个按钮时，即：

<button type="submit" id="get-sign-in-code" class="btn btn-block btn-lg success theme-accent">{{ getSignInCodeButton.text }}</button>

没有显示函数调用提交或单击。我猜您将更新按钮以响应单击，如下所示:更改在表单标记中，它显示要调用提交表单的哪个函数。

<div v-if="showNumberInput">
  <form v-on:submit.prevent="sendSMS">
    <div class="form-group">
      <input type="text" class="form-control form-control-lg" v-model="numberInputForm.number" placeholder="Phone number" required>
    </div>
    <div class="form-group">
      <button type="submit" id="get-sign-in-code" class="btn btn-block btn-lg success theme-accent">test</button>
    </div>
  </form>
</div>

Answer 2

如果有人使用nuxt.js (vuejs框架)，那么请执行以下步骤

在您的nuxt.config.js中添加折叠行

​

import 'firebase/compat/auth'; //import this on the top and

 modules: [
    ...// other code
    [
      '@nuxtjs/firebase',
      {
        config: {
          apiKey: '<apiKey>',
          authDomain: '<authDomain>',
          projectId: '<projectId>',
          storageBucket: '<storageBucket>',
          messagingSenderId: '<messagingSenderId>',
          appId: '<appId>',
          measurementId: '<measurementId>'
        },
        services: {
          auth: true // Just as example. Can be any other service.
        }
      }
    ]
  ],

​

然后，在您的文件中，您想要使用电话身份验证的地方，首先导入如下所示的防火墙

​

<template>
///
</template>

<script>
import firebase from 'firebase/compat/app';

methods : {
    // configure recaptcha
    
    configureRecaptcha() {
      window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
        "otp-verfiy-button",
        {
          size: "invisible",
          callback: (response) => {
            sendOtpForVerification();
          },
        }
      );
    },
    
    // handle otpsend
      sendOtpForVerification() {
      this.configureRecaptcha();
      const phoneNumber = "+91" + this.userMobile; //user phone number
      const appVerifier = window.recaptchaVerifier;
      firebase.auth().languageCode = "en";

      firebase.auth()
        .signInWithPhoneNumber(phoneNumber, appVerifier)
        .then((confirmationResult) => {
          // SMS sent. Prompt user to type the code from the message, then sign the
          // user in with confirmationResult.confirm(code).
          window.confirmationResult = confirmationResult;
          this.$toast.success("Otp sent successfully");
        })
        .catch((error) => {
          // Error; SMS not sent
          console.log("Error", error);
        });
    },
    
    
}
</script>

​

请确保安装了firebase和@nuxtjs/firebase

希望这对某人有帮助:)

Answer 3

使用sign-in-button do“受reCAPTCHA保护”