Firebase reCAPTCHA 已在此元素中呈现

Question

使用电话号码 (JS) 对 Firebase 进行身份验证需要强制reCAPTCHA 验证程序，它需要容器的 ID。对于容器的 ID，我正在生成一个随机的 -

firebase_recaptcha_container: "recaptcha-container",

firebase_recaptcha_reset: function() {
            

            if (typeof appVerifier != "undefined") {
                appVerifier.reset()
                appVerifier.clear()        
            } 
            
            let id = loadJS.firebase_recaptcha_container

            let newID = loadJS.randomString(10)
            $("#"+id).contents().remove()
            $("#"+id).prop("id", newID)
            loadJS.firebase_recaptcha_container = newID
            return newID

        }
        
    

然后请求 RecaptchaVerifier 并在收到时将其设置为全局变量 window.appVerifier 。

firebase_recaptcha: function(name_r="default") {
            let promiseD = new firebase.auth.RecaptchaVerifier(name_r, {
                'size': 'invisible',
                'callback': function(response) {
                    resolve(response)
                },
                'expired-callback': function(r) {
                    console.log("expired", r)
                },
                'isolated' : false
              });
              
            return promiseD
        },
         
    
_____________________
        
let container_recaptcha = $utils.firebase_recaptcha_reset()

window.appVerifier = await $utils.firebase_recaptcha(container_recaptcha)

这是第一次完全正常。但用户没有使用正确的电话号码是一个诚实的错误。所以下一次，我再次做同样的事情并在生成 RecaptchaVerifier 时出错 -

reCAPTCHA 已在此元素中呈现

遗憾的是，这没有意义，因为新元素完全不同，而且很清楚，按照文档调用了重置方法。我没有在此页面上使用任何其他 reCaptcha。刷新页面可能是一个可能的解决方案，但我真的很讨厌。任何见解都会有所帮助。

谢谢！

Answer 1

终于找到解决办法了，看来这是一个愚蠢的错误！

每次调用 firebase.auth.RecaptchaVerifier 都会添加新的 recaptcha 脚本！因此，所有需要做的就是，调用一次，它自己完成剩下的工作。