На главную

Рецепт использования Google reCAPTCHA для защиты форм от спама

Один из вариантов защиты в виде чекбокса от Google reCAPTCHA

В примере используется Google reCAPTCHA v2.

Ниже в коде будет приведен пример использования чекбоса. Также есть вариант "невидимой" проверки.

Ссылка на получение api-ключа для использования сервиса Google reCAPTCHA.

Итоговый вариант с кодом.

google recaptcha чекбокс
Визуально решение с чекбоксом выглядит так

Допустим, на сайте есть стандартная связка для отправки заявок с сайта на почту и / или в CRM:

  1. HTML-форма
  2. (Не обязательно) какой-то JS скрипт с кастомной валдиацией, который отправляет данные формы на обработчик
  3. Файл php-обработчика, который тоже каким-то образом проверяет пришедние с формы данные и далее записывает их в БД / CRM / Google-доки / CRM или любой другой сервис.

В данном примере для простоты пропущу второй шаг. Но его наличе ничего принципиально не поменяет.

<!-- в action указан адрес php-обработчика  -->
<form 
  class="form"
  id="feedback-form" 
  method="POST" 
  action="https://yoursitename.ru/feedbackFormHandler.php"
>
  <div class="form__item">
      <input pattern="[A-Za-zА-Яа-яЁё ]{2,}" required name="name" type="text"
          placeholder="Ваше имя*"
          oninvalid="setCustomValidity('Пожалуйста, вводите только буквы.')">
  </div>

  <div class="form__item">
      <textarea name="text" required cols="40" rows="8" placeholder="Ваше сообщение"></textarea>
  </div>
  
   <div class="form__item">
      <button class="button" type="submit">Отправить</button>
    </div>
</div>

Конечно, на стороне php-обработчика нужно делать проверки на наличие запрещенных символов и т.д. Но не помешала бы и защита на фронтенде от ботов, которая бы не позволяла им в принципе сабмитить форму.

Подключаем Google reCaptcha

Прежде всего нужно будет получить уникальный персональный ключ (SITE_KEY) для использования сервисом. Сделать это можно в админской панели.

Стратегия будет следующей:

  1. Подчключаем скрипт reCaptcha на страницу
  2. "Прячем" настоящее значение атрибута action в дата атрибут, а на его место ставим заглушку.
  3. Выставляем кнопке disabled-состояние, чтобы форму нельзя было отправить без проверки
  4. Добавляем в разметку формы код для инициализации чекбокса
  5. Пара строчек js-скрипта, который отработает при успешной проверке
<!-- Подчключаем скрипт reCaptcha на страницу  -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<!--  "Прячем" настоящее значение атрибута `action` в дата атрибут, а на его место ставим заглушку.  -->
<form 
  data-action="https://yoursitename.ru/feedbackFormHandler.php"
  action="https://yoursitename.ru/stub"
  class="form"
  id="feedback-form" 
  method="POST" 
>
  <div class="form__item">
      <input pattern="[A-Za-zА-Яа-яЁё ]{2,}" required name="name" type="text"
          placeholder="Ваше имя*"
          oninvalid="setCustomValidity('Пожалуйста, вводите только буквы.')">
  </div>

  <div class="form__item">
      <textarea name="text" required cols="40" rows="8" placeholder="Ваше сообщение"></textarea>
  </div>
  <div class="form__item">
      <!-- 
        Добавляем в разметку формы код для инициализации чекбокса
        здесь появится чекбокс
        data-sitekey — ваш ключ для использования сервиса
        data-callback — скрипт, который будет выполнен при удачной прохождении проверки
        он будет описан ниже
      -->
      <div 
        class="g-recaptcha" 
        data-sitekey="SITE_KEY"
        data-callback="validationCallback">
      </div>
  </div>
  <!-- Выставляем кнопке disabled, чтобы форму нельзя было отправить без проверки -->
   <div class="form__item">
      <button disabled class="button" type="submit">Отправить</button>
    </div>
</div>
<script>
var form = document.querySelector('#feedback-form');

function validationCallback() {
  // подменяем атрибут action на тот, что в дата-атрибуте
  form.action = form.dataset.action;
  // убираем disabled-атрибут с кнопки отправки
  form.querySelector('button[type="submit"]').disabled = false;
}
</script>

Мониторим статистику

Мониторить статистику проверок по вашим сайтом можно в админской панели.

статистика проверок в админке google recaptcha

Комментарии