ReCaptcha v2 客户端事件

Posted 2023-02-22

【中文标题】ReCaptcha v2 客户端事件

【英文标题】：ReCaptcha v2 client side events

【发布时间】：2015-10-19 16:30:03

【问题描述】：

ReCaptcha v2 是否公开任何客户端事件？我正在寻找特别是在勾选该框后确定何时返回验证码响应，因此我可以显示下面的“继续”按钮。

如果没有这个，用户可以单击复选框，然后在验证码响应返回之前快速单击提交按钮。

我可以将自己的点击事件处理程序添加到类 recaptcha-checkbox-checkmark 并轮询刻度的可见性，我只是想知道是否有更简单的方法来做到这一点？

$(".recaptcha-checkbox-checkmark").click(function() 
    //...Poll for visibility of tick
);

【问题讨论】：

How can I validate google reCAPTCHA v2 using javascript/jQuery?的可能重复

与这里不太一样，问题是如何在提交时进行验证。我正在尝试控制提交按钮的可见性。

【参考方案1】：

另一种解决方案是直接在g-recaptcha div上设置data-callback，像这样

<script type="text/javascript">
  var imNotARobot = function() 
    console.info("Button was clicked");
  ;
</script>

<div class="g-recaptcha" data-callback="imNotARobot" data-sitekey="key"></div>

【讨论】：

此外，如果您在验证时显示“继续”按钮，您可能还希望在验证过期时使用 data-expired-callback 属性隐藏它，因为 recaptcha 验证确实会在几秒钟后过期不活动。

终于有人给出了一个有效的答案！谢谢！在我得到一个之前，我尝试了很多次。很高兴知道您可以直接从占位符触发回调。

谢谢！完美运行。

【参考方案2】：

您可以将 reCAPTCHA 配置为使用 g-recaptcha 标记上的 data-callback 属性或使用显式呈现时通过“callback”参数对成功验证进行回调。

看 https://developers.google.com/recaptcha/docs/display#render_param

使用显式渲染的示例：

var myCallback = function(val)  console.log(val); ;
grecaptcha.render(
   document.getElementsById('my-recaptcha-placeholder'), 
   
     callback: myCallback, 
     sitekey: mySiteKey
   );