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

Question

我正在基于Webpack模板构建一个新的Vue.js应用程序。我有一个/ sign-in路由，可加载名为SignIn的组件。我正在尝试使用Firebase SDK 使用Firebase电话号码身份验证来验证我的用户。

我已经安装了Firebase，npm install 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（在本例中为“ get-sign-in-code”）。但是，当我单击按钮时，什么也没有发生。我的开发工具网络标签中没有看到reCAPTCHA XHR。

可能是因为按钮是动态插入到DOM中的，并且firebase.auth.RecaptchaVerifier()在安装组件时传递ID时无法检测到它吗？我该如何解决？我可以使用$ 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()钩子出现时，你sendSMS()在回调后调用函数recaptchaVerifier。但是当提交第一个按钮时：

<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>