javascript - 在 Reactjs 中使用 firebase 电话身份验证时出现 "firebaseApp.auth.RecaptchaVerifier is not a constructor"错误

Question

我正在从一个文件导入“firebaseApp”，在该文件中我已经完成了 Firebase 的所有设置，并且已经实现了电子邮件、谷歌和 Facebook 身份验证，但是当我实现电话号码身份验证时，ReCaptcha 不是我正在使用 ReactJs 的构造函数功能组件。 有没有办法在没有 ReCaptcha 的情况下实现电话号码身份验证，或者如果没有，我该如何修复错误。

Firebase 设置

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

    // Web app's Firebase configuration
    var firebaseConfig = {
      apiKey: "",
      authDomain: "",
      databaseURL: "",
      projectId: "",
      storageBucket: "",
      messagingSenderId: "",
      appId: ""
    };

    // Initialize Firebase
    export const firebaseApp = firebase.initializeApp(firebaseConfig);
    export const auth = firebase.auth();
    export const db = firebase.firestore();
    export const google_provider = new firebase.auth.GoogleAuthProvider();
    export const facebook_provider = new firebase.auth.FacebookAuthProvider();

这是我将数字作为用户输入并发送 OTP 进行验证的地方，但示例代码数字是硬编码的。

import { firebaseApp, auth } from '../../../firebase/firebasesetup'

 function Form() {
    const setuprecaptcha = () => {
    window.recaptchaVerifier = new firebaseApp.auth.RecaptchaVerifier('recaptcha-container',
        {
            'size': 'invisible',
            'callback': function (response) {
            console.log("captcha resolved");
               // sendsms();
            }
        });
     } 
  const sendsms = () => {
    setuprecaptcha();
    var phoneNumber = '+918220310506';
    var appVerifier = window.recaptchaVerifier;
    auth.signInWithPhoneNumber(phoneNumber, appVerifier)
        .then(function (confirmationResult) {
            
            window.confirmationResult = confirmationResult;
        }).catch(function (error) {
            alert("not sent")
        });

  }
  return (
      <input type="text" placeholder="Mobile" value={mob} 
        onChange={e => setMob(e.target.value)} />
      <div id="recaptcha-container"></div>
      <button onClick={sendsms} id='sign-in-button'>Send otp</button>
      )

 }

export default Form

Answer 1

好吧，我正在回答我自己的问题。这看起来很奇怪，但如果你们中有人遇到和我一样的问题。

我需要在 firebase_setup 文件中解决两件事，并在 React 功能组件中添加 main 函数。 (共3次更新)

firebase_setup 文件

首先 import firebase from 'firebase';而不是import firebase from 'firebase/app';

第二个 firebase.initializeApp(firebaseConfig); export const firebaseApp = firebase

React 功能组件

import { firebaseApp} from './firebase_setup';

const sendsms = () => {

//If you want to make the recaptcha invisible
var recaptcha = new firebaseApp.auth.RecaptchaVerifier('recaptcha-container', {
                      'size': 'invisible'
                      });
//If you want to make the recaptcha visible
var recaptcha = new firebaseApp.auth.RecaptchaVerifier('recaptcha-container');

//Your phone number with the country code
var number = '+**********';
//actual code begins here
auth.signInWithPhoneNumber(number, recaptcha).then(function (e) {
        var code = prompt("enter the code sent to your mobile number");

        if (code === null) return;

        e.confirm(code).then(function (result) {

            alert(result.user + ' verified ')

        }).catch(function (error) {
            alert('Could not verify,Please try again');
        });

    }).catch(function (error) {
        alert('Please try again.We were unable to reach your phone.Select the           correct code and the phone number');
    });

}