reCAPTCHA会话到期时触发事件 [英] fire event when reCAPTCHA session expires

问题描述

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

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

有没有回调函数或可以用来在会话期满时重置Recaptcha的东西.

解决方案

在渲染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作为标记属性，但是当我尝试这种方式时，回调对我不起作用. /p>

I am working on google reCAPTCHA. It's working fine but when reCAPTCHA session expires after certain time and user clicks again on checkbox to fill the reCAPTCHA, google shows alert saying Error: invalid load parameters. Nothing works thereafter until user reloads the page.

The div block which contains session expired message has class rc-anchor-expired-msg. I tried div show event using this class to fire an event as soon as the session expires and tried to reset recaptcha. But this is not working either.

Is there a callback function or something using which I could reset recaptcha when session expires.

解决方案

There is an expired-callback parameter you can pass when rendering the reCAPTCHA which you can then have call the grecaptcha.reset() method.

For example:

Put this in the header.

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

Put this after the element that will be used to render the reCAPTCHA.

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

This resets the reCAPTCHA every time the session expires. Got rid of the problem of the Error: invalid load parameters. alert window for me.

In case it needs explaining how it works, when the api is loaded it calls the callback function from the header script tag. This function renders the reCAPTCHA and declares the expired-callback to be the expCallback function which just resets the reCAPTCHA back to its orginal state.

You are supposed to be able to use data-expired-callback as a tag attribute when automatically rendering the reCAPTCHA (as opposed to rendering it explicitly like above) widget but the callback would not work for me when I tried it that way.

这篇关于reCAPTCHA会话到期时触发事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！