Невидимая повторная проверка с javascript без отправки формы - PullRequest
Новая
       121

Невидимая повторная проверка с javascript без отправки формы

1 голос
/ 03 мая 2020

Я пытаюсь использовать невидимую re-captcha v2 в форме, отправленной через JS. Каждый пример, который я вижу в Интернете, показывает обычную отправленную форму HTML с указанным действием и методом, но я использую preventDefault() в своей форме, чтобы отправить ее с ajax. Это кажется такой простой вещью, но я искал часы и не могу найти ни одного человека в Интернете, который когда-либо делал это.

HMTL: 

<form id="form-login">
  <!-- ...form fields... -->

  <div
      class="g-recaptcha"
      data-sitekey="<site_key>"
      data-size="invisible"
    ></div>
  <button class="uk-button uk-button-primary" type="submit">Submit</button>
</form>

JS : 

$('#form-login').submit(function(event) {
  event.preventDefault();

  console.log(grecaptcha.getResponse()); // <-- always comes back empty
});

Я вижу, что капча инициализируется, потому что я вижу значок в правом нижнем углу.

Я видел grecaptcha.execute(), но, похоже, это не так что-нибудь для меня.

В консоли нет ошибок.

1 Ответ

1 голос
/ 03 мая 2020

Недавно у меня возникла такая же проблема, как и у вас, создание капчи невидимым создало для меня много проблем, например https://github.com/google/recaptcha/issues/269, которая до сих пор остается проблемой на GitHub.

Я решил ее с помощью динамически генерируемая капча на каждой представленной форме. Вот немного кода, который я использовал. (закомментированный код - это вызов бэкэнда для проверки ответа с помощью API Google).

https://gist.github.com/ANTOSzbk/75ed7003e914162550f61399122a3bd4

Тогда вы просто используете мою функцию следующим образом: 

$('#form-login').submit(async function(event) {
  event.preventDefault();
  const response = await captchaVerification();
  if (response) { } // proper submit code execution
  else { } // on invalid captcha response
});
...