reCAPTCHA v2, 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

Отложить рендеринг можно, указав функцию обратного вызова onload и добавив параметры в ресурс 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 из JavaScript API .

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

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

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

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

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

JavaScript API

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

Примеры

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

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