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

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

hCaptcha — альтернатива reCAPTCHA, ориентированная на конфиденциальность. Не передаёт данные пользователей Google, соответствует GDPR. Используется Cloudflare и другими крупными платформами.

Отличия от reCAPTCHA

• Не требует Google-аккаунта для работы
• Владельцы сайтов получают вознаграждение за задания (опционально)
• Аналогичный API — миграция с reCAPTCHA занимает часы
• Версии: Checkbox (явный тест), Invisible (фоновый анализ), Enterprise (расширенная аналитика)

Регистрация

Ключи на hcaptcha.com: sitekey и secret.

Интеграция — Checkbox

<script src="https://js.hcaptcha.com/1/api.js" async defer></script>

<form method="POST" action="/contact">
    <input type="text" name="email" required>
    <div class="h-captcha" data-sitekey="YOUR_SITE_KEY"></div>
    <button type="submit">Отправить</button>
</form>

Invisible hCaptcha

<script src="https://js.hcaptcha.com/1/api.js" async defer></script>

<form id="myForm">
    <div id="hcaptcha-widget"
         class="h-captcha"
         data-sitekey="YOUR_SITE_KEY"
         data-size="invisible"
         data-callback="onCaptchaSuccess">
    </div>
    <button onclick="hcaptcha.execute()">Отправить</button>
</form>

<script>
function onCaptchaSuccess(token) {
    document.getElementById('myForm').submit();
}
</script>

Серверная верификация (Laravel)

// app/Rules/HcaptchaRule.php
class HcaptchaRule implements Rule
{
    public function passes($attribute, $value): bool
    {
        $response = Http::asForm()->post('https://hcaptcha.com/siteverify', [
            'secret'   => config('services.hcaptcha.secret'),
            'response' => $value,
            'remoteip' => request()->ip(),
        ]);

        return $response->json('success') === true;
    }

    public function message(): string
    {
        return 'Проверка hCaptcha не пройдена.';
    }
}

// В контроллере
$request->validate([
    'email'              => 'required|email',
    'h-captcha-response' => ['required', new HcaptchaRule],
]);

React-компонент

import HCaptcha from '@hcaptcha/react-hcaptcha';

function Form() {
    const captchaRef = useRef(null);
    const [captchaToken, setCaptchaToken] = useState(null);

    return (
        <form onSubmit={handleSubmit}>
            <HCaptcha
                ref={captchaRef}
                sitekey={process.env.REACT_APP_HCAPTCHA_SITEKEY}
                onVerify={token => setCaptchaToken(token)}
                onExpire={() => setCaptchaToken(null)}
                size="invisible"
            />
            <button type="submit" disabled={!captchaToken}>
                Отправить
            </button>
        </form>
    );
}

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

4–8 часов на интеграцию, включая серверную проверку и обработку ошибок.