Использование Recaptcha с существующим обработчиком onsubmit в форме - PullRequest
Новая
       40

Использование Recaptcha с существующим обработчиком onsubmit в форме

0 голосов
/ 27 июня 2019

Я пытаюсь интегрировать Google reCaptcha v2, невидимый на существующей странице, где обработчик отправки формы уже имеет прикрепленную функцию, которая выполняет проверку на стороне клиента.Если эта функция возвращает true, форма будет отправлена ​​и перенаправлена ​​на другую страницу.

Моя существующая реализация вынуждает валидатор recaptcha появляться, если он определяет, что вы бот, но сразу после того, как форма все еще отправляетуспешно и перенаправляет на следующую страницу.

Ожидаемый результат: если проверка на стороне клиента пройдет, он должен выполнить recaptcha и отобразить средство проверки recaptcha, если его эвристика считает вас ботом AND запретить отправку формы, пока вы не передадите ее валидатор.

Для справки я тестирую recaptcha с помощью этого метода: https://stackoverflow.com/a/52036368/2684075

Вот реализация 

<form 
  class="elq-form"
  onsubmit="return handleFormSubmit(this)"
  ...
>
...
</form>

...

<div 
  class="g-recaptcha" 
  data-sitekey="MY_SITEKEY"
  data-callback="recaptchaOnSubmit"
  data-size="invisible"
>
</div>

<script src="https://www.google.com/recaptcha/api.js" async="" defer=""></script>

<script>
    function recaptchaOnSubmit() {
      console.log('recaptcha success');
    }

    (function() {
        var form = document.querySelector('.elq-form');
        var originalSubmit = form.onsubmit;
        form.onsubmit = null;

        form.onsubmit = function() {
          var isValid = originalSubmit.call(form);

          if (isValid) {
            window.grecaptcha.execute();
            console.log('grecaptcha executed')
          }

          return isValid;
        }

    })()
</script>

1 Ответ

0 голосов
/ 27 июня 2019

Можете ли вы опубликовать содержимое функции handleFormSubmit ()?

Я бы посоветовал использовать jQuery для обработки вашего мероприятия, так как кажется, что вы пишете поверх существующего проекта?

Невидимая версия reCAPTCHA - это версия 3, верно? Мне интересно, вы показываете версию 2, если reCAPTCHA считает вас ботом через версию 3? 

$('.elq-form').submit(function () {
   // Determine if the reCAPTCHA is successful, ie, use a backend PHP script to validate
   if (response == true) {
      // return true from the form, therefore, it will proceed
      return true;
   }
   else {
      // reCAPTCHA came back as invalid, therefore do not continue.
      // We can display an error (paragraph) or anything you like
      return false;
   }
});

Могу ли я предложить https://developers.google.com/recaptcha/docs/v3, если вы еще не проверили это? Так как он предоставляет пример для JS на стороне клиента для встраивания.

Надеюсь, это поможет,

...