ReCaptcha3: Как вызвать execute, когда пользователь выполняет действие? - PullRequest
Новая
       10

ReCaptcha3: Как вызвать execute, когда пользователь выполняет действие?

0 голосов
/ 05 февраля 2020

Мне удалось заставить работать ReCaptcha3, когда включил его так: 

<script src="https://www.google.com/recaptcha/api.js?render=mykey"></script>
<script>
  grecaptcha.ready(function() {
    grecaptcha.execute('mykey', {action: 'homepage'}).then(function(token) {
       document.getElementById("googletoken").value= token;
    });
</script>

Однако в документах я нашел следующее примечание:

Примечание: срок действия токенов reCAPTCHA истекает через две минуты. Если вы защищаете действие с помощью reCAPTCHA, обязательно вызовите execute, когда пользователь выполняет действие.

Поскольку я использую reCAPTCHA в форме контакта, вполне вероятно, что пользователь займет больше, чем две минуты, чтобы что-то написать.

Поэтому я попытался выполнить ключ при отправке (оповещения предназначены только для тестирования): 

<script src="https://www.google.com/recaptcha/api.js?render=mykey"></script>
<script>
  grecaptcha.ready(function() {
      document.getElementById('contactform').addEventListener("submit", function(event) {
        alert('hi');
        grecaptcha.execute('mykey', {action: 'homepage'}).then(function(token) {
           alert('Iam invisible');
           document.getElementById("googletoken").value= token;
        });
      }, false);
  });
</script>

Теперь отображается «Привет», но «Iam» невидимый "не появится Таким образом, я получаю missing-input-response на стороне сервера. Почему then не срабатывает внутри addEventListener?

1 Ответ

1 голос
/ 05 февраля 2020

Проблема в том, что форма отправляется до завершения асинхронного вызова c grecaptcha.execute. Чтобы решить проблему, необходимо отправить ее вручную: 

<script src="https://www.google.com/recaptcha/api.js?render=mykey"></script>
<script>
  grecaptcha.ready(function() {
      document.getElementById('contactform').addEventListener("submit", function(event) {

        event.preventDefault();

        grecaptcha.execute('mykey', {action: 'homepage'}).then(function(token) {

           document.getElementById("googletoken").value= token; 
           document.getElementById('contactform').submit();
        });

      }, false);

  });
</script>
...