• Заметки
    •

    ReCapture v3, установка на форму, с примером валидации результата на PHP

    Опубликовано: 22 Февраля 2019

    Официальная документация

    Репозиторий recapture на GitHUB

    Google reCAPTCHA v3 позволяет отправлять формы не требуя дополнительных действий от пользователя. Оценка того, идет ли запрос от человека или от бота, основана на взаимодействии с сайтом. В конце статьи можно найти видео объясняющее принцип работы, который позволяет защититься от спама избавившись от дополнительных кликов в формах. А сперва о том как происходит интеграция reCAPTCHA v3.

    Для того, чтобы начать использовать Google reCAPTCHA v3, сперва необходимо получить ключи. 

    Получить ключ reCAPTCHA v3

    На страницах сайта, где будет использоваться reCAPTCHA подключаем API.

    <script src="https://www.google.com/recaptcha/api.js?render=RECAPTCHA_SITE_KEY"></script>
    • RECAPTCHA_SITE_KEY — меняем на полученый публичный ключ.

    Затем, к своей форме необходимо добавить дополнительное скрытое input поле, в примере используется recaptchaResponse, но название можно изменять: 

    <form method="POST">

   <label class="label">Name</label>
   <input type="text" name="name" placeholder="Имя" required>

   <label class="label">Email</label>
   <input type="email" name="email" placeholder="Email" required>
                         
   <label class="label">Message</label>
   <textarea name="message" placeholder="Сообщение" required></textarea>
  
   <button type="submit">Отправить</button>

   <input type="hidden" name="recaptchaResponse" id="recaptchaResponse">

</form>

     Настраиваем скрипт отправляющий token, к примеру так:

    <script>
        grecaptcha.ready(function () {
            grecaptcha.execute('RECAPTCHA_SITE_KEY', { action: 'contact' }).then(function (token) {
                var recaptchaResponse = document.getElementById('recaptchaResponse');
                recaptchaResponse.value = token;
            });
        });
</script>
    • RECAPTCHA_SITE_KEY — меняем на полученый публичный ключ.
    • action — при необходимости изменяем.

    Далее приступаем к оформлению PHP, либо используя логику с репозитория github, либо, если надо что-то попроще, добавляем к коду нечто такое, не забыв заменить параметр RECAPTCHA_SECRET_KEY:

    <?php 
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['recaptchaResponse'])) {

    // Задаем параметры
    $recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
    $recaptcha_secret = 'RECAPTCHA_SECRET_KEY';
    $recaptcha_response = $_POST['recaptchaResponse'];

    // Обрабатываем параметры
    $recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
    $recaptcha = json_decode($recaptcha);

    // Выводим результат исходя из полученных данных 
    if ($recaptcha->score >= 0.5) {
        // Код успешной отправки письма
    } else {
        // Код вывода ошибки
    }
} 
?>
    • RECAPTCHA_SECRET_KEY — меняем на полученый секретный ключ.

    О том как подключить reCapture v3 к формам MODX использующим FormIT можно узнать в статье «Создание и обработка форм с использованием FormIt».

    Видео от Google, представляющее reCapture v3:

    back-end web