javascript - Firebase:不可见的 reCaptcha 在 React JS 中不起作用

Question

概述
嗨，我正在使用 Firebase 的隐形验证码 用于我的 中的电话号码验证 react JS 应用。根据 文档 您需要提供的 Firebase 编号 (例如 sign-in-button )处理登录表单提交的按钮。
预期行为
一旦用户点击 那个按钮 , Firebase 的隐形 reCaptcha 应该启动并检查它是否是 已解决由用户决定。如果 reCaptcha 是 已解决 , 一个 callback由 new firebase.auth.RecaptchaVerifier('...', {}) 提供将被解雇。在那个回调中，我们应该 发送 OTP 代码到用户的电话号码。
问题
发生了什么是 callback除非 不会被解雇未发送 OTP 在提交 的登录表单时没有意义 因为发送 OTP 需要到 由回调 处理由 invisible reCaptcha 提供，而不是由 提供使用 onSubmit 发送 OTP的形式。
版本
“火力基地”:“^7.15.1”，
代码

import React, { Component } from 'react';

import firebase from 'firebase/app';
import 'firebase/auth';

firebase.initializeApp({
  apiKey: 'xxx',
  authDomain: 'xxx',
  databaseURL: 'xxx',
  projectId: 'xxx',
  storageBucket: 'xxx',
  messagingSenderId: 'xxx',
  appId: 'xxx',
  measurementId: 'xxx',
});

class App extends Component {
  componentDidMount() {
    window.reCaptchaVerifier = new firebase.auth.RecaptchaVerifier('login-button', {
      size: 'invisible',
      callback: () => {
        // callback is not being fired automatically
        // but after the OTP has been sent to user's
        // phone number which makes this callback useless
        // as opposed to Firebase's documentation
      },
    });
  }

  handleSubmit = event => {
    event.preventDefault();

    firebase
      .auth()
      .signInWithPhoneNumber('+1 XXX-XXX-XXXX', window.reCaptchaVerifier)
      .then(confirmationResult => {
        window.confirmationResult = confirmationResult;
      })
      .catch(() => {});
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input />
        <button id="login-button">Submit</button>
      </form>
    );
  }
}

Answer 1

通常需要渲染 reCAPTCHA 之前 它被使用。因此，例如，以下代码有效。问题中代码的唯一修改是:

reCAPTCHA 在 componentDidMount 中显式呈现

表格onSumbit因此不使用(在这种情况下它实际上从不触发，因为 reCAPTCHA 回调处理的是提交事件)

预渲染的工作解决方案:

class App extends Component {
  componentDidMount() {
    const reCaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
      size: 'invisible',
      callback: function (response) {
        console.log('It works!');
      },
    });
    reCaptchaVerifier.render();
  }

  render() {
    return (
      <form>
        <input />
        <button id="sign-in-button">Submit</button>
      </form>
    );
  }

}