reCAPTCHA v2

На этой странице объясняется, как отображать и настраивать виджет reCAPTCHA v2 на вашей веб-странице.

Чтобы отобразить виджет, вы можете:

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

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

Автоматически отображать виджет reCAPTCHA

Самый простой способ отобразить виджет reCAPTCHA на вашей странице — включить необходимый ресурс JavaScript и тег g-recaptcha . Тег g-recaptcha представляет собой элемент DIV с именем класса g-recaptcha и ключом вашего сайта в атрибуте data-sitekey :

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="your_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

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

Явное отображение виджета reCAPTCHA

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

  1. Укажите функцию обратного вызова onload . Эта функция будет вызвана после загрузки всех зависимостей.

    <script type="text/javascript">
  var onloadCallback = function() {
    alert("grecaptcha is ready!");
  };
</script>

  2. Вставьте ресурс JavaScript, задав для параметра onload имя функции обратного вызова onload, а для параметра render — explicit .

    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
    async defer>
</script>

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

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

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

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

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

атрибут тега g-recaptcha параметр grecaptcha.render Ценить По умолчанию Описание
data-sitekey sitekey Ваш ключ сайта.
data-theme theme dark light light Необязательный. Цветовая тема виджета.
data-size size compact normal normal Необязательный. Размер виджета.
data-tabindex tabindex 0 Необязательный. Tabindex виджета и задачи. Если другие элементы на вашей странице используют tabindex, его следует установить, чтобы упростить навигацию пользователя.
data-callback callback Необязательный. Имя вашей функции обратного вызова, выполняемой, когда пользователь отправляет успешный ответ. Токен g-recaptcha-response передается вашему обратному вызову.
data-expired-callback expired-callback Необязательный. Имя вашей функции обратного вызова, выполняемой по истечении срока действия ответа reCAPTCHA и необходимости повторной проверки пользователя.
data-error-callback error-callback Необязательный. Имя вашей функции обратного вызова, которая выполняется, когда reCAPTCHA обнаруживает ошибку (обычно при подключении к сети) и не может продолжаться до тех пор, пока подключение не будет восстановлено. Если вы укажете здесь функцию, вы несете ответственность за информирование пользователя о необходимости повторной попытки.

JavaScript API

Метод Описание
grecaptcha. render (
контейнер,
параметры
)		 Отображает контейнер как виджет reCAPTCHA и возвращает идентификатор вновь созданного виджета.
контейнер
HTML-элемент для отображения виджета reCAPTCHA. Укажите либо идентификатор контейнера (строку), либо сам элемент DOM.
параметры
Объект, содержащий параметры в виде пар ключ=значение, например, {"sitekey": "your_site_key", "theme": "light"}. См. параметры grecaptcha.render .
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 type="text/javascript">
      var onloadCallback = function() {
        grecaptcha.render('html_element', {
          'sitekey' : 'your_site_key'
        });
      };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <div id="html_element"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

Явный рендеринг для нескольких виджетов

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render for multiple widgets</title>
    <script type="text/javascript">
      var verifyCallback = function(response) {
        alert(response);
      };
      var widgetId1;
      var widgetId2;
      var onloadCallback = function() {
        // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
        // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
        widgetId1 = grecaptcha.render('example1', {
          'sitekey' : 'your_site_key',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.render(document.getElementById('example2'), {
          'sitekey' : 'your_site_key'
        });
        grecaptcha.render('example3', {
          'sitekey' : 'your_site_key',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };
    </script>
  </head>
  <body>
    <!-- The g-recaptcha-response string displays in an alert message upon submit. -->
    <form action="javascript:alert(grecaptcha.getResponse(widgetId1));">
      <div id="example1"></div>
      <br>
      <input type="submit" value="getResponse">
    </form>
    <br>
    <!-- Resets reCAPTCHA widgetId2 upon submit. -->
    <form action="javascript:grecaptcha.reset(widgetId2);">
      <div id="example2"></div>
      <br>
      <input type="submit" value="reset">
    </form>
    <br>
    <!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. -->
    <form action="?" method="POST">
      <div id="example3"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>