Введение

Собственно, что такое рекапча, и для чего она нужна? Это специальная система, разработанная для защиты веб-сайтов от ботов. Суть системы в следующем — при отправке каких-либо данных с формы Вы должны поставить галочку (чего бот сделать не в состоянии), иначе и отправить не сможете. Именно это поведение кнопки мы сегодня опишем.

Создаем рекапчу

Чтобы создать рекапчу, нужно перейти на сайт google recaptcha, войти под своим гугл-аккаунтом и сделать следующие действия (детально можете посмотреть в видео):

  1. Ввести название капчи в поле Ярлык
  2. Выбрать версию рекапчи v3
  3. Ввести свой домен, например test.site
  4. Согласиться с условиями использования
  5. Нажать отправить

В результате вы получите ключ сайта и секретный ключ, которые понадобятся нам позднее.

Пишем код PHP

Итак, мы сделаем форму в файлике index.php, по клику на "отправить" она будет проверять, бот вы или нет

<form action="#" method="post">
  <input type="text" name="name" placeholder="Введите имя">
  <input type="email" name="email" placeholder="Введите email">
  <input type="hidden" id="token" name="token">
  <button type="submit" name="post">Отправить</button>
</form>

И здесь, помимо обычных полей есть скрытое поле - token, которое поможет нам в дальнейшей работе.

Далее идем в официальную документацию рекапчи и смотрим пример. Нам требуется подключить скрипт, передав туда наш site-key.

<script src="https://www.google.com/recaptcha/api.js?render=ВАШ_КЛЮЧ"></script>

Далее нам нужно создать файл send.php, он же обработчик отправки и капчи.


$captcha;
if(isset($_POST['token'])){
  $captcha=$_POST['token'];
}

$secretKey = "";
$ip = $_SERVER['REMOTE_ADDR'];

// post request to server

$url =  'https://www.google.com/recaptcha/api/siteverify?secret=' . $secretKey .  '&response=' . $_POST['token'];
$response = file_get_contents($url);
$responseKeys = json_decode($response,true);
header('Content-type: application/json');
if($responseKeys["success"] && $responseKeys["score"] >= 0.5) {
  echo json_encode(array('success' => 'true', 'om_score' => $responseKeys["score"], 'token' => $_POST['token']));
} else {
  echo json_encode(array('success' => 'false', 'om_score' => $responseKeys["score"], 'token' => $_POST['token']));
}

Код достаточно прост. Мы ищем токен из нашего скрытого инпута, записываем его в переменную $captcha. Далее делаем переменную под секретный ключ.

Ну а далее мы просто будет проверять по правилам капчи параметр om_score. Если он больше 0.5 — вы не бот. Если менее — бот. Более детально смотрите в видео.

Ну и следующий шаг - js-обработчик для формы в файле index.php

Пишем JS-код

document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();
  let tk = '';
  grecaptcha.ready(function() {
    grecaptcha.execute('', {action: 'homepage'}).then(function(token) {
      tk = token;
      document.getElementById('token').value = token;
      const data = new URLSearchParams();
      for (const pair of new FormData(document.querySelector('form'))) {
          data.append(pair[0], pair[1]);
      }
      fetch('send.php', {
        method: 'post',
        body: data,
      })
      .then(response => response.json())
      .then(result => {
        if (result['om_score'] >= 0.5) {
          console.log('Человек')
          // отправка данных на почту
        } else {
          console.log('Бот')
        }
      });
    });
  });
});

По факту, это обычный fetch-запрос, который улетает на send.php и отдает обратно значение om_score, благодаря которому мы можем понять, бот нам пишет или нет. И если не бот — отправить форму.

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

Ну и конечно, исходники кода тоже есть, они ниже. Пользуйтесь!