更新

Question

我正在根据Webpack template构建一个新的Vue.js应用。我有一个/ sign-in路由加载名为SignIn的组件。我正在尝试使用Firebase SDK来Firebase Phone Number authentication对我的用户进行身份验证。

我已经使用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（在本例中为“get-sign-in-code”）。但是，当我单击按钮时，没有任何反应。我没有在我的开发工具网络选项卡中看到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()钩出现时，您在回调后在sendSMS()中调用recaptchaVerifier函数。但是，当将第一个按钮放在下面时：

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

未显示在提交或点击时调用的功能。我想您会更新按钮以响应单击它，如下所示：更改位于 form标签中，该标签显示在提交表单时调用哪个函数。

<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

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

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

更新

2 个答案: