Как проверить невидимую Recaptcha V2 на JS?

Question

Проверяю recaptcha v2 на стороне js с помощью следующего кода:

grecaptcha.getResponse().length == 0

Но с невидимой этот код не работает. Каким образом можно проверить невидимую recaptcha перед отправкой формы?

Answer 1

Если я правильно понял задачу то ответ находится в документации в последнем скрипте на странице. Проверка делается через grecaptcha.execute(). Код проверил на своем домене, зарегестрировав v2 invisible перед отправкой формы если она заполнена происходит валидация. Понятное дело что скрипт модифицируется под конкретную задачу, способом навешивания обработчика и самой функцией validate

<html>
  <head>
  <script>
    function onSubmit(token) {
      alert('thanks ' + document.getElementById('field').value);
    }

    function validate(event) {
      event.preventDefault();
      if (!document.getElementById('field').value) {
        alert("You must add text to the required field");
      } else {
        grecaptcha.execute();
      }
    }

    function onload() {
      var element = document.getElementById('submit');
      element.onclick = validate;
    }
  </script>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form>
      Name: (required) <input id="field" name="field">
      <div id="recaptcha" class="g-recaptcha"
          data-sitekey="_your_site_key_"
          data-callback="onSubmit"
          data-size="invisible"></div>
      <button id="submit">submit</button>
    </form>
    <script>onload();</script>
  </body>
</html>

БЛОГ НА HUSL

Как проверить невидимую Recaptcha V2 на JS?

Ответы (1 шт):