Розробка форми із захистом reCAPTCHA/hCaptcha
CAPTCHA-захист форм запобігає спам-відправкам, реєстрацій ботів та brute force паролів. Вибір між Google reCAPTCHA та hCaptcha залежить від вимог до конфіденційності та географії аудиторії.
reCAPTCHA v3 (рекомендується)
v3 працює незаметно: аналізує поведінку користувача та повертає score від 0.0 до 1.0 без показу завдань.
<script src="https://www.google.com/recaptcha/api.js?render=SITE_KEY"></script>
async function submitForm(data: FormData) {
const token = await grecaptcha.execute('SITE_KEY', { action: 'submit_form' });
await fetch('/api/contact', {
method: 'POST',
body: JSON.stringify({ ...data, recaptcha_token: token }),
});
}
// Верифікація на сервері
class RecaptchaService
{
public function verify(string $token, string $expectedAction = 'submit_form'): bool
{
$resp = Http::post('https://www.google.com/recaptcha/api/siteverify', [
'secret' => config('services.recaptcha.secret'),
'response' => $token,
'remoteip' => request()->ip(),
]);
$result = $resp->json();
return $result['success'] === true
&& $result['action'] === $expectedAction
&& $result['score'] >= 0.5; // поріг: 0.0 = бот, 1.0 = людина
}
}
hCaptcha (альтернатива)
hCaptcha сумісна з reCAPTCHA v2 API, але орієнтована на приватність. Переважна, якщо аудиторія в регіонах із обмеженнями Google:
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
<div class="h-captcha" data-sitekey="SITE_KEY"></div>
$resp = Http::post('https://hcaptcha.com/siteverify', [
'secret' => config('services.hcaptcha.secret'),
'response' => $request->h_captcha_response,
]);
$valid = $resp->json('success') === true;
Cloudflare Turnstile (найменш навязливий)
Найменш навязливий захист — тільки чекбокс або повністю невидимий:
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<div class="cf-turnstile" data-sitekey="SITE_KEY"></div>
Верифікація йде на https://challenges.cloudflare.com/turnstile/v0/siteverify.
Час реалізації: 1 робочий день.