Відобразити віджет, ви можете:
Найпростіший спосіб відтворення віджета 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 і може бути включений з будь-якої точки сторінки без обмежень.
Розташування візуалізації може бути досягнуто, вказавши вашу функцію зворотного виклику onload і додавши параметри до ресурсу JavaScript. Вкажіть вашу функцію зворотного виклику при завантаженні. Ця функція буде викликана, коли всі залежності будуть завантажені.
<script type=“text/javascript”>
var onloadCallback = function() {
alert(“grecaptcha is ready!”);
};
</script>
Вставте ресурс Javascript, встановивши параметр onload на ім'я вашої функції зворотного виклику onload, а параметр render - на явний.
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer> </script>
| Параметр | Значение | Описание |
| onload | Необов'язково. Ім'я вашої функції зворотного виклику, яка буде виконуватися після того, як завантажуються всі залежності. | |
| render | explicit onload | Необов'язково. Чи потрібно явно відображати віджет. За замовчуванням для onload, який буде відтворювати віджет у першому тезі g-recaptcha, який він знаходить. |
| hl | Необов'язково. Примушує віджет відтворюватись у певній мові. Автоматично визначає мову користувача, якщо він не вказаний. |
| Атрибут тегу g-recaptcha | Параметр grecaptcha.render | Значення | За замовчуванням | Опис |
| data-sitekey | sitekey | Ключ API сайта | ||
| data-theme | theme | dark light | light | Необов'язково. Тема кольору віджета. |
| data-size | size | compact normal | normal | Необов'язково. Розмір віджета. |
| data-tabindex | tabindex | 0 | Необов'язково. Вкладка віджета і виклик. Якщо інші елементи вашої сторінки використовують tabindex, вона повинна бути налаштована на спрощення користувацької навігації. | |
| data-callback | callback | Ім'я функції зворотного виклику, що виконується, коли користувач подає успішну відповідь. Маркер g-recaptcha-response передається до вашого зворотного виклику. | ||
| data-expired-callback | expired-callback | Ім'я функції зворотного виклику, що виконується після закінчення терміну відповіді reCAPTCHA, і користувачеві необхідно повторно перевірити. | ||
| data-error-callback | error-callback | Iм'я функції зворотного виклику, що виконується, коли reCAPTCHA виявляє помилку (як правило, мережеве підключення) і не може продовжуватися до відновлення з'єднання. Якщо ви вкажете тут функцію, ви несете відповідальність за інформування користувача про те, що вони повинні повторити спробу. |
| Метод | Описание |
| grecaptcha.render(container, parameters) | Відображає контейнер як віджет reCAPTCHA і повертає ідентифікатор новоствореного віджета. контейнер Елемент HTML для відображення віджета reCAPTCHA. Вкажіть або ідентифікатор контейнера (рядка), або сам елемент DOM. параметри Об'єкт, що містить параметри як пари ключів = значення, наприклад {“sitekey”: “your_site_key”, “theme”: “light”}. |
| 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>