Question

我有一个使用updatepanel用ASP .Net构建的简单联系表单。一切正常，但我看到了错误

recaptcha__en.js：未捕获的错误：reCAPTCHA已在此元素中呈现

在控制台窗口中

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script src="https://www.google.com/recaptcha/api.js?onload=pageLoad&render=explicit" async defer></script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div class="g-recaptcha" data-sitekey="XXXX"></div>
    </ContentTemplate>
</asp:UpdatePanel>

<script language="javascript" type="text/javascript">
    function pageLoad() {
        $('.g-recaptcha').each(function (index, obj) {
            grecaptcha.render(obj, { 'sitekey': 'XXXX' });
        });
    }
</script>

我最初添加了onload=pageLoad&render=explicit，就好像未检查验证码一样，您单击了发送按钮，验证码就消失了。将onload=pageLoad&render=explicit添加到脚本行可以解决此问题，但现在我得到了上面的错误。

如果我尝试删除某些元素，那么其他内容会中断，即验证码不显示或不显示在回发上吗？

Answer 1

几天前，我使用动态登录和创建表单遇到了同样的问题。原因是我在同一元素上渲染了两次。

Google ReCaptcha引发异常，通知上述问题。

我的解决方案是使用try{...}catch(event){...}作为grecaptcha.render()的包装器

try{
    grecaptcha.render('elementID', {
        'sitekey' : 'key',
        'badge' : 'att',
        'size' : 'att',
        'tabindex' : 0,
        'callback' : function(token) {
            //..
        },
        'expired-callback' : function() {
            //...
        },
        'error-callback' : function() {
            //...
        },
        'isolated' : false
    });
}catch(error){/*possible duplicated instances*/}`

Answer 2

对于将 React 与 Firebase 结合使用的用户，如果发生此错误，您只需要在卸载组件时销毁 Recaptcha 实例。

useEffect(() => {
const verifier = new firebase.auth.RecaptchaVerifier(element.current, {
  size: "invisible",
});
    if (!recaptcha) {
        verifier.verify().then(() => setRecaptcha(verifier));
    }
return () => {
  verifier.clear()
}
});

reCAPTCHA已经在此元素中呈现

2 个答案: