如何使用JavaScript重新加载ReCaptcha?

如何使用JavaScript重新加载ReCaptcha?,javascript,recaptcha,Javascript,Recaptcha,我有一个使用AJAX的注册表单,以便在出现错误时(即用户名已在使用)刷新Recaptcha图像 我正在寻找一个与ReCaptcha兼容的代码,以便使用JavaScript重新加载它。试试这个 <script type="text/javascript" src="//www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script> <script type="text/javascript">

我有一个使用AJAX的注册表单,以便在出现错误时(即用户名已在使用)刷新Recaptcha图像

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

试试这个

<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.create(“您的公钥”,“captchadiv”{
主题:"红色",,
回调:Recaptcha.focus\u response\u字段
});
}
如果调用l showRecaptcha,captchadiv将填充一个新的recaptcha实例。

对于recaptcha v2,请使用:

grecaptcha.reset();
如果您使用的是reCaptcha v1(可能不是):

如果
窗口上有已加载的Recaptcha,则可以执行此操作


(根据@SebiH下面的评论进行了更新。)

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

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

如果您使用的是版本1

Recaptcha.reload();
如果您使用的是版本2

grecaptcha.reset();

如果您正在使用新的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>
$.getScript(\”https://www.google.com/recaptcha/api.js\,函数(){});

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

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

资料来源:

重置reCAPTCHA小部件。可以传递可选的小部件id,否则函数将重置创建的第一个小部件

对于AngularJS用户:

$window.grecaptcha.reset();


不用麻烦了。如果使用了用户名,为什么要更改验证码?@SLaks:可能是因为他先检查验证码,然后检查用户-一旦使用验证码,它就不再有效。如果恶意用户以另一种方式进行此操作,则可以很容易地破坏服务器并使用暴力获取所有用户的列表,而不必担心验证码。@TomaszNurkiewicz UPDATE:恶意用户将无法多次提交相同的重新验证码进行验证。所以不,暴力在这里是不可能的。刷新验证码的原因仅仅是为了允许用户再次输入验证码。我相信一个熟练的攻击者可以利用定时攻击来发现哪些数据是错误的,这取决于机器人验证的位置;我宁愿保留我的作为第一个检查,如果失败,立即拒绝任何内容,这也有助于减少我服务器上的负载,因此我不会在任何情况下拒绝DB查询。您可以更改代码并调用showRecaptcha onload?这对您有帮助吗?对于任何使用新的reCAPTCHA的人:该行现在已更改为
grecaptcha.reset()()我正在使用这个
grecaptcha.reset()
用于我的react应用程序,它可以完美工作如果您不确定是否加载了grecaptcha,请使用
if(window.grecaptcha)grecaptcha.reset()
虽然这会重新加载验证码,但验证码响应的字段值似乎不会被删除,从而使我的表单保持有效。由于某些原因,
Recaptcha
grecaptcha
在我的页面上都未定义。这对我来说很管用,只是做了一点修改:
if($(“#recaptcha_reload”).length>0){..
我使用它来知道数组的迭代何时完成,而不计算其元素。它只重置数组上的第一个验证码page@Maxwells.c你读过这篇文章吗?你可以选择传递一个小部件id并删除第n个小部件。如果你没有传递,那么第一个小部件将被重置。小部件id到底是什么?我尝试传递了recaptcha的html id,但出现错误“无效的recaptcha客户端id”。我认为我需要显式呈现小部件,因为我认为render()方法返回我需要的id。opt_widget_id是可选的,是从呈现调用返回的id,但如果缺少,它将引用第一个创建的recaptcha小部件(如果您只有一个小部件,这就足够了);复制了接受的答案,并在3年后重新发布。请查看编辑历史。顺便说一句,谢谢你的否决票。我做了,你没有编辑你的答案,你在接受的答案更新3个月后首次添加了它,以反映API的更改-影响了初始答案的相关性以及首次添加后的几年。我投了反对票,因为这个被接受的答案更有用。我添加这个答案是因为我面临同样的问题。虽然被接受的答案反映了当时的正确答案,但还不够清楚。至少对我来说,这就是为什么我决定添加一个新答案,并明确分开(被接受的答案没有注意到与版本的差异)。
grecaptcha.reset(opt_widget_id)
$window.grecaptcha.reset();