На этой странице объясняется, как отображать и настраивать виджет reCAPTCHA v2 на вашей веб-странице.
Чтобы отобразить виджет, вы можете:
См. «Конфигурации» , чтобы узнать, как настроить виджет. Например, вы можете указать язык или тему виджета.
См. раздел «Проверка ответа пользователя» , чтобы проверить, успешно ли пользователь решил CAPTCHA.
Автоматически отображать виджет reCAPTCHA
Самый простой способ отобразить виджет reCAPTCHA на вашей странице — включить необходимый ресурс JavaScript и тег g-recaptcha . Тег g-recaptcha представляет собой элемент DIV с именем класса g-recaptcha и ключом вашего сайта в атрибуте data-sitekey :
reCAPTCHA demo: Simple page
Скрипт должен загружаться по протоколу HTTPS и может быть включен из любой точки страницы без ограничений.
Явное отображение виджета reCAPTCHA
Отсрочку рендеринга можно выполнить, указав функцию обратного вызова при загрузке и добавив параметры в ресурс JavaScript.
Укажите функцию обратного вызова
onload. Эта функция будет вызвана после загрузки всех зависимостей.Вставьте ресурс JavaScript, задав для параметра
onloadимя функции обратного вызова onload, а для параметраrender—explicit.Когда ваш обратный вызов будет выполнен, вы можете вызвать метод
grecaptcha.renderиз API JavaScript .
Конфигурация
Параметры ресурса JavaScript (api.js)
| Параметр | Ценить | Описание |
|---|---|---|
| загружать | Необязательный. Имя вашей функции обратного вызова, которая будет выполнена после загрузки всех зависимостей. | |
| оказывать | явный загружать | Необязательный. Следует ли отображать виджет явно. По умолчанию используется onload, при котором виджет будет отображаться в первом найденном теге g-recaptcha . |
| гл | См. коды языков | Необязательный. Заставляет виджет отображаться на определенном языке. Автоматически определяет язык пользователя, если он не указан. |
Атрибуты тега g-recaptcha и параметры grecaptcha.render
| атрибут тега g-recaptcha | параметр grecaptcha.render | Ценить | По умолчанию | Описание |
|---|---|---|---|---|
| ключ сайта данных | ключ сайта | Ваш ключ сайта. | ||
| тема данных | тема | темный свет | свет | Необязательный. Цветовая тема виджета. |
| размер данных | размер | компактный нормальный | нормальный | Необязательный. Размер виджета. |
| данные-табиндекс | табиндекс | 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 Необязательный идентификатор виджета, по умолчанию используется первый созданный виджет, если он не указан. |
Примеры
Явный рендеринг после обратного вызова при загрузке
reCAPTCHA demo: Explicit render after an onload callback
Явный рендеринг для нескольких виджетов
reCAPTCHA demo: Explicit render for multiple widgets