如何使用 JavaScript 重新加载 ReCaptcha？答案

【问题标题】：How to Reload ReCaptcha using JavaScript?如何使用 JavaScript 重新加载 ReCaptcha？
【发布时间】：2010-07-30 12:21:15
【问题描述】：

我有一个带有 AJAX 的注册表单，因此我想在发生错误时刷新 Recaptcha 图像（即用户名已在使用中）。

我正在寻找与 ReCaptcha 兼容的代码，以便使用 JavaScript 重新加载它。

【问题讨论】：

别打扰了。如果使用了用户名，为什么要更改验证码？
@SLaks：可能是因为他先检查验证码，然后检查用户 - 一旦使用验证码，它就不再有效。以另一种方式绕过恶意用户可以轻松地破坏服务器并使用蛮力获取所有用户的列表，而无需使用验证码。
@TomaszNurkiewicz 更新：恶意用户将无法多次提交相同的重新验证码进行验证。所以不，这里不可能进行暴力破解。刷新验证码的原因只是为了让用户再次输入。
我相信熟练的攻击者可以利用定时攻击来根据机器人验证的位置找出错误的数据；我更喜欢将我的作为第一个检查并在失败时立即拒绝任何内容，这也有助于减少我的服务器上的负载，所以当它们无论如何都会被拒绝时我不会进行数据库查询

标签： javascript recaptcha

【解决方案1】：

对于 reCaptcha v2，使用：

grecaptcha.reset();

如果您使用的是 reCaptcha v1（可能不是）：

Recaptcha.reload();

如果window 上已加载 Recaptcha，则可以这样做。

（根据@SebiH 下面的评论更新。）

【讨论】：

对于使用新的 reCAPTCHA 的任何人：该行现已更改为 grecaptcha.reset(); (documenation)
我在我的 react 应用程序中使用了这个 grecaptcha.reset();，它运行良好
如果您不确定 grecaptcha 是否已加载，请使用 if (window.grecaptcha) grecaptcha.reset();
虽然这会重新加载验证码，但验证码响应的字段值似乎没有被删除，使我的表单有效。

【解决方案2】：

如果您使用的是版本 1

Recaptcha.reload();

如果您使用的是版本 2

grecaptcha.reset();

【讨论】：

复制了接受的答案并在 3 年后重新发布。急。
@PRWhitehead 请查看编辑历史记录。顺便说一句，感谢您的反对。
我做了，你没有编辑你的，并且你在接受的答案更新 3 个月后首次添加它以反映 API 的变化 - 影响初始答案的相关性和它之后的几年是最先添加的。我投了反对票，因为这个公认的答案更有用。
我添加了这个答案，因为我遇到了同样的问题。虽然接受的答案反映了当时的正确答案，但还不够清楚。至少对我来说，这就是为什么我决定添加一个清晰分离的新答案（接受的答案确实没有注意到与版本的差异）。

【解决方案3】：

重要提示： 1.0 版的 reCAPTCHA API 不再受支持。请升级到 2.0 版。

您可以使用 grecaptcha.reset(); 来重置验证码。

来源：https://developers.google.com/recaptcha/docs/display#js_api

【讨论】：

【解决方案4】：

grecaptcha.reset(opt_widget_id)

重置 reCAPTCHA 小部件。可以传递一个可选的小部件 ID，否则该函数将重置创建的第一个小部件。 (from Google's web page)

【讨论】：

它只重置页面上的第一个验证码
@Maxwells.c 你读过这篇文章吗？或者，您可以传递一个小部件 ID 并删除第 n 个小部件。如果你没有通过，那么第一个被重置。
小部件 ID 到底是什么？我尝试传入recaptcha
的html id，但收到错误“无效的recaptcha 客户端ID”。我想我需要显式渲染小部件，因为我认为 render() 方法返回了我需要的 id。
opt_widget_id 是可选的，是从渲染调用返回的 id，但如果缺少，它将引用第一个创建的 recaptcha 小部件（如果您只有一个小部件，这就足够了）。

【解决方案5】：

或者你可以模拟点击刷新按钮

// If recaptcha object exists, refresh it
    if (typeof Recaptcha != "undefined") {
      jQuery('#recaptcha_reload').click();
    }

【讨论】：

由于某种原因，Recaptcha 和 grecaptcha 在我的页面上都未定义。这对我有用，稍作修改：if( $("#recaptcha_reload").length > 0 ){ ....
我用它来知道何时完成数组的迭代而不计算其元素。

【解决方案6】：

试试这个

<script type="text/javascript" src="//www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
          function showRecaptcha() {
            Recaptcha.create("YOURPUBLICKEY", 'captchadiv', {
              theme: 'red',
              callback: Recaptcha.focus_response_field
            });
          }
 </script>

<div id="captchadiv"></div>

如果您调用 showRecaptcha，captchadiv 将填充一个新的 recaptcha 实例。

【讨论】：

您可以更改您的代码并调用 showRecaptcha onload？这对您有帮助吗？

【解决方案7】：

对于 AngularJS 用户：

$window.grecaptcha.reset();

【讨论】：

在我的情况下没有 $ - window.grecaptcha.reset();

【解决方案8】：

如果您使用的是新的 recaptcha 2.0，请使用：后面的代码：

ScriptManager.RegisterStartupScript(this, this.GetType(), "CaptchaReload", "$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});", true);

对于简单的javascript

<script>$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});</script>

【讨论】：