javascript 已在此元素中呈现reCAPTCHA

nbewdwxp 于 2022-11-20 发布在 Java

关注(0)|答案(5)|浏览(178)

我有一个用updatepanel和ASP.NET构建的简单的联系人窗体。一切都按预期工作，但我看到了错误

摘要：未捕获的错误：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添加到脚本行解决了这个问题，但现在我得到了上面的错误。
如果我尝试删除一些元素，那么其他东西就会中断，即captcha不显示或在回发时不显示？

JavaScript

来源：https://stackoverflow.com/questions/54110489/recaptcha-has-already-been-rendered-in-this-element

5条答案

按热度按时间

ua4mk5z41#

几天前，我在动态登录和创建表单时遇到了同样的问题，原因是我在同一个元素上渲染了两次。
Google ReCaptcha抛出一个异常，通知所述问题。
我的解决方案是使用try{...}catch(event){...}作为grecaptcha.render()的 Package 器

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*/}`

赞(0）回复(0）举报 2022-11-20

nbnkbykc2#

对于那些正在使用React with Firebase的用户，如果发生此错误，您只需在卸载组件时销毁Recaptcha的示例。

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

赞(0）回复(0）举报 2022-11-20

xiozqbni3#

对于有Angular 的用户，请尝试google captcha v2，在try和catch块中使用站点密钥。

赞(0）回复(0）举报 2022-11-20

sdnqo3pr4#

如果将Angular与firebase一起使用，则必须在使用后销毁RecaptchaVerifier

//if for example you have declared it as such:
recaptchaVerifier: firebase.default.auth.RecaptchaVerifier;

//you can destroy it as such:
this.recaptchaVerifier.clear()

//you must do for example the destruction when you navigate to a new component

赞(0）回复(0）举报 2022-11-20

am46iovg5#

如果是，请输入以下命令：“不可见”、“回调”：（响应）=〉{控制台.log（响应）

},
    'expired-callback': () => {
      
    }
    
  }, auth);
  }

通过添加if（）修复它

赞(0）回复(0）举报 2022-11-20

我来回答

javascript 已在此元素中呈现reCAPTCHA

5条答案

相关问题

热门标签

最新问答