reCaptcha 中的 Firebase OTP 身份验证错误

Question

import React, { useState, useRef } from "react";
import firebase from "../firebase";

const Auth = () => {

    const [phoneNumber,setPhoneNumber] = useState('');
    const [verificationID, setVerificationID] = useState('');
    const recaptchaRef = useRef(null);
  
    const handleSendOtp = ()=>{

        if(recaptchaRef.current){
            recaptchaRef.current.innerHTML = `<div id="recaptcha-container"></div>`
        }

        const verifier = new firebase.auth.RecaptchaVerifier('recaptcha-container',{
            size:'invisible'
        });

        firebase.auth().signInWithPhoneNumber(phoneNumber,verifier)
        .then(confirmationResult => {
            setVerificationID(confirmationResult.verificationId);
        })
        .catch(error => {
            console.log('Error sending OTP:',error);
        })
    }

    return(
        <div>
            <h1>Phone OTP Authentication</h1>
            <div ref={recaptchaRef}></div>
            <input 
            type="tel" 
            placeholder="[phone]"
            value={phoneNumber}
            onChange={e => setPhoneNumber(e.target.value)}
            />

            <button onClick={handleSendOtp}>Send OTP</button>
        </div>
    );
};

export default Auth;

我正在为我的 React JS Web 项目使用 firebase

每当我点击发送 OTP 请求时，我都会收到此错误

发送 OTP 时出错：FirebaseError：Firebase：电话验证请求包含无效的应用程序验证程序。 reCAPTCHA 令牌响应无效或已过期。 （身份验证/无效的应用程序凭据）。

我无法弄清楚这一点，即使 ChatGPT 也无法帮助我

Answer 1

有什么解决办法吗？我从七月开始就有同样的问题