"firebaseApp.auth.RecaptchaVerifier is not a constructor" 在 Reactjs 中使用 firebase phone 身份验证时出错

Question

我正在从一个文件中导入 'firebaseApp'，我已经在该文件中完成了 firebase 的所有设置，并且已经实施了电子邮件、google 和 Facebook 身份验证，但是当我实施 phone number auth ReCaptcha 不是我正在使用 ReactJs 功能组件的构造函数。 有没有什么方法可以在没有 ReCaptcha 的情况下实现 phone 数字身份验证，如果没有，我该如何修复错误。

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 文件中解决 2 件事，并在 React 功能组件中添加主要功能。 （共 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');
    });

}