无法在 React 应用程序中为多因素身份验证设置不可见的 reCAPTCHA 验证程序

Question

根据这篇文章 https://cloud.google.com/identity-platform/docs/web/mfa，我正在尝试设置不可见的 reCAPTCHA。但是，回调函数似乎并没有触发。我的想法是我希望 recaptcha 在单击按钮时触发并通过回调函数发送代码，但它不起作用。

我正在尝试通过链接到具有“code-button”id 的按钮的以下函数来激活 recaptcha。

sendCode () {         
         
        const recaptchaVerifier = new firebase.auth.RecaptchaVerifier('code-button', {
            'size': 'invisible',            
            'callback': () => {
              // reCAPTCHA solved, you can proceed with phoneAuthProvider.verifyPhoneNumber(...).
            //   onSolvedRecaptcha();
            console.log("captcha is working")
            }            
           })
               
            recaptchaVerifier.render()               
                 
     }

当我按下按钮触发 sendCode 函数时，recaptchaVerifier 中的回调似乎不起作用。它应该console.log“验证码工作”但它没有，因为我检查了控制台。

我确实在控制台中遇到以下问题，但我不确定它们是否真的阻止了回调或使 recaptcha 不起作用：

通过指定其SameSite属性来表示是否在跨站请求中发送cookie

SharedArrayBuffer 的使用仅限于跨源隔离站点

我什至不知道如何解决它们。根据某些文章，它们似乎是只能由 Google 自己解决的问题。

有人知道为什么会这样吗？

谢谢。

Answer 1

我自己解决了这个问题，方法是从内部删除回调，而只是根据需要从另一个函数调用 recaptchaVerifier。例如：

首先，初始化recaptcha并渲染它：

const recaptchaVerifier = new firebase.auth.RecaptchaVerifier('code-button', {
                    size: 'invisible'                    
                   });

                   recaptchaVerifier.render()

然后，在需要的地方简单地调用它：

user.multiFactor.getSession().then((multiFactorSession) => {
                    // Specify the phone number and pass the MFA session.
                    const phoneInfoOptions = {
                      phoneNumber: this.state.number,
                      session: multiFactorSession
                    };
                    
                    const phoneAuthProvider = new firebase.auth.PhoneAuthProvider();
                    // Send SMS verification code.
                    return phoneAuthProvider.verifyPhoneNumber(
                        phoneInfoOptions, recaptchaVerifier);
                  })