Событие пожара, когда истекает сессия reCAPTCHA

Я работаю над google reCAPTCHA. Он работает нормально, но когда сеанс reCAPTCHA истекает через определенное время, и пользователь снова нажимает на флажок, чтобы заполнить reCAPTCHA, Google показывает предупреждение, говорящее Error: invalid load parameters. После этого ничего не работает, пока пользователь не перезагрузит страницу.

Блок div, содержащий сообщение session expired, имеет класс rc-anchor-expired-msg. Я попробовал событие div show, используя этот класс, чтобы запустить событие, как только закончится сеанс, и попытался выполнить reset recaptcha. Но это тоже не работает.

Есть ли функция обратного вызова или что-то, с помощью которой я мог бы reset 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 из тега заголовка script. Эта функция отображает reCAPTCHA и объявляет expired-callback функцией expCallback, которая просто возвращает reCAPTCHA обратно в исходное состояние.

Предполагается, что вы можете использовать data-expired-callback в качестве атрибута тега при автоматической рендеринге виджета reCAPTCHA (в отличие от визуализации явно указанного выше), но обратный вызов не будет работать для меня, когда я попробую его таким образом.