Как подключить Google ReCapcha v3 на свой сайт

Recapcha от Google это услуга платная. Но есть бесплатный лимит на 10 000 запросов в месяц. Чтобы подключить Google ReCapcha в вашем аккаунте гугла должен быть подключен платежный профиль. Если он подключен то идем дальше.

Будем рассматривать подключение reCAPCHA v3. В этой версии нет классической галочки «я не робот» и других ручных проверок. Версия 3 работает автоматически без участия пользователя в проверке.

Для начала нужно создать необходимые ключи в своем аккаунте гугла. Для этого нужно перейти по ссылке https://www.google.com/u/0/recaptcha/admin/create и создать там профиль для защищаемого сайта. В поля «ярлык» введите домен вашего сайта. В поля «домен» и «название проекта» можно вводить любые названия, главное чтобы вы понимали что это за проект. Я рекомендую вводить туда тоже адрес домена:

Создание reCAPCHA в личном кабинете Google.

Нажмите на кнопку «отправить» и google сгенерирует два ключа – ключ сайта и секретный ключ. Обратите внимание: секретный ключ никому нельзя сообщать и публиковать на фронте. Этот ключ будет использоваться на бэкенде для проверки капчи. Скопируйте эти ключи в надежное место.

Получние ключей Google reCAPCHA.

Нажмите кнопку «посмотреть в cloud console». Откроется консоль вашего проекта.

Консоль Google Cloud reCAPCHA

Справа есть раздел Integration, в котором есть пункты Frontend и Backend. Серые иконки означают что капча еще интегрирована.

Теперь переходим к настройкам на сайте.

Фронтенд

Подключите на сайт скрипт, заменив YOUR_SITE_KEY на ключ сайта, созданный раннее:

<script src="https://www.google.com/recaptcha/enterprise.js?render=YOUR_SITE_KEY"></script>

Далее вставьте в форму на сайте, или в другом месте которое хотите защитить скрытый инпут:

Чтобы он был внутри формы:

Скрытый инпут рекапчи в форме

И в скрипте отправки формы добавьте код проверки рекапчи, заменив YOUR_SITE_KEY на ваш ключ сайта:

$('.js-form').on('submit', async function(e) {
    e.preventDefault();

    const self = $(this);

    try {
        if (typeof grecaptcha === 'undefined' || typeof grecaptcha.enterprise === 'undefined') {
            throw new Error('Скрипт reCAPTCHA Enterprise не загружен на страницу');
        }

        await new Promise(resolve => grecaptcha.enterprise.ready(resolve));
        const token = await grecaptcha.enterprise.execute('YOUR_SITE_KEY', {action: 'submit_form'});
        self.find('.g-recaptcha-response').val(token);
    } catch (error) {
        console.error('Capcha error:', error);
        return; // Прерываем выполнение
    }

    // ваш код обработки формы }

Этот код получает токен от гугла и записывает его в скрытый инпут перед отправкой. Не забудьте сделать функцию обработки формой асинхронной чтобы сработал await.

Бэкенд

Теперь переходим в файл php, который отвечает за обработку формы. И первым делом проверяем капчу. Для этого вставляем этот код, заменив YOUR_SECRET_KEY на ваш секретный ключ:

<?php
header('Content-Type: application/json; charset=utf-8');

$recaptchaSecret = 'YOUR_SECRET_KEY';
$response = $_POST['g-recaptcha-response'] ?? '';

$verify = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$recaptchaSecret}&response={$response}");
$captchaSuccess = json_decode($verify);

if (!$captchaSuccess->success || $captchaSuccess->score < 0.5) {
    exit(json_encode([
        'success' => false,
        'message' => 'Capcha error'
    ], JSON_UNESCAPED_UNICODE));
}

// код обработки формы

Этот код проверяет токен через гугл, и если гугл посчитает что это робот то выполнение отправки прервется и скрипт вернет данные об ошибке (если нужно).

Активация

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

reCAPCHA успешно подключена

Уведомление на сайте

После подключения рекапчи на сайте появится вот такая плавающая штука внизу страницы:

Фиксированная иконка reCAPCHA на сайте

Ее можно убрать, но в таком случае обязательно на сайте нужно указать что сайт защищен рекапчей. Сделать это можно прямо в форме:

Уведомление о защите сайте с помощью reCAPCHA

Скрыть стандартную плашку можно с помощью CSS:

.grecaptcha-badge { 
    visibility: hidden !important;
    z-index: -1;
}