Налаштування 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 годин включаючи серверну верифікацію.