(Б-11) Портал "Відкриті дані" : Налаштування засобу розрізнення користувачів (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. Вкажіть вашу функцію зворотного виклику при завантаженні. Ця функція буде викликана, коли всі залежності будуть завантажені.

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

Параметри JavaScript (api.js)

Параметр	Значение	Описание
onload		Необов'язково. Ім'я вашої функції зворотного виклику, яка буде виконуватися після того, як завантажуються всі залежності.
render	explicit onload	Необов'язково. Чи потрібно явно відображати віджет. За замовчуванням для onload, який буде відтворювати віджет у першому тезі g-recaptcha, який він знаходить.
hl		Необов'язково. Примушує віджет відтворюватись у певній мові. Автоматично визначає мову користувача, якщо він не вказаний.

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

Атрибут тегу 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 виявляє помилку (як правило, мережеве підключення) і не може продовжуватися до відновлення з'єднання. Якщо ви вкажете тут функцію, ви несете відповідальність за інформування користувача про те, що вони повинні повторити спробу.

JavaScript API

Метод	Описание
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>