RecaptchaVerifier 无法在字符串“recaptcha-container”上创建属性“回调”-React

Question

我有两个应用程序共享相同的 firebase 配置。我在一个应用程序上成功实现了signinwithphonenumber，但在另一个应用程序上收到错误：RecaptchaVerifier 无法在字符串“recaptcha-container”上创建属性“回调”。在我的返回方法中，我有这个 div：

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

我想知道为什么recaptcha在return方法中找不到该id的div。 谢谢

const handleOTPRequest = (event) => {
// hide the request btn
setRequestBtn(false);
// trigger otp request
requestOTP();


};
  

const generateRecaptcha = () => {
    window.recaptchaVerifier = new RecaptchaVerifier(
      auth,
      "recaptcha-container",
      {}
    );
  };



const requestOTP = (e) => {
    // e.preventDefault();
    // hide the request btn
    setRequestBtn(false);
    generateRecaptcha();
    let appVerifier = window.recaptchaVerifier;
    let number = userNumber;
    signInWithPhoneNumber(auth, number, appVerifier)
      .then((confirmationResult) => {
        setConfirmationResult(confirmationResult);
        console.log(confirmationResult);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  const verifyOTP = () => {
    let otpCode = otp;

if (confirmationResult && otpCode) {
  confirmationResult
    .confirm(otpCode)
    .then((result) => {
      // User signed in successfully.
      const user = result.user;
      console.log(user);
      dispatch(setCredentials(user.uid));
      dispatch(setLogin(user.uid));

      // update the database
      const addPhone = async () => {
        const userRef = doc(db, "users", user.uid);
        const userSnap = await getDoc(userRef);

        if (userSnap.exists()) {
          // Update the existing user document with the new phone field
          await setDoc(userRef, {
            ...userSnap.data(), // Maintain the existing properties
            phone: user.phoneNumber, // Update the phone field
          });
          dispatch(setMobile(user.phoneNumber));
          navigate("/home");
        } else {
          // Create a new user document with the phone field
          await setDoc(userRef, {
            phone: user.email,
          });
          dispatch(setEmail(user.email));
          navigate("/home");
        }
      };
      addPhone();

      // ...
    })
    .catch((error) => {
      // User couldn't sign in (bad verification code?)
      console.log(error);
    });
}
  };

Answer 1

RecaptchaVerifier 类应该将来自 firebase 的“auth”作为最后一个参数。

const generateRecaptcha = () => {
    window.recaptchaVerifier = new RecaptchaVerifier(
      "recaptcha-container",
      {},
      auth
    );
  };