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

Posted 2023-02-22

【中文标题】使用 Vue.js 的 Firebase 电话号码身份验证不起作用

【英文标题】：Firebase phone number authentication with Vue.js does not work

【发布时间】：2018-06-27 13:50:44

【问题描述】：

我正在基于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 ,
);

在上述示例中，为了安全起见，我的凭据已被编辑。

当用户在 /sign-in 时，这是他们看到的组件：

/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 保护”徽章，我想摆脱它。有什么方法可以让这个脚本在不显示徽章的情况下工作？

【参考方案1】：

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

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

【参考方案2】：

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