无法在ReactJS中使用firebase身份验证重新发送OTP

Question

如何使用 firebase 身份验证重新发送 OTP？

我有2个登录页面：

- Login Page (user enters their name and phone Number) [working fine] {route='/'}

- OTP page user enter their OTP [not able to resend OTP] {route='/otp'}

1.登录页面

• 用户输入姓名和电话号码后的功能。
• 我使用了隐形验证码。

const  onSignInSubmit  = (e) => {
e.preventDefault();

window.recaptchaVerifier  =  new  firebase.auth.RecaptchaVerifier('sign-in-button', {
'size': 'invisible',
'callback': (response) => {
// reCAPTCHA solved, allow signInWithPhoneNumber.
console.log("Recaptca varified")
},
defaultCountry: "IN"
})

const  phoneNumber  =  `+91${userphoneNumber}`;
if(phoneNumber.length<10  ||  userName.length<4) return;

const  appVerifier  =  window.recaptchaVerifier;

firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
.then((confirmationResult) => {
// SMS sent. Prompt user to type the code from the message, then sign the

console.log(confirmationResult);

window.confirmationResult  =  confirmationResult;
console.log("OTP has been sent");
//redirect to otp

history.push('/otp');
}).catch((error) => {
// Error; SMS not sent
console.log(error);
console.log("SMS not sent");
});
}

JSX

<form onSubmit={onSignInSubmit}>
    <input type='text'  value={userName}  setValue={setUserName}  placeholder='Full Name'/>
    <input type='text'  value={userphoneNumber}  setValue={setUserPhoneNumber}  placeholder='Mobile Number'/>
    <Button  type='submit'>Login</Button>
    <div  id="sign-in-button"></div>
</form>

2.一次性密码页面

• 用户点击重新发送 OTP 后的功能。

const  resendOTP=()=>{
    firebase.auth().signInWithPhoneNumber(userDetails.phoneNumber,window.recaptchaVerifier)
    .then((confirmationResult) => {
    // SMS sent. Prompt user to type the code from the message, then sign the
    console.log(confirmationResult);
    window.confirmationResult  =  confirmationResult;
    console.log("OTP has been resent");
    }).catch((error) => {

    // Error; SMS not sent
    console.log(error);
    console.log("SMS not sent");
    });
}

JSX

<form>
    <div onClick={resendOTP}>Resend OTP?</div>
</form>

点击重新发送后，出现此错误

你能帮我吗？

Answer 1

if(!window.recaptchaVerifier){
  window.recaptchaVerifier = new RecaptchaVerifier('sign-in-button', {
    'size': 'invisible',
    'callback': (response) => {
      console.log(response)
      
  
     
    },
    'expired-callback': () => {
      
    }
    
  }, auth);
}

添加

if()

Answer 2

我开发了一个可重用的反应钩子来实现这一点。该钩子公开了可以附加到 reCaptcha div 的引用。即使您在不同的屏幕上有手机号码和验证表单，只要您将引用附加到相应的 recaptcha 容器，重新发送 OTP 功能也将起作用。

// Add a container to the screen where you want to send OTP.
<Box component={"div"} ref={ref} id="recaptcha-container"></Box>


    // Reusable hook encapsulating the firebase phone auth functionality.
export const useFirebasePhoneAuth = () => {
  const dispatch = useDispatch()
  const ref = useRef<HTMLElement>()
  const [sendCodeInProgress, setSendCodeInProgress] = useState(false);
  const [verifyCodeInProgress, setVerifyCodeInProgress] = useState(false);

  // Use this to send the OTP for the very first time or resend the OTP.
  const sendVerificationCode = useCallback(async (mobile: string) => {
    setSendCodeInProgress(true)
    try {
        const verify = new RecaptchaVerifier(firebaseAuthInstance, ref.current!, {
            size: 'invisible',
            callback: (_response: string) => {
                console.log("Recaptcha verified.");
            }
        });

        const result = await signInWithPhoneNumber(firebaseAuthInstance, mobile, verify)
        dispatch(setMobileVerificationId({ verificationId: result.verificationId }))
    } catch (err) {
        console.log(err)
        throw err
    } finally {
        setSendCodeInProgress(false)
    }
}, [dispatch])

  // Use this to verify the code.
  const verifyVerificationCode = useCallback(async (verificationId: string, verificationCode: string) => {
    setVerifyCodeInProgress(true)

    try {
        const credential = PhoneAuthProvider.credential(verificationId, verificationCode)
        const user = await signInWithCredential(firebaseAuthInstance, credential)
        console.log("Phone verification successful.");

        return user;
    } catch (err) {
        console.log(err)
        throw err
    } finally {
        setVerifyCodeInProgress(false)
    }
}, [])

return {
    ref,
    sendCodeInProgress,
    sendVerificationCode,
    verifyCodeInProgress,
    verifyVerificationCode
}}



// Use it where you want to resend the OTP
<Typography sx={{
   textAlign: "center",
 }}>
    <span style={{ color: theme.palette.primary.main, cursor: "pointer" }} onClick={() => { sendVerificationCode(contact.mobile!) startTimer()}}> Resend OTP </span>
 </Typography>