Firebase reCAPTCHA 已在此元素中呈现

Question

使用 Phone 数字 (JS) 进行 Firebase 身份验证需要强制性 reCAPTCHA verifier，它需要容器的 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)

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

reCAPTCHA has already been rendered in this element

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

谢谢！

Answer 1

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

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