jquery - reCAPTCHA session 过期时触发事件

Question

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

div包含 session expired 的 block 消息有类 rc-anchor-expired-msg 。我试过div show使用此类在 session 过期并尝试重置验证码后立即触发事件的事件。但这也不起作用。

是否有回调函数或其他功能可以在 session 过期时重置验证码。

Answer 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>

每次 session 过期时，都会重置 reCAPTCHA。为我解决了错误:无效加载参数警报窗口的问题。

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

在自动渲染 reCAPTCHA(而不是像上面那样显式渲染它)小部件时，您应该能够使用 data-expired-callback 作为标签属性，但回调不适用于当我尝试这样做时。