Статья, в которой рассмотрим, как подключить recaptcha к форме обратной связи, работающей по технологии ajax.


reCAPTCHA - это бесплатная служба google, которая позволяет защитить ваш сайт от спама.

Сайт Google reCAPTCHA
Сайт Google reCAPTCHA

Процесс установки google recaptcha v2 состоит из 3 шагов:

  1. Получить API-ключи (site key и secret) для Вашего сайта;
  2. Подключить виджет гугл капчи к HTML странице, и обеспечить посредством технологии AJAX передачу его ответа сервер;
  3. Добавить в серверный сценарий php проверку ответа google recaptcha.

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

Работа с google recaptcha 2 начинается с регистрации сайта на https://www.google.com/recaptcha и получения пары ключей.

Более детально данный процесс можно представить с помощью следующих этапов:

  1. Открытия страницы https://www.google.com/recaptcha.
  2. Нажатия на кнопку "Get reCAPTCHA" (получить рекапчу). Если Вы не имеете учётную запись Google, то дополнительно необходимо будет ещё пройти процедуру регистрации на этом сайте чтобы получить её.
  3. Ввода название сайта (например, Мой сайт) и домена (например, mysite.ru) в соответствующие поля формы "Регистрация сайта".
  4. Нажатия на кнопку "Регистрация" и получения 2 ключей. Один из ключей является публичным. Данный ключ указывается в HTML-коде сайта и предназначен для отображения виджета recaptcha. Второй ключ является секретным. Он предназначен для установления связи северного скрипта сайта с сервисом reCAPTCHA для проверки ответа пользователя.
Публичный и секретный ключи reCaptcha для сайта
Публичный и секретный ключи reCaptcha

Установка recaptcha на сайт

Подключение reCAPTCHA к сайту (странице) осуществляется как на стороне клиента (в HTML), так на стороне сервера (в PHP).

Разберём, как это осуществляется более подробно. В качестве примере выберем ajax форму обратной связи.

Подключение recaptcha к HTML-документу

Подключение виджета reCAPTCHA к странице осуществляется посредством выполнения 2 действий:

  1. Включения в страницу JavaScript скрипта recaptcha.
  2. Добавление элемента div с классом "g-recaptcha" и атрибутом data-sitekey, имеющий в качестве значения ваш публичный ключ (public key) капчи.

Кроме этого, добавим на страницу ещё элемент div с идентификатором id="recaptchaError". Данный элемент будем использовать для отображения ошибки, связанной с google racaptcha.

<!-- добавление элемента div -->
<div class="g-recaptcha" data-sitekey="6KepjAsTFFFFFFMqccY0ZiGqc3TEd3YVxo8cHsGX"></div>

<!-- элемент для вывода ошибок -->
<div class="text-danger" id="recaptchaError"></div>

<!-- js-скрипт гугл капчи -->
<script src='https://www.google.com/recaptcha/api.js'></script>

Кроме этого необходимо будет внести ещё изменения в файл script.js, т.к. форма обратной связи отправляется на сервер через AJAX.

// Работа с виджетом recaptcha
// 1. Получить ответ гугл капчи
var captcha = grecaptcha.getResponse();

// 2. Если ответ пустой, то выводим сообщение о том, что пользователь не прошёл тест.
// Такую форму не будем отправлять на сервер.
if (!captcha.length) {
  // Выводим сообщение об ошибке
  $('#recaptchaError').text('* Вы не прошли проверку "Я не робот"');
} else {
  // получаем элемент, содержащий капчу
  $('#recaptchaError').text('');
}

// 3. Если форма валидна и длина капчи не равно пустой строке, то отправляем форму на сервер (AJAX)
if ((formValid) && (captcha.length)) {
  ...
  // добавить в formData значение 'g-recaptcha-response'=значение_recaptcha
  formData.append('g-recaptcha-response', captcha);
  ...
}  
  
// 4. Если сервер вернул ответ error, то делаем следующее...
// Сбрасываем виджет reCaptcha
grecaptcha.reset();
// Если существует свойство msg у объекта $data, то...
if ($data.msg) {
  // вывести её в элемент у которого id=recaptchaError
  $('#recaptchaError').text($data.msg);
}

Интегрирование recaptcha в php скрипт

Установка recaptcha в скрипт php осуществляется посредством внесения в файл process.php следующих изменений:

  • создание переменной $secret, содержащей секретный ключ вашего сайта;
  • подключения клиентской библиотеки reCAPTCHA PHP посредством включения в скрипт файла autoload.php;
  • проверка наличия ключа g-recaptcha-response в суперглобальном массиве POST;
  • если данное имя (g-recaptcha-response) есть, то создать экземпляр службы recaptcha, используя ваш секретный ключ;
  • получить результат проверки кода: если результат положительный, то выполнить необходимые действия (например, отправить информацию на почту).
  • если возникла ошибка, то отправить клиенту отрицательный результат.
// ваш секретный ключ
$secret = '6NepjAsGBBABBN7_Qy9yfzShcKmc70X2kXQyX1WO';
// однократное включение файла autoload.php (клиентская библиотека reCAPTCHA PHP)
require_once (dirname(__FILE__).'/recaptcha/autoload.php');
// если в массиве $_POST существует ключ g-recaptcha-response, то...
if (isset($_POST['g-recaptcha-response'])) {
  // создать экземпляр службы recaptcha, используя секретный ключ
  $recaptcha = new \ReCaptcha\ReCaptcha($secret);
  // получить результат проверки кода recaptcha
  $resp = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);
  // если результат положительный, то...
  if ($resp->isSuccess()){
    // действия, если код captcha прошёл проверку
    //...
  } else {
    // иначе передать ошибку
    $errors = $resp->getErrorCodes();
    $data['error-captcha']=$errors;
    $data['msg']='Код капчи не прошёл проверку на сервере';
    $data['result']='error';
  }

} else {
  //ошибка, не существует ассоциативный массив $_POST["send-message"]
  $data['result']='error';
}

Готовая форма обратной связи с recaptcha

Бесплатно загрузить форму обратной связи с recaptcha можно по следующей ссылке:

Форма обратной связи с recaptcha

Изображения готовой формы, в которую интегрирована recaptcha.

Форма обратной связи с recaptcha
Форма обратной связи с recaptcha
Заполненная форма обратной связи с recaptcha
Заполненная форма обратной связи с recaptcha
Результат, который будет отображён при удачной обработке формы на сервере
Результат, который будет отображён при удачной обработке формы на сервере

Статьи, связанные с этой темой: