Защита форм на сайте от ботов с помощью reCAPTCHA v2 Invisible

PHP

Одним из эффективных решений для защиты форм на сайте от ботов является Google reCAPTCHA.

Что такое reCAPTCHA v2 Invisible?

reCAPTCHA v2 Invisible — это усовершенствованная версия reCAPTCHA, которая, в большинстве случаев, не требует от пользователя никаких действий (например, выбора картинок). Google автоматически анализирует поведение пользователя и, если он не вызывает подозрений, пропускает его. Если же система сомневается, пользователю может быть предложено стандартное задание reCAPTCHA (выбор картинок).

Преимущества reCAPTCHA v2 Invisible:

  • Удобство для пользователя: Минимальное взаимодействие пользователя.
  • Эффективность: Хорошая защита от ботов.
  • Гибкость: Настраивается для разных типов форм.
  • Бесплатность: Google предоставляет reCAPTCHA бесплатно для большинства сайтов.

Реализация reCAPTCHA v2 Invisible на вашем сайте:

Представленный код демонстрирует базовую реализацию reCAPTCHA v2 Invisible. Разберем его подробно:

1. Подключение скрипта reCAPTCHA:

<div class="g-recaptcha" data-sitekey="" data-badge="inline" data-size="invisible" data-callback="setResponse"></div>



<div class="g-recaptcha" data-sitekey="YOUR_KEY" data-badge="inline" data-size="invisible" data-callback="setResponse"></div>
  • class="g-recaptcha": Этот класс сообщает Google, что это контейнер для reCAPTCHA.
  • data-sitekey="YOUR_KEY": Это ваш уникальный ключ сайта (site key). Замените  на ваш собственный ключ сайта. Вы получите его, зарегистрировав свой сайт в Google reCAPTCHA (https://www.google.com/recaptcha/admin/create).
  • data-badge="inline": Указывает, что значок reCAPTCHA будет отображаться внизу справа (по умолчанию). Другие варианты: bottomright, bottomleft.
  • data-size="invisible": Определяет, что reCAPTCHA будет невидимым.
  • data-callback="setResponse": Указывает функцию JavaScript, которая будет вызываться после успешной проверки reCAPTCHA. Эту функцию необходимо создать.

3. PHP-код для проверки ответа:


 $secretKey  = "YOUR_KEY";
 if(isset($_POST['captcha-response']) && !empty($_POST['captcha-response'])){
   // Get verify response data
   $verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secretKey.'&response='.$_POST['captcha-response']);
   $responseData = json_decode($verifyResponse);
   if($responseData->success){
       }else{
         $statusMsg = 'Robot verification failed, please try again.';
     }
 }else{
     $statusMsg = 'Robot verification failed, please try again.';
 }

Этот PHP-код выполняет следующие шаги:

  • $secretKey = "YOUR_KEY";: Это ваш секретный ключ (secret key) reCAPTCHA. Замените YOUR_KEY на ваш собственный секретный ключ. Его также можно найти в настройках reCAPTCHA.
  • if(isset($_POST['captcha-response']) && !empty($_POST['captcha-response'])): Проверяет, был ли отправлен ответ reCAPTCHA с формы. $_POST['captcha-response'] содержит токен, который reCAPTCHA генерирует после проверки пользователя.
  • $verifyResponse = file_get_contents(...): Отправляет запрос на сервер Google для проверки токена. Запрос включает секретный ключ и ответ пользователя.
  • $responseData = json_decode($verifyResponse): Декодирует ответ от Google в формат JSON.
  • if($responseData->success): Проверяет, была ли проверка успешной. Если да, значит пользователь не является ботом.
  • else: Если проверка не удалась, устанавливается сообщение об ошибке.

Как это работает:

  1. Пользователь заполняет форму.
  2. JavaScript код инициирует reCAPTCHA при отправке формы (обычно через вызов функции grecaptcha.execute(), которую вам нужно будет реализовать в вашей JavaScript логике).
  3. reCAPTCHA анализирует поведение пользователя. Если пользователь выглядит как человек, reCAPTCHA автоматически генерирует токен.
  4. Токен отправляется вместе с данными формы на сервер.
  5. PHP-код получает токен ($_POST['captcha-response']) и отправляет его на сервер Google для проверки.
  6. Google подтверждает, является ли пользователь человеком.
  7. В зависимости от результата, выполняется обработка формы (данные отправляются или отображается сообщение об ошибке).

Необходимые шаги для реализации:

  1. Регистрация в Google reCAPTCHA: Зарегистрируйтесь в Google reCAPTCHA (https://www.google.com/recaptcha/admin/create). Получите ключи сайта (site key) и секретный ключ (secret key).
  2. HTML-код (разметка формы): Добавьте HTML-код, представленный выше, в вашу форму. Убедитесь, что data-sitekey соответствует вашему ключу сайта.
  3. JavaScript код (инициализация reCAPTCHA и обработка ответа): Добавьте JavaScript код для инициализации reCAPTCHA и отправки формы после успешной проверки. Это включает в себя:Функцию onloadCallback, если вы используете параметр onload в скрипте.
    Функцию setResponse, которая будет вызываться после успешной проверки reCAPTCHA и будет содержать логику отправки формы.
    Использование grecaptcha.execute(), когда пользователь отправляет форму, чтобы начать процесс проверки. Этот вызов обычно привязывается к событию onsubmit вашей формы.
  4. PHP-код (проверка ответа): Добавьте PHP-код, представленный выше, для проверки ответа reCAPTCHA на вашем сервере. Замените secretKey на ваш секретный ключ.
  5. Обработка результатов: Обработайте результаты проверки в вашем PHP-коде. Если проверка успешна, обработайте данные формы. Если проверка не удалась, отобразите сообщение об ошибке пользователю.

Пример JavaScript кода (базовый):

var onloadCallback = function() {
  grecaptcha.render('g-recaptcha', {  // 'g-recaptcha' - это id вашего контейнера
    'sitekey' : 'YOUR_SITE_KEY',   // Замените на ваш site key
    'badge': 'inline',
    'size': 'invisible',
    'callback' : function(response) {
       document.getElementById("form").submit();
    }
  });
};
function submitForm() {
  grecaptcha.execute(); 
}

  <form id="form" action="process_form.php" method="POST" onsubmit="event.preventDefault(); submitForm();">
    <!-- Ваши поля формы -->
    <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-badge="inline" data-size="invisible" data-callback="setResponse"></div>
    <button type="submit">Отправить</button>
  </form>

Заключение:

Использование reCAPTCHA v2 Invisible — это простой и эффективный способ защиты форм на вашем сайте от ботов. Следуя инструкциям, вы сможете легко интегрировать эту технологию и повысить безопасность вашего сайта. Не забудьте правильно настроить JavaScript и PHP код, заменив ключи на свои собственные.

Разработка сайтов на Wordpress