Статья, в которой рассмотрим, как защитить форму обратной связи от спама с помощью invisible reCaptcha от Google.

Что собой представляет invisible reCAPTCHA от Google

Значок невидимой reCAPTCHA
Значок невидимой reCAPTCHA

invisible reCAPTCHA - это капча, которая позволяет осуществлять фоновую валидацию действий пользователей на сайте. В отличие от reCAPTCHA v2 (пример формы с reCAPTCHA 2) она не требует от пользователей того, чтобы они нажимали на флажок (checkbox) "Я не робот". Она вызывается напрямую, т.е. тогда когда пользователь нажимает на существующую кнопку на сайте или программно через вызов JavaScript API.

invisible reCAPTCHA позволяет совершать пользователям на сайте какие-либо действия сразу (без ввода капчи). По умолчанию только самые подозрительные действия пользователей не позволят им пройти дальше. В этом случае invisible reCAPTCHA предложит им решить капчу (т.е. определить действительно ли данную операцию совершает человек, а не робот).

Каптча reCaptcha, которую предстоит решить пользователю
Каптча reCaptcha, которую предстоит решить пользователю

Регистрация домена и получение ключей

  1. Открываем страницу www.google.com/recaptcha/admin (при необходимости выполняем регистрацию и авторизацию на сайте).
  2. Заполняем форму "Регистрация сайта". Указываем название, отмечаем Invisible reCAPTCHA (тип reCAPTCHA), вводим домены (по одному встроке).
    reCaptcha - заполнение регистрационной карточки
    reCaptcha - заполнение регистрационной карточки
  3. Получаем ключи: публичный (для клиента) и секретный (для сервера).

Примеры форм обратной связи с invisible reCAPTCHA

Рассмотрим различные варианты установки капчи invisible reCAPTCHA на сайт (в формы обратной связи). Ознакомиться с примерами можно на GitHub.

Примеры feedback форм с invisible reCAPTCHA на Github

Форму по умолчанию необходимо помещать в корневую директорию сайта (т.е. /feedback/файлы_формы...). Настройка форм осуществляется посредством ввода публичного и секретного ключа, в также настройки почты (phpMailer).

Приведём основные шаги по внедрению невидимой капчи reCAPTCHA от Google в формы обратной связи.

Интеграция invisible reCAPTCHA в форму обратной связи (без AJAX)

Самый простой способ использования виджета невидимой reCAPTCHA на странице - это подключить необходимый JavaScript ресурс и добавить несколько атрибутов к вашей html кнопке.

Рассмотрим этот процесс пошагово:

  1. Добавить на страницу скрипт reCAPTCHA:
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  2. Добавить к кнопке, которая будет использоваться для отправки формы или выполнения другого действия на сайте атрибуты (класс "g-recaptcha", в data-sitekey - публичный ключ сайта, в data-callback - имя JavaScript функции обратного вызова для выполнения действий после завершения проверки капчи):
    <form id="messageForm" method="POST" action="process.php">
      <input type="email" name="email" required="required">
      <textarea name="message"    required="required"></textarea>
      <!-- Кнопка, с подключённым к ней виджетом invisible reCAPTCHA -->
      <button class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit">Отправить</button>
    </form>
    
  3. Добавить на страницу сценарий JavaScript функцию onSubmit:
    <script>
    function onSubmit(token) {
      // отправить форму на сервер
      document.getElementById("messageForm").submit();
    }
    </script>
    

Посмотреть полный код формы с invisible reCAPTCHA от Google можно на GitHub или по ниже приведённой ссылке:

Простая контактная форма с invisible reCAPTCHA (Яндекс.Диск)

Пример простой формы с invisible reCAPTCHA
Пример простой формы с invisible reCAPTCHA

Добавление invisible reCAPTCHA в форму обратной связи работающей через AJAX

Процесс встраивания invisible reCAPTCHA в AJAX форму обратной связи:

  1. Добавить в HTML форму элемент div с атрибутами class="g-recaptcha", data-sitekey="значение публичного ключа", data-callback="onSubmitReCaptcha" и data-size="invisible". onSubmitReCaptcha - это имя функции, которая будет вызвана после окончания успешной проверки пользователя. В данный элемент будет осуществляться рендеринг капчи invisible reCAPTCHA.
    <!-- Форма обратной связи -->
    <form id="messageForm" enctype="multipart/form-data" method="post" novalidate>
      <!-- ... содержимое HTML формы -->
      <!-- invisible reCaptcha -->
      <div id="recaptcha" class="g-recaptcha" data-sitekey="6LdXhhgUAAAAAFUToe9JV6qa19DrI2TEM3GH-l7g" data-callback="onSubmitReCaptcha" data-size="invisible"></div>
      <!-- Кнопка, отправляющая форму по технологии AJAX -->
      <button id="submit" type="submit" class="btn btn-primary pull-right" name="send-message">Отправить сообщение</button>
    </form><!-- Конец формы -->
    
  2. Подключить скрипт reCaptcha.
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    
  3. Вызвать проверку reCaptcha (grecaptcha.execute()) после успешной валидации HTML формы.
    // при отправке формы messageForm на сервер (id="messageForm")
    $('#messageForm').submit(function (event) {
      // отменим стандартную отправку формы на сервер
      event.preventDefault();
      // если форма прошла валидацию, то вызовем invisible reCaptcha
      if (validateForm(this)) {
        grecaptcha.execute();
      }
    });
    
  4. Добавить функцию обратного вызова onSubmitReCaptcha, которая будет запущена, если пользователь успешно прошёл капча тест. Код данной функции, содержит вызов другой функции, которая отправляет форму обратной связи на AJAX.
    function onSubmitReCaptcha(token) {
      var idForm='messageForm';
     sendForm(document.getElementById(idForm),'/feedback/process.php');
    }
    

