如何使用JavaScript重新加载ReCaptcha？

177

我有一个使用AJAX的注册表单，以便在发生错误（即用户名已在使用）时随时刷新Recaptcha图像。

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

javascript recaptcha

— AhmetB-Google
source

1

不要打扰如果使用了用户名，为什么还要更改CAPTCHA？

— SLaks's

18

@SLaks：可能是因为他先检查了验证码，然后再检查了用户-一旦使用了验证码，该验证码就不再有效。以其他方式对恶意用户执行此操作可以轻松破解服务器并使用蛮力获取所有用户的列表，而不必担心验证码。

— Tomasz Nurkiewicz 2011年

1

@TomaszNurkiewicz更新：恶意用户将不能多次提交相同的验证码来进行验证。因此，不可以，在这里无法实现暴力破解。刷新验证码的原因是仅允许用户再次输入验证码。

— Tony Sepia

我相信熟练的攻击者可以利用定时攻击来确定错误的数据，具体取决于漫游器验证的位置。我宁愿保留我的权限作为第一项检查，如果它们失败则立即拒绝任何操作，这也有助于减轻服务器的负载，因此当它们仍然被拒绝时，我不进行数据库查询

— Steve Byrne

29

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

您可以使用grecaptcha.reset（）; 重置验证码。

来源：https : //developers.google.com/recaptcha/docs/verify#api-request

— 阿比格尼特克
source

370

对于reCaptcha v2，请使用：

grecaptcha.reset();

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

Recaptcha.reload();

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

（根据以下@SebiH的评论进行更新。）

— AhmetB-Google
source

20

对于使用新reCAPTCHA的用户：该行现在已更改为grecaptcha.reset();（documenation）

— SebiH 2015年

我正在将其grecaptcha.reset();用于我的react应用程序，并且效果很好

— yussan

4

如果您不确定是否已加载grecaptcha，请使用if (window.grecaptcha) grecaptcha.reset();

— fred727 '16

尽管这会重新加载验证码，但验证码响应的字段值似乎并未删除，从而使我的表单有效。

— 达米安·格林

58

如果您使用的是版本1

Recaptcha.reload();

如果您使用的是版本2

grecaptcha.reset();

— 大孙
source

1

复制了接受的答案，并在3年后重新发布。哎呀

— PR Whitehead

@PRWhitehead请参阅编辑历史记录。顺便说一句，谢谢你的不赞成投票。

— Dasun

我做到了，您尚未编辑您的内容，而是在接受的答案更新3个月后首次添加它，以反映对API的更改-影响初始答案及其首次添加后的相关性。我对此表示反对，因为这个公认的答案更有用。

— PR Whitehead

2

我添加了此答案，因为我遇到了同样的问题。尽管当时接受的答案反映了正确的答案，但还不够清楚。至少对我来说，这就是为什么我决定添加一个明确分隔的新答案（接受的答案的确没有注意到版本之间的差异）。

— 顺

8

grecaptcha.reset(opt_widget_id)

重置reCAPTCHA小部件。可以传递一个可选的小部件ID，否则该功能将重置创建的第一个小部件。（来自Google的网页）

— 库塔利亚
source

它只会重设页面上的第一个验证码

— Maxwell sc

@ Maxwells.c您甚至看过帖子吗？（可选）您可以传递小部件ID并删除第n个小部件。如果不通过，则第一个重置。

— 库塔利亚'17

1

小部件ID到底是什么？我尝试传递Recaptcha <div>的html ID，但收到错误“无效的Recaptcha客户端ID”。我认为我需要显式呈现窗口小部件，因为我认为render（）方法返回所需的ID。

— 皮特

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，则将用新的Recaptcha实例填充验证码。

— 提姆
source

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

— 蒂姆（Tim）

6

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

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

— 阿尔克斯·瓦列霍
source

1

由于某些原因，Recaptcha并且grecaptcha在我的页面上都未定义。这对我有用，但稍作修改：if( $("#recaptcha_reload").length > 0 ){ ....

— Nate-Bit Int

我用它来知道何时完成数组的迭代而不计算其元素。

— m3nda

3

对于AngularJS用户：

$window.grecaptcha.reset();

— 马塞洛C.
source

1

在我没有$的情况下-window.grecaptcha.reset（）;

— Tony Sepia

3

对于reCaptcha v2的新版本，请使用：

grecaptcha.reset();

— 企业宗旨
source

2

如果您使用的是reCAPTCHA API的1.0版，请升级到2.0版（不再支持1.0版）

使用grecaptcha.reset();重置验证码。

— 谢里夫
source

0

如果您使用的是新的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>

— 萨拉汗
source