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" на ключ, предоставленный вам на информационной панели reCAPTCHA. Подумайте о добавлении ключей в файл .env при переходе к производству.

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

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

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

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

 
<body>
    <section class="section">
        <div class="container">
            <div class="columns">
                <div class="column is-half">
                    <form method="POST">
                        <h1 class="title">
                            reCAPTCHA v3 example
                        </h1>
                        <div class="field">
                            <label class="label">Name</label>
                            <div class="control">
                                <input type="text" name="name" class="input" placeholder="Name" required>
                            </div>
                        </div>
                        <div class="field">
                            <label class="label">Email</label>
                            <div class="control">
                                <input type="email" name="email" class="input" placeholder="Email Address" required>
                            </div>
                        </div>
                        <div class="field">
                            <label class="label">Message</label>
                            <div class="control">
                                <textarea name="message" class="textarea" placeholder="Message" required></textarea>
                            </div>
                        </div>
                        <div class="field is-grouped">
                            <div class="control">
                                <button type="submit" class="button is-link">Send Message</button>
                            </div>
                        </div>
                        <input type="hidden" name="recaptcha_response" id="recaptchaResponse">
                    </form>
                </div>
            </div>
        </div>
    </section>
</body>
</html>
 

И результат:

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

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

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

Теперь пришло время немного PHP для проверки пользователя. Все, что на самом деле включает в себя это POST-запрос к URL-адресу Google, так что это можно легко выполнить на большинстве языков.

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

 
// Check if form was submitted
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['recaptcha_response'])) {
 
    // Build POST request
    $recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
    $recaptcha_secret = 'YOUR_RECAPTCHA_SECRET_KEY';
    $recaptcha_response = $_POST['recaptcha_response'];
 
    // Make and decode POST request
    $recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
    $recaptcha = json_decode($recaptcha);
 
    // Take action based on the score returned
    if ($recaptcha->score >= 0.5) {
        // Verified - send email
    } else {
        // Not verified - show form error
    }
 
}
 

Этот код создает запрос 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 3 завершена

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

Добавить комментарий