Невидимая reCAPTCHA

На этой странице объясняется, как включить и настроить невидимую reCAPTCHA на вашей веб-странице.

Чтобы вызвать невидимую reCAPTCHA, вы можете:

См. «Конфигурации» , чтобы узнать, как настроить невидимую reCAPTCHA. Например, вы можете указать язык или расположение значка.

См. раздел «Проверка ответа пользователя» , чтобы проверить, успешно ли пользователь решил CAPTCHA.

Автоматически привязывать вызов к кнопке

Самый простой способ использовать невидимый виджет reCAPTCHA на вашей странице — включить необходимый ресурс JavaScript и добавить несколько атрибутов к вашей html-кнопке. Необходимыми атрибутами являются имя класса « g-recaptcha », ключ вашего сайта в атрибуте data-sitekey и имя обратного вызова JavaScript для обработки завершения ввода капчи в атрибуте data-callback .

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>
  </head>
  <body>
    <form id="demo-form" action="?" method="POST">
      <button class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit">Submit</button>
      <br/>
    </form>
  </body>
</html>

Скрипт должен загружаться по протоколу HTTPS и может быть включен из любой точки страницы без ограничений.

Программно привяжите вызов к кнопке или вызовите вызов.

Отложить привязку можно, указав функцию обратного вызова при загрузке и добавив параметры в ресурс JavaScript. Это работает так же, как обычный вызов reCAPTCHA.

Программно вызвать вызов.

Программный вызов проверки reCAPTCHA может быть достигнут путем отображения запроса в элементе div с атрибутом data-size="invisible" и программного вызова выполнения.

  1. Создайте div с data-size="invisible" .

    <div class="g-recaptcha"
          data-sitekey="_your_site_key_"
          data-callback="onSubmit"
          data-size="invisible">
    </div>
    
  2. Вызовите grecaptcha.execute из метода JavaScript.

    grecaptcha.execute();
    

    Когда ваш обратный вызов будет выполнен, вы можете вызвать метод grecaptcha.render из API JavaScript .

Конфигурация

Параметры ресурса JavaScript (api.js)

Параметр Ценить Описание
в процессе Необязательный. Имя вашей функции обратного вызова, которая будет выполнена после загрузки всех зависимостей.
оказывать явный
в процессе
Необязательный. Следует ли отображать виджет явно. По умолчанию используется onload, при котором виджет будет отображаться в первом найденном теге g-recaptcha .
гл См. коды языков Необязательный. Заставляет виджет отображаться на определенном языке. Автоматически определяет язык пользователя, если он не указан.

Атрибуты тега g-recaptcha и параметры grecaptcha.render

атрибут тега g-recaptcha параметр grecaptcha.render Ценить По умолчанию Описание
ключ сайта данных ключ сайта Ваш ключ сайта.
бейдж данных значок нижний правый нижний левый встроенный Нижний правый Необязательный. Измените положение значка reCAPTCHA. «inline» позволяет позиционировать его с помощью CSS.
размер данных размер невидимый Необязательный. Используется для создания невидимого виджета, привязанного к элементу div и выполняемого программно.
данные-табиндекс табиндекс 0 Необязательный. Табиндекс задачи. Если другие элементы на вашей странице используют tabindex, его следует установить, чтобы облегчить навигацию пользователя.
обратный вызов данных перезвонить Необязательный. Имя вашей функции обратного вызова, выполняемой, когда пользователь отправляет успешный ответ. Токен g-recaptcha-response передается вашему обратному вызову.
обратный вызов с истекшим сроком действия данных обратный вызов с истекшим сроком действия Необязательный. Имя вашей функции обратного вызова, выполняемой по истечении срока действия ответа reCAPTCHA и необходимости повторной проверки пользователя.
обратный вызов-ошибка данных обратный вызов ошибки Необязательный. Имя вашей функции обратного вызова, которая выполняется, когда reCAPTCHA обнаруживает ошибку (обычно при подключении к сети) и не может продолжаться до тех пор, пока подключение не будет восстановлено. Если вы укажете здесь функцию, вы несете ответственность за информирование пользователя о необходимости повторной попытки.
изолированный ЛОЖЬ Необязательный. Чтобы владельцы плагинов не мешали существующим установкам reCAPTCHA на странице. Если это правда, этот экземпляр reCAPTCHA будет частью отдельного пространства идентификаторов.

JavaScript API

Метод Описание
грекапча. оказывать (
контейнер,
параметры,
наследовать
)
Отображает контейнер как виджет reCAPTCHA и возвращает идентификатор вновь созданного виджета.
контейнер
HTML-элемент для отображения виджета reCAPTCHA. Укажите либо идентификатор контейнера (строку), либо сам элемент DOM.
параметры
Объект, содержащий параметры в виде пар ключ=значение, например {"sitekey": "your_site_key", "theme": "light"}. См. параметры grecaptcha.render .
наследовать
Используйте существующие атрибуты data-* элемента, если соответствующий параметр не указан. Параметры будут иметь приоритет над атрибутами.
грекапча. выполнять (
opt_widget_id
)
Программно вызвать проверку reCAPTCHA. Используется, если невидимая reCAPTCHA находится на элементе div, а не на кнопке.
opt_widget_id
Необязательный идентификатор виджета, по умолчанию используется первый созданный виджет, если он не указан.
грекапча. перезагрузить (
opt_widget_id
)
Сбрасывает виджет reCAPTCHA.
opt_widget_id
Необязательный идентификатор виджета, по умолчанию используется первый созданный виджет, если он не указан.
грекапча. получитьОтвет (
opt_widget_id
)
Получает ответ для виджета reCAPTCHA.
opt_widget_id
Необязательный идентификатор виджета, по умолчанию используется первый созданный виджет, если он не указан.

Примеры

Явный рендеринг после обратного вызова при загрузке

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
    <script>
        var onSubmit = function(token) {
          console.log('success!');
        };

        var onloadCallback = function() {
          grecaptcha.render('submit', {
            'sitekey' : 'your_site_key',
            'callback' : onSubmit
          });
        };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <input id="submit" type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

Вызов невидимого запроса reCAPTCHA после проверки на стороне клиента.

<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>