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