Firebase:不可见的reCaptcha在React JS中不起作用 [英] Firebase: Invisible reCaptcha does not work in React JS

问题描述

您好，我在 React JS 应用程序中使用 Firebase的隐形reCaptcha 进行电话号码身份验证.根据Firebase的文档，您需要提供用于处理登录表单提交的按钮的 id (例如 sign-in-button ).

Hi, I am using Firebase's invisible reCaptcha for phone number authentication in my React JS application. As per the documentation of Firebase you need to provide id (e.g. sign-in-button) of the button which handles submit of login form.

一旦用户单击该按钮，Firebase的不可见reCaptcha应该会启动，并检查用户是否已已解决.如果reCaptcha被解决，则将触发由 new firebase.auth.RecaptchaVerifier('...'，{})提供的 callback .在该回调中，我们应该发送OTP 代码到用户的电话号码.

Once user click on that button, Firebase's invisible reCaptcha should kick in and checks if it has been resolved by the user or not. If reCaptcha is resolved, a callback provided by new firebase.auth.RecaptchaVerifier('...', {}) will be fired. In that callback we are supposed to send an OTP code to user's phone number.

这是怎么回事，除非在提交登录表单时未发送 OTP ，否则不会触发回调，而这是没有道理的，因为发送OTP的操作需要由隐式reCaptcha提供的回调处理，而不是使用表单的onSubmit 发送OTP.

What's the happening is that the callback is not being fired unless the OTP isn’t sent on submit of the login form which doesn’t make sense because sending OTP needs to handled by the callback provided by invisible reCaptcha and not by sending the OTP with onSubmit of the form.

"firebase":"^ 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>
    );
  }
}

推荐答案

通常，必须在使用之前呈现reCAPTCHA.因此，例如，以下代码有效.问题中对代码的唯一修改是:

Usually, reCAPTCHA needs to be rendered before it is used. So, for example, the following code works. The only modifications from the code in the question are:

• reCAPTCHA在 componentDidMount
中显式呈现因此，不使用
• form的 onSumbit (在这种情况下它实际上从不触发，因为reCAPTCHA回调处理了Submit事件)

• reCAPTCHA is rendered explicitly in componentDidMount
• form's onSumbit is not used therefore (it actually never fires in this scenario, because reCAPTCHA callback processes the submit event instead)

具有预渲染的工作解决方案:

Working solution with pre-render:

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>
    );
  }

}

这篇关于Firebase:不可见的reCaptcha在React JS中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！