Настройка reCAPTCHA для защиты форм сайта

Настройка reCAPTCHA для защиты форм сайта

Google reCAPTCHA защищает формы от автоматических ботов: регистраций спам-аккаунтов, брутфорса паролей, массовых отправок форм обратной связи. Существует три версии с разными UX-компромиссами.

Версии reCAPTCHA

v2 Checkbox — классический «Я не робот». Пользователь ставит галочку, иногда проходит визуальный тест.

v2 Invisible — не требует взаимодействия, анализирует поведение в фоне. При подозрении показывает вызов.

v3 — полностью невидимый, возвращает score от 0.0 до 1.0. Разработчик сам решает, что делать при низком score.

Регистрация и ключи

Получить ключи: google.com/recaptcha/admin. Нужны site_key (публичный, для фронта) и secret_key (приватный, только на сервере).

Интеграция reCAPTCHA v3

Фронтенд:

<script src="https://www.google.com/recaptcha/api.js?render=SITE_KEY"></script>
<script>
grecaptcha.ready(function() {
    document.getElementById('submit').addEventListener('click', async function(e) {
        e.preventDefault();
        const token = await grecaptcha.execute('SITE_KEY', {action: 'contact_form'});
        document.getElementById('recaptcha-token').value = token;
        document.getElementById('myForm').submit();
    });
});
</script>
<input type="hidden" id="recaptcha-token" name="recaptcha_token">

Проверка на сервере (PHP):

$token = $request->input('recaptcha_token');
$secret = config('services.recaptcha.secret');

$response = Http::post('https://www.google.com/recaptcha/api/siteverify', [
    'secret'   => $secret,
    'response' => $token,
    'remoteip' => $request->ip(),
]);

$data = $response->json();

if (!$data['success'] || $data['score'] < 0.5 || $data['action'] !== 'contact_form') {
    abort(422, 'reCAPTCHA verification failed');
}

Score-стратегия для reCAPTCHA v3

Интеграция с React

import ReCAPTCHA from 'react-google-recaptcha';

function ContactForm() {
    const recaptchaRef = useRef(null);

    const handleSubmit = async (e) => {
        e.preventDefault();
        const token = await recaptchaRef.current.executeAsync();
        recaptchaRef.current.reset();
        // Отправить token вместе с данными формы
        await submitForm({ ...formData, recaptcha_token: token });
    };

    return (
        <form onSubmit={handleSubmit}>
            {/* поля формы */}
            <ReCAPTCHA
                ref={recaptchaRef}
                sitekey={process.env.REACT_APP_RECAPTCHA_SITE_KEY}
                size="invisible"
            />
            <button type="submit">Отправить</button>
        </form>
    );
}

Срок реализации

Базовая интеграция reCAPTCHA v3 — 4–8 часов включая серверную верификацию.