Использование Google reCAPTCHA v2 и v3 в одной форме

Введение

У Google появилась замечательная reCAPTCHA v3. Замечательна она тем, что освобождает пользователя от необходимости тыкать по картинкам в поисках светофоров и пожарных гидрантов, при этом вполне успешно анализирует его действия на сайте и оценивает их по шкале от 0 до 1. Чем выше балл, тем качественней наш бот выше вероятность, что пользователь реальный. Обычно выставляют порог равным 0.5.

А что делать, если хочется добра пользователям сайта, но есть у его владельца некая обеспокоенность, что не пропустит невидимая столь ценного реального пользователя, который может и ведет себя странно и подозрительно, но совсем не бот?

Ответ - последовательно использовать капчу обоих версий - не прошел невидимую проверку - появилась видимая капча!

Что делаем

Тут обозначу основные моменты. Весь код есть по ссылке на github. достаточно переименовать файл config.example.php в config.php и поменять в нем ключи доступа на настоящие.

Для подключения необходимо получить публичные (site key) и приватные (secret key) ключи от обеих версий Google reCAPTCHA на сайте.

Добавляем на страницу скрипт, указав в параметре публичный ключ версии 3

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

Создаем форму, в которую помимо наших полей добавляем два скрытых для токенов, а также один блок, в который будет добавляться видимая капча. Блоку требуется задать значение атрибута "id".

<input type="hidden" name="captcha_token_v2">
<input type="hidden" name="captcha_token_v3">
<div id="captcha"></div>

Форма у нас будет отправляться по ajax. Пишем обработчик для события подтверждения формы. Тут:

• form - эта переменная содержит объект формы

• captcha_key_site_v3 - открытый публичный ключ для капчи 3 версии

• token - токен, присвоенный пользователю, по нему в дальнейшем будем обращаться в сервис Google и получать те самые баллы

- открытый который проверяет, что определена переменная grecaptcha из библиотеки Google, получает токен и записывает его в скрытое поле, после чего отправляем форму.

form.submit(function (e){
  e.preventDefault()
  if (typeof grecaptcha != 'undefined' && typeof captcha_key_site_v3 != 'undefined') {
    grecaptcha.ready(function () {
      grecaptcha.execute(captcha_key_site_v3, {action: 'submit'}).then(function (token) {
        if(token) {
          form.find('input[name="captcha_token_v3"]').val(token)
          sendForm()
        }
      })
    })
  }
})

Для отправки ипользуется метод sendForm, в котором выполняется такая последовательность действий:

1. Отправляем ajax запрос с данными формы на сервер

2. Если на сервере проверка пройдена и данные формы приняты, получаем сообщение об успехе и выводим информацию об этом пользователю

3. Если произошла ошибка, связанная с версией 3 (не отчечает сервер или недостаточно баллов), то рендерим капчу версии 2

function sendForm() {
                let data = form.serialize()
                $.ajax({
                    type: 'POST',
                    url: form.attr('action'),
                    data: data,
                    dataType: 'json',
                    success: function (response) {
                        if(response.success) {
                            // показываем сообщение об успехе и перезагружаем страницу
                            $('.alert').text(response.text).slideDown()
                            setTimeout(function (){location.reload()}, 4000)
                        } else if(response.error) {
                            // если была ошибка капчи, сбрасываем капчку v2 при наличии
                            if (widgetCaptcha !== false) {
                                grecaptcha.reset(widgetCaptcha)
                            }
                            // если ошибка была в версии v3, показываем видимую капчу v2
                            // widgetCaptcha - идентификатор, т.е. можно рендерить и управлять несколькими штуками
                            if (response.error === 'fall_captcha_v3' && !widgetCaptcha) {
                                widgetCaptcha = grecaptcha.render('captcha', {
                                    'sitekey': captcha_key_site_v2,
                                    'theme': 'dark',
                                    'callback': setTokenV2
                                })
                            }
                        }
                    }
                })
            }

Методу render передаем первым параметром id блока, в который будет помещена капча, вторым - набор параметров:

• sitekey - публичный ключ капчи версии 2

• theme - цветовая схема капчи, может принимать значения dark / light

• callback - имя функции, которая будет вызвана после проверки капчи версии 2

WidgetCaptcha - это переменная, в которой хранится идентификатор капчи, полезно использовать особенно когда на странице несколько форм, для сброса капчи используеся метод grecaptcha.reset(WidgetCaptcha)

В функции-коллбеке setTokenV2 передается токен от второй версии капчи, его мы записываем во второе скрытое поле

function setTokenV2(token) {
  form.find('input[name="captcha_token_v2"]').val(token)
}

В этой же функции можно сразу вызвать sendForm() или предоставить пользователю самостоятельно нажать на кнопку. На этот раз форма улетает уже с двумя токенами, при этом первым проверяется токен версии 2, на всякий случай на стороне сервера по нему тоже получаем инофрмацию от Google, и если все в порядке, возвращаем информацию об успехе в браузер, где и показывем соответстующее сообщение.

Код серверной части в файле ajax.php:

<?php
require_once 'config.php';
session_start();
if(!empty($_POST) && $_POST['sid'] == session_id()) {
    $token_v2 = $_POST['captcha_token_v2'];
    $token_v3 = $_POST['captcha_token_v3'];
    $result = checkCaptcha($token_v2, $token_v3);
    die(json_encode($result, true));
}

function checkCaptcha($token_v2 = false, $token_v3 = false)
{
    // если не передано ни одного токена - возвращаем ошибку
    if (!$token_v3 && !$token_v2) {
        return ['error' => 'fall_captcha'];
    }
    // если дело дошло до капчи второй версии
    elseif ($token_v2) {
        // проверяем информацию по второй версии, если google ответил, что провека успешная - возвращаем успех
        $result = checkCaptchaCurl($token_v2, KEY_SECRET_V2);
        if (!$result['success']) {
            // если проверка провалилась - тоже ошибка
            return ['error' => 'fall_captcha_v2'];
        }
    }
    // если токен второй версии еще не получен, но есть 3, значит проверяем невидимую капчу
    else {
        $result = checkCaptchaCurl($token_v3, KEY_SECRET_V3);
        // проверяем количество очков от 0 до 1. Чем ближе к 1, тем больше вероятности, что это человек
        if ($result['score'] < 1) {
            return ['error' => 'fall_captcha_v3'];
        }
    }
    // возвращаем успех, если проверки пройдены
    $text = 'Your message "' . $_POST['text'] . '" was send to email "' . $_POST['email'] . '" successfully';
    return ['success' => true, 'text' => $text];
}

/**
 * Метод для отправки запроса в google через CURL
 * @param $response
 * @param $secret
 * @return mixed
 */
function checkCaptchaCurl($response, $secret)
{
    $url_data = 'https://www.google.com/recaptcha/api/siteverify' . '?secret=' . $secret . '&response=' . $response . '&remoteip=' . $_SERVER['REMOTE_ADDR'];
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url_data);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    $captcha_res = curl_exec($curl);
    curl_close($curl);
    $captcha_res = json_decode($captcha_res, true);
    return $captcha_res;
}

Надеюсь, кому-то пригодиться в работе, также буду рад комментариям и вопросам.