阅读“appVerificationDisabledForTesting”

Question

我正在使用最新版本的 Firebase 进行 OTP 配置，作为一名初级开发人员，我仍在学习并按照文档中的说明进行操作，但是当我提交 recaptcha 时却收到错误，错误是“react-dom”。 development.js：4312 Uncaught TypeError：无法读取未定义的属性（读取“appVerificationDisabledForTesting”） 我尝试了多种策略但无法解决这个问题。这是我第一次为应用程序设置 OTP。

import { getAuth } from "firebase/auth";



const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};


const app = initializeApp(firebaseConfig);
export const auth = getAuth(app)


import React, { useState } from 'react';
import OTPInput from 'react-otp-input';
import { useParams } from 'react-router-dom';
import { useLocation } from 'react-router-dom';
import { auth } from '../firebase.config';


import {  RecaptchaVerifier } from "firebase/auth";
import toast, { Toaster } from 'react-hot-toast';
const Otp = () => {
  const [otp, setOtp] = useState('');
  const [user, setUser] = useState(null);
  const [showOTP, setShowOTP] = useState(false);
  const handleOtpChange = (otp) => {
    setOtp(otp);
  };

  const renderInput = (inputProps) => (
    <input {...inputProps} style={{ width: '3rem', height: '3rem' }} />
  );
  const { phoneNumber } = useParams();
  const submittedData = useLocation().state.submittedData;

  console.log(submittedData)

  function onCaptchaVerify() {
    if (!window.recaptchaVerifier) {
      window.recaptchaVerifier = new RecaptchaVerifier(
        "recaptcha-container",
        {
          size: "invisible",
          callback: (response) => {
            onSignup();
          },
          "expired-callback": () => {},
        },
        auth
      );
    }
  }
  function onSignUp(){
    onCaptchaVerify()
    const appVerifier = window.recaptchaVerifier
    signInWithPhoneNumber(auth, phoneNumber, appVerifier)
    .then((confirmationResult) => {
      // SMS sent. Prompt user to type the code from the message, then sign the
      // user in with confirmationResult.confirm(code).
      window.confirmationResult = confirmationResult;
      setShowOTP(true);
      toast.success("OTP sent sucessfully!")
      // ...
    }).catch((error) => {
      console.log(error)
    });
  }
  return (
    <div>

  <Toaster toastOptions={{duration:4000}} />
      <h1>OTP VALIDATION</h1>

      <div id="recaptcha-container"></div>

      <p>Phone Number: {phoneNumber}</p>
      <OTPInput
        value={otp}
        onChange={handleOtpChange}
        numInputs={6}
        separator={<span>-</span>}
        renderInput={renderInput}
        shouldAutoFocus
      />

      <button onClick={onSignUp}>Validate</button>
    </div>
  );
};

export default Otp;```

Answer 1

您应该将

auth

传递给

RecaptchaVerifier

函数，如下所示：

  function onCaptchaVerify() {
    if (!window.recaptchaVerifier) {
      window.recaptchaVerifier = new RecaptchaVerifier(
        auth,
        "recaptcha-container",
        {
          size: "invisible",
          callback: (response) => {
            onSignup();
          },
          "expired-callback": () => {},
        }
      );
    }
  }

它在文档中

Answer 2

window.recaptchaVerifier = new RecaptchaVerifier( 授权， “验证码容器”， { 尺寸：“正常”， 回调：（响应）=> { onSignup(); }, “过期回调”：() => {

    },
  },
  auth
);

};