reCAPTCHA 会话到期时触发事件答案

【问题标题】：fire event when reCAPTCHA session expiresreCAPTCHA 会话到期时触发事件
【发布时间】：2015-04-28 14:57:28
【问题描述】：

我正在研究 google reCAPTCHA。它工作正常，但是当 reCAPTCHA 会话在特定时间后过期并且用户再次单击复选框以填充 reCAPTCHA 时，谷歌会显示警报说 Error: invalid load parameters. 在用户重新加载页面之前没有任何工作。

包含session expired 消息的div 块具有类rc-anchor-expired-msg。我尝试div show 事件使用此类在会话到期后立即触发事件并尝试重置recaptcha。但这也不起作用。

是否有一个回调函数或其他东西可以在会话到期时重置 recaptcha。

【问题讨论】：

我想在复选框被选中时触发。与这个问题类似，基本上我们如何为 Google 的 reCaptcha 2 的操作添加事件处理程序？

标签： jquery recaptcha

【解决方案1】：

在渲染 reCAPTCHA 时可以传递一个过期回调参数，然后可以调用 grecaptcha.reset() 方法。

例如：

把它放在标题中。

<script>
   var callback = function() {
      grecaptcha.render('id-of-render-element', {
         'sitekey': 'your-site-key',
         'expired-callback': expCallback
       });
   };
   var expCallback = function() {
      grecaptcha.reset();
   };
</script>

将其放在将用于呈现 reCAPTCHA 的元素之后。

<div id="id-of-render-element"></div>
<script src="https://www.google.com/recaptcha/api.js?onload=callback&render=explicit" async defer></script>

这会在每次会话到期时重置 reCAPTCHA。为我解决了Error: invalid load parameters. 警报窗口的问题。

如果需要解释它是如何工作的，当加载 api 时，它会从头脚本标签中调用 callback 函数。此函数呈现 reCAPTCHA 并将 expired-callback 声明为 expCallback 函数，该函数只是将 reCAPTCHA 重置回其原始状态。

在自动渲染 reCAPTCHA（而不是像上面那样显式渲染）小部件时，您应该能够使用 data-expired-callback 作为标签属性，但是当我尝试这种方式时，回调对我不起作用。

【讨论】：

【解决方案2】：

太空人的答案是正确的。如果您想直接从您的 html 标记中执行此操作，则只需添加带有回调函数值的 data-expired-callback 属性，如下所示：

<div class="g-recaptcha" data-sitekey="XXXX" data-expired-callback="handleCaptchaExpired" data-callback="validateCaptcha"></div>

【讨论】：