Google reCaptcha 重置不起作用

Posted 2023-02-22

【中文标题】Google reCaptcha 重置不起作用

【英文标题】：Google reCaptcha reset doesn't work

【发布时间】：2015-07-14 08:44:46

【问题描述】：

当我通过 AJAX 提交表单并出现一些输入错误或发送表单时，我想重置 Google reCaptcha 小部件。我在同一页面上使用了多个小部件，因此我明确呈现这些小部件。

我的 html 代码：

<div class="g-recaptcha" id="recaptcha-1"></div>
<div class="g-recaptcha" id="recaptcha-2"></div>
...
<div class="g-recaptcha" id="recaptcha-20"></div>

加载小部件

<script src="https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit&hl=en" async defer></script>
<script>
    var reCaptchaCallback = function() 
        var elements = document.getElementsByClassName('g-recaptcha');
        for (var i = 0; i < elements.length; i++) 
            var id = elements[i].getAttribute('id');
            grecaptcha.render(id, 
                'sitekey' : 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
            );
        
    ;
</script>

提交表单后：

var id = $('.g-recaptcha', form).attr('id');
grecaptcha.reset(id);

Form是提交表单的实例。

正确填写表格后一切正常。但 reCaptcha 不会重置或重新加载。 它尝试了这个grecaptcha.reset()，但没有结果。

有什么想法吗？

【问题讨论】：

会报错吗？

不幸的是没有:(。我没有错误。看起来它重新加载了整个recaptcha.js文件。

【参考方案1】：

grecaptcha.reset() 方法接受可选的widget_id 参数，如果未指定，则默认为创建的第一个小部件。对于创建的每个小部件，grecaptcha.render() 方法会返回一个 widget_id。所以你需要存储这个 id，并用它来重置那个特定的小部件：

var widgetId = grecaptcha.render(container);
grecaptcha.reset(widgetId);

See here.

【讨论】：

非常感谢，我希望这会有效，但不会。我必须做错事。我已经更新了我的代码。也许它有帮助。我现在收到错误：Invalid ReCAPTCHA client id: recaptcha-1。不明白为什么ID是错误的。

@quarky 您需要存储grecaptcha.render 返回的值，并可能将其附加到元素上。例如：var id = grecaptcha.render(etc); elements[i].setAttribute('cid', id);，然后使用该 id 进行删除。

以防万一有人要检查 ID，它是一个从零开始的索引。因此，如果小部件存在，(!widgetId) 可能为假。

grecaptcha.render(container);总是返回 0 作为 id，有什么问题？

回答 Oleg，它是一个从零开始的索引，因此第一个 recaptcha 小部件将始终返回 0 作为 ID。它工作正常。

【参考方案2】：

您传递了错误的 ID。

$('.g-recaptcha', form).attr('id');

您的选择器将捕获所有 20 个 reCaptcha 小部件，但只返回一个 DOM id（第一个 reCaptcha）。所以你的代码实际上是在重置第一个 recaptcha。

【参考方案3】：

刚刚编辑了您的代码以创建一个动态小部件。

<script>
    var reCaptchaCallback = function() 
        var elements = document.getElementsByClassName('g-recaptcha');
        for (var i = 0; i < elements.length; i++)                 
            widgetId+i = grecaptcha.render('recaptcha-'+i, 
                'sitekey' : 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
            );
        
    ;
</script>

并且在你成功完成上面的任务之后，在AJAX的success:response中改一下

grecaptcha.reset(widgetId+id);

这里的 id 与下面的 for 循环生成的 id 相同。

【参考方案4】：

我在同一页面中有两个谷歌验证码，两种不同的形式

<form id="form1">    
<input type="text" name="form1-input">
<div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXXXX"></div>
</form>

和

<form id="form2">    
<input type="text" name="form2-input">
<div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXXXX"></div>
</form>

您可以通过

重置第一个验证码

 grecaptcha.reset(); or grecaptcha.reset(0);

第二个验证码按索引 (1)

grecaptcha.reset(1);

【参考方案5】：

我遇到了一个问题，即页面上有多个重新验证码，有些被隐藏了。在这种情况下，我必须遍历所有这些并像这样重置它们：

                var count = 0;
                $(".g-recaptcha").each(function () 
                    grecaptcha.reset(count);
                    count++;
                );