Isu dengan panggilan balik reCAPTCHA dalam Pengesahan Telefon Firebase

Question

Saya cuba melaksanakan pengesahan telefon dalam tapak web NextJS saya dan saya telah menambahkan kod reCAPTCHA dalam useEffect saya, tetapi ia tidak akan dicetuskan apabila butang dengan id itu diklik. Tiada ralat pun. Berikut ialah kod reCAPTCHA:

window.recaptchaVerifier = new RecaptchaVerifier('btnPersonalInfoSubmit', {
                    'size': 'invisible',
                    'callback': (response) => {
                        console.log(response);
                      handlePersonalInfoUpdate();
                    },
                    'expired-callback': () => {
                        console.log('expired');
                    },
                    'error-callback': (error) => {
                        console.log(error);
                    }
                }, auth);

Tiada keluaran. Adakah terdapat sebarang sebab?

Answer 1

Saya faham.

Saya terpaksa menambah window.recaptchaVerifier.render() pada penghujungnya. Kod akhir:

if (!window.recaptchaVerifier) {
                    window.recaptchaVerifier = new RecaptchaVerifier('btnPersonalInfoSubmit', {
                        'size': 'invisible',
                        'callback': (response) => {
                            handlePersonalInfoUpdate();
                        },
                        'expired-callback': () => {
                            console.log('expired');
                        },
                        'error-callback': (error) => {
                            console.log(error);
                        }
                    }, auth);
                    window.recaptchaVerifier.render()
                }