Эта страница переведена с помощью Cloud Translation API.

Невидимая 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" и программного вызова выполнения.

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

<div class="g-recaptcha"
      data-sitekey="_your_site_key_"
      data-callback="onSubmit"
      data-size="invisible">
</div>

Вызовите grecaptcha.execute из метода JavaScript.
```
grecaptcha.execute();
```
Когда ваш обратный вызов будет выполнен, вы можете вызвать метод grecaptcha.render из API JavaScript .
Функция обратного вызова при загрузке должна быть определена до загрузки API reCAPTCHA. Чтобы убедиться в отсутствии условий гонки:
- сначала заказывайте свои скрипты с обратным вызовом, а потом reCAPTCHA
- используйте параметры `async` и `defer` в тегах `script`

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

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

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

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

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

JavaScript API

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