无法在Reaction应用程序中为多因素身份验证设置不可见的reCAPTCHA验证器 [英] Unable to set up invisible reCAPTCHA verifier for multi-factor authentication in a react app

问题描述

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

我正在尝试通过以下函数激活reCAPTCHA，该函数链接到一个带有‘code-Button&Quot；id’的按钮。

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函数时，recaptchaVerator内部的回调似乎不起作用。它应该是sole.log"；captcha Working"；，但在我检查控制台时却没有。

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

指示是否通过指定其SameSite属性在跨站点请求中发送Cookie

SharedArrayBuffer仅限于跨源隔离站点

我甚至不知道如何解决它们。根据一些文章，这些问题似乎只能由谷歌自己解决。

有人知道为什么会发生这种情况吗？

谢谢。

推荐答案

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

首先，初始化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);
                  })

这篇关于无法在Reaction应用程序中为多因素身份验证设置不可见的reCAPTCHA验证器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！