Защита PHP формы от спама с помощью invisible reCAPTCHA

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

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

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

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

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

1. Открываем страницу www.google.com/recaptcha/admin (при необходимости выполняем регистрацию и авторизацию на сайте).

2. Заполняем страницу «Регистрация сайта»:

• вводим название ярлыка;
• в разделе «Тип reCAPTCHA» выбираем пункт «reCAPTCHA v2» и в открывшемся списке отмечаем «Невидимый значок reCAPTCHA»;
• добавляем домены, в данном случае «site.ru»;
• устанавливаем флажок «Примите Условия использования reCAPTCHA.»;
• нажимаем кнопку «Отправить».

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

Установка клиентских PHP библиотек

Так как серверная часть у нас будет на PHP, то установим клиентскую PHP библиотеку reCAPTCHA с использованием Composer. Для этого перейдем в корень сайта и введём следующую команду:

composer require google/recaptcha "^1.2"

Кроме этого ещё установим PHPMailer:

composer require phpmailer/phpmailer

Эту библиотеку будем использовать для отправки почты на электронный адрес через SMTP.

После этого у нас в корне сайта появится файл composer.json, содержащий все пакеты от которых зависит работа нашего сайта:

{
  "require": {
      "google/recaptcha": "^1.2",
      "phpmailer/phpmailer": "^6.6"
  }
}

Если вы разрабатываете сайт на локальном компьютере, то на сервер не нужно переносить папку vendor. Необходимо лишь подключиться к серверу по протоколу SSH и в терминале набрать команду:

composer install

Эта команда установит все пакеты, перечисленные в composer.json.

Кроме этого в папке vendor у нас ещё генерируется файл autoload.php. Для того чтобы подключить к проекту эти библиотеки, достаточно подключить только этот файл:

require_once $_SERVER['DOCUMENT_ROOT'] . '/vendor/autoload.php';

Проверка отправки почты по SMTP

Перед тем как переходит к вставке в форму обратной связи невидимой reCAPTCHA, желательно сначала проверить корректность отправки почты по протоколу SMTP.

Для этого, например, в корень сайта достаточно положить php-файл с именем test_mail.php со следующим содержимым:

<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;

require 'vendor/autoload.php';

$mail = new PHPMailer(true);

try {
  // Настройки сервера
  $mail->SMTPDebug = SMTP::DEBUG_SERVER;
  $mail->isSMTP();
  $mail->Host = 'ssl://smtp.yandex.ru';                      // SMTP сервер
  $mail->SMTPAuth = true;
  $mail->Username = 'xxxxxxxx@yandex.ru';                    // SMTP имя пользователя
  $mail->Password = 'xxxxxxxx';                              // SMTP пароль
  $mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS;
  $mail->Port = 465;                                         // TCP порт

  // От кого отправить
  $mail->setFrom('xxxxxxxx@yandex.ru', 'Имя отправителя');

  // Кому отправить
  $mail->addAddress('xxxxxxxx@gmail.com');

  // Контент
  $mail->CharSet = 'utf-8';
  $mail->Encoding = 'base64';
  $mail->isHTML(true);
  $mail->Subject = 'Сообщение с формы обратной связи';
  $mail->Body = 'Это текст HTML-сообщения, у которого <b>эта часть выделена жирным начертанием!</b>';

  $mail->send();
  echo 'Сообщение было отправлено!';
} catch (Exception $e) {
  echo "Сообщение не удалось отправить. Ошибка: {$mail->ErrorInfo}";
}

Здесь в нужных местах необходимо указать свои данные для отправки почты через используемый вами SMTP-сервер. В этом файле приведены настройки Yandex.

После этого этот файл нужно запустить, т.е. в адресной строке набрать соответствующий URL:

После того как вы полностью настроили PHPMailer для отправки писем и увидели, что сообщение было отправлено, можно переходить к следующему шагу.

Подключение reCAPCTHA к форме, работающей без AJAX

Самый простой способ подключить невидимую reCAPTCHA к форме - это привязывать её вызов к кнопке.

Итак, для этого нам необходимо на клиентской стороне:

• подключить скрипт Google reCAPTCHA API;
• добавить к кнопке для отправки формы класс g-recaptcha, и атрибуты data-sitekey и data-callback; в качестве значения атрибута data-sitekey устанавливаем публичный ключ, а в data-callback – имя функции обратного вызова для обработки завершения проверки капчи;
• добавить функцию с именем, которое мы указали в атрибуте data-callback; это функция будет запускаться при нажатии на эту кнопку.

<!-- Подключаем скрипт Google reCAPTCHA API -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
  // Напишем функцию onSubmit
  function onSubmit(token) {
    document.querySelector('#form-1').submit();
  }
</script>

<form id="form-1" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" novalidate>
  ...
  <!-- Добавляем к кнопке класс g-recaptcha и атрибуты data-sitekey и data-callback -->
  <button class="btn btn-primary g-recaptcha" data-sitekey="6LeSClchAAAAAKTjOyWnKVgYVHTKHEScxp8gOSBJ" data-callback="onSubmit">Отправить</button>
</form>

На серверной стороне:

// секретный ключ
define('SECRET_KEY', '6LeSClchAAAAAAGDbQczz20se0A4e-eDkulFzeKC');
// подключим автозагрузчик Composer
require_once $_SERVER['DOCUMENT_ROOT'] . '/vendor/autoload.php';
// проверяем ответ от службы reCAPTCHA
// создаем экземпляр класса ReCaptcha с указанием секретного ключа
$recaptcha = new \ReCaptcha\ReCaptcha(SECRET_KEY);
// указываем, чтобы имя хоста совпадало с site.ru, и вызываем verify()
$resp = $recaptcha->setExpectedHostname('site.ru')
  ->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);
// если проверка не прошла
if (!$resp->isSuccess()) {
  $errors = $resp->getErrorCodes();
  error_log('reCAPTCHA Error: ' . print_r($errors, true));
  // другие действия ...
}

Полный код формы с invisible reCAPTCHA от Google расположен на GitHub: without-ajax.

Вид формы:

Для простоты форма состоит из 2 полей: name и email. Оформление формы обратной связи выполнено посредством Bootstrap 5.

Сообщение об успешной отправке формы:

Сообщение, которое приходит на почту:

Защита от спама 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 (Яндекс.Диск)

Пример 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:

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

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

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

• Интеграция Google reCAPTCHA 2 в AJAX форму обратной связи
• Форма обратной связи с капчей (код в виде изображения)
• Как создать свою капчу для сайта