Посмотреть пример полного кода контактной формы можно на GitHub или посредством следующей ссылки (архив):

Форма обратной связи с защитой invisible reCAPTCHA (Яндекс.Диск)

Пример AJAX формы обратной связи с invisible reCAPTCHA
Пример AJAX формы обратной связи с invisible reCAPTCHA

Пример HTML-формы с invisible reCAPTCHA, отображаемой во всплывающем окне:

HTML-форма в выпадающем окне (Яндекс.Диск)

Несколько invisible reCAPTCHA на одной странице

Для того чтобы разместить несколько invisible reCAPTCHA на странице, их необходимо генерировать вручную.

Инструкция по размещению 2 invisible reCAPTCHA на одной странице:

  1. Подключить скрипт reCAPTCHA с указанием функции (в данном случае onloadReCaptchaInvisible), которая будет вызвана после завершения загрузки api.js. Функцию onloadReCaptchaInvisible будем использовать для программной генерации виджетов и получения их id.
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadReCaptchaInvisible&render=explicit" async defer></script>
    
  2. Добавим в каждую из форм обратной связи контейнер, который будет представлять собой виджет reCaptcha.
    <!-- HTML форма 1 -->
    <form id="messageForm1" method="post">
      <!-- ...  -->
      <div id="recaptcha1"></div>
      <!-- ...  -->
    </form>
    <!-- HTML форма 2 -->
    <form id="messageForm2"  method="post">
      <!-- ...  -->
      <div id="recaptcha2"></div>
      <!-- ...  -->
    </form>
    
  3. Представим каждый контейнер как виджет reCAPTCHA. Получим id созданных виджетов.
    var idCaptcha1, idCaptcha2;
    var onloadReCaptchaInvisible = function() {
      idCaptcha1 = grecaptcha.render('recaptcha1', {
       "sitekey":"значение публичного ключа",
        "callback": "onSubmitReCaptcha",
        "size":"invisible"
      });
      idCaptcha2 = grecaptcha.render('recaptcha2', {
        "sitekey":"значение публичного ключа",
        "callback": "onSubmitReCaptcha",
        "size":"invisible"
      });
    };
    
  4. Использовать ID виджета при проверке reCAPTCHA:
    // выполнить проверку reCAPTCHA, имеющей в качестве ID виджета значение переменной idCaptcha1
    grecaptcha.execute(idCaptcha1);
    // выполнить проверку reCAPTCHA, имеющей в качестве ID виджета значение переменной idCaptcha2
    grecaptcha.execute(idCaptcha2);
    
  5. Применять ID виджета invisible reCAPTCHA при получении ответа:
    // передать в FormData ответ виджета invisible reCAPTCHA, у которого ID равно значению переменной idCaptcha1 (для первой формы)
    formData.append('g-recaptcha-response', grecaptcha.getResponse(idCaptcha1));
    // передать в FormData ответ виджета invisible reCAPTCHA, у которого ID равно значению переменной idCaptcha2 (для второй формы)
    formData.append('g-recaptcha-response', grecaptcha.getResponse(idCaptcha2));
    

Полный код примера, в котором invisible reCAPCTHA используется для защиты нескольких форм:

Две формы invisible reCAPTCHA на странице (архив на Яндекс.Диск)

Пример размещения двух invisible reCAPTCHA на одной странице
Пример размещения двух invisible reCAPTCHA на одной странице

Настройка виджета invisible reCAPTCHA

Дополнительные (необязательные) параметры капчи invisible reCAPTCHA:

  • data-badge (badge) - местоположение значка reCAPTCHA (по умолчанию: bottomright). В качестве значения можно указывать ещё: bottomleft (внизу слева) и inline (позволяет управлять положением с помощью CSS).
  • data-type (type) - тип капчи (по умолчанию: image). Изменить тип капчи при необходимости можно на audio.
  • data-tabindex (tabindex) - для страниц, в которых для навигации по элементам дополнительно используется клавиша tab. Данный параметр позволяет установить порядок элемента, его tabindex (по умолчанию: 0).

Внимание: Использовать атрибуты с префиксом data- необходимо только в HTML-коде. В скриптах задавать параметры необходимо без префикса, т.е. вместо data-badge указывать badge и т.д.


Похожие темы, которые вас могут заинтересовать: