javascript - Electron js、Angular 5 中的 Firebase 电话号码身份验证

Question

我正在尝试实现 Firebase 电话号码身份验证，但环境存在问题，例如我正在使用 Electron js。

这是我的代码

import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase';

constructor(public afAuth: AngularFireAuth) {}

sendPhoneNumber() {

const phoneNumber = '+' + this.phoneNumber;
const appVerifier = new firebase.auth.RecaptchaVerifier('LoginPage-signInButton', {
    'size': 'invisible',
    'callback': (response) => {
      console.log('response', response)
    },
    'error-callback': (error) => {
      console.log('error', error);
    }
  });
  this.afAuth.auth.signInWithPhoneNumber(phoneNumber, appVerifier)
    .then(confirmationResult => {
      console.log(confirmationResult);
    }) 
}

我收到此错误

code: "auth/operation-not-supported-in-this-environment"
message: "RecaptchaVerifier is only supported in a browser HTTP/HTTPS environment."

是否有针对此问题的解决方案或解决方法？

Answer 1

根据您的问题，您似乎正在尝试在 Electron 应用程序中处理电话身份验证。根据您在 Electron 环境中的处理方式，使用 Firebase JS 库的电话身份验证可能无法正常工作，因为 reCAPTCHA 将无法验证应用程序的来源。这是因为原点看起来像 file://assets/index.html。

Firebase 的网络电话身份验证服务依赖于应用验证器接口(interface):https://firebase.google.com/docs/reference/js/firebase.auth.RecaptchaVerifier RecaptchaVerifier 实现了它。

这样做:

在浏览器上打开，渲染 reCAPTCHA，获取 reCAPTCHA token ，关闭浏览器，然后将其传回您的 Electron 应用程序，然后实现您自己的 firebase.auth.ApplicationVerifier。

打开浏览器自定义选项卡并重定向到 Firebase 控制台中您自己的白名单，其中将呈现 firebase.auth.RecaptchaVerifier。 然后，您将 reCAPTCHA 响应 token 传递回您的应用程序。这保证了只有您的应用程序可以打开它。

您需要监听应用程序中的传入链接并解析 reCAPTCHA token 。将其重新打包到 firebase.auth.ApplicationVerifier 实现中。您现在可以将其传递给signInWithPhoneNumber 来完成登录。

希望这有帮助。