Google reCAPTCHA стала одним из самых популярных решений, когда речь идет о предотвращении отправки спам-контактных форм и злоупотребления трафиком на веб-сайтах. В этой статье рассмотрим на примере работу новой версии капчи от Google.

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

Рабочий пример проверки, представленный в этой статье http://useful-notes.ru/files/recaptcha3/

reCAPTCHA v3 направлена на то, чтобы предоставить те же возможности фильтрации спама, но при этом держаться подальше от пользователя. Это делается путем отслеживания действий пользователя и присвоения им баллов. Затем вы можете выполнить соответствующие действия в зависимости от этого показателя, например, заблокировать отправку, требовать проверки вручную или разрешить ее выполнение.

Регистрация

Первый шаг - перейти на страницу reCAPTCHA и войти в систему с учетной записью Google.

После входа перейдите в поле «Зарегистрировать новый сайт». Введите подходящий ярлык (имя веб-сайта), выберите «reCAPTCHA v3», добавьте все необходимые домены веб-сайта и нажмите «Зарегистрироваться»:

После регистрации вам будут предоставлены как «Ключ сайта», так и «Секретный ключ».

Они будут необходимы для настройки формы на доменах, представленных на предыдущем шаге.

Интеграция на стороне клиента

Для этого примера я использую очень простую контактную форму. Она содержит 3 поля (Имя, Адрес электронной почты, Сообщение) и кнопку «Отправить сообщение».

Я использую фреймворк Bulma CSS для быстрого и удобного оформления формы. Код PHP и JS, очевидно, можно разделить на внешние файлы, но я держу все это в одном файле, чтобы пример был коротким и простым.

Создайте файл с именем «index.php» и добавьте следующее:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Google reCAPTCHA v3</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
    <script src="https://www.google.com/recaptcha/api.js?render=YOUR_RECAPTCHA_SITE_KEY"></script>
    <script>
        grecaptcha.ready(function () {
            grecaptcha.execute('YOUR_RECAPTCHA_SITE_KEY', { action: 'contact' }).then(function (token) {
                var recaptchaResponse = document.getElementById('recaptchaResponse');
                recaptchaResponse.value = token;
            });
        });
    </script>
</head>

Замените "YOUR_RECAPTCHA_SITE_KEY" на ключ, предоставленный вам в административной панели Google reCAPTCHA.

Функция grecaptcha.ready запустится, когда служба полностью загрузится и создаст токен для текущего пользователя.

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

Я настроил функцию для захвата скрытого ввода формы и передачи токена до значения ввода.

Код ниже используется для создания самой формы контакта:


    

reCAPTCHA v3 example

</html>

И результат:

Это все, что нужно, чтобы сервис работал на стороне клиента. Теперь он анализирует пользователя, затем создает токен и назначает его скрытому полю recaptcha_response в форме.

Вы можете узнать больше о конфигурации на стороне клиента здесь.

Интеграция на стороне сервера

Теперь пришло время написать немного кода для проверки пользователя.

Замените "YOUR_RECAPTCHA_SECRET_KEY" на Секретный ключ, предоставленный на панели инструментов и добавьте следующий код прямо над формой:

// Проверяем была ли отправлена форма
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['recaptcha_response'])) {

    // Создаем POST запрос
    $recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
    $recaptcha_secret = 'YOUR_RECAPTCHA_SECRET_KEY';
    $recaptcha_response = $_POST['recaptcha_response'];

    // Отправляем POST запрос и декодируем результаты ответа
    $recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
    $recaptcha = json_decode($recaptcha);

    // Принимаем меры в зависимости от полученного результата
    if ($recaptcha->score >= 0.5) {
        // Проверка пройдена - отправляем сообщение.
    } else {
        // Проверка не пройдена. Показываем ошибку.
    }

}
  

Этот код создает запрос POST и отправляет его в Google. В зависимости от полученного балла вы можете выполнять действия на странице. Согласно документации «1.0, скорее всего, это человек, 0.0, скорее всего бот».

Для простоты в приведенном выше примере я принимаю все заявки от любого пользователя с оценкой 0,5 или выше.

И вот пример возвращаемого объекта:
(
    [success] => 1
    [challenge_ts] => 2019-02-07T15:01:19Z
    [hostname] => useful-notes.ru
    [score] => 0,9
    [action] => contact
)

Исходный код скрипта проверки на ботов Google reCAPTCHA v3

Код скрипта со всеми проверками можно скачать по ссылке. Вам необходимо лишь заменить YOUR_RECAPTCHA_SITE_KEY и YOUR_RECAPTCHA_SECRET_KEY на свои данные.

Вы можете узнать больше о конфигурации на стороне сервера здесь.

Настройка Google reCAPTCHA 3 завершена

Как было сказано ранее это очень простой пример. При использовании в рабочей среде убедитесь, что используется строгая проверка вводимых данных на стороне клиента и сервера. Если вам требуется более сложная проверка, стоит взглянуть на библиотеку PHP.