reCAPTCHA 已在此元素中呈现

Posted 2023-02-22

【中文标题】reCAPTCHA 已在此元素中呈现

【英文标题】：reCAPTCHA has already been rendered in this element

【发布时间】：2019-06-04 05:58:22

【问题描述】：

我有一个使用 ASP .Net 使用更新面板构建的简单联系表单。一切都按预期工作，但我看到了错误

recaptcha__en.js：未捕获错误：

在控制台窗口中

<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 添加到脚本行解决了这个问题，但现在我得到了上述错误。

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

【问题讨论】：

您是否在页面上添加了两次<script src="https://www.google.com/recaptcha？检查 html 以确保。

刚刚在查看源下的页面上进行了搜索，没有，它只列出了一次。

你试过这个SO post的建议了吗？

是的，我试过了，但是我遇到了不同的问题，从这个错误 Uncaught TypeError: grecaptcha.render is not a function 到验证码在回发时消失。

【参考方案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*/`

【讨论】：

对我不起作用，仍然会触发错误

【参考方案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 和 setRecaptcha 感兴趣

@itshinkswhenitscold, const [recaptcha, setRecaptcha] = useState()

【参考方案3】：

对于 Angular 用户，请在 try and catch 块中使用站点密钥尝试 google recaptcha v2。