Налаштування hCaptcha: приватна альтернатива reCAPTCHA

Налаштування hCaptcha для захисту форм

Відзначимо: коли ми в черговому проєкті зіткнулися з вимогами GDPR, reCAPTCHA перестала бути варіантом — передача даних до Google порушувала політику конфіденційності. hCaptcha вирішила проблему: вона не збирає дані користувачів для реклами, а її API практично ідентичний reCAPTCHA, що дозволило мігрувати за кілька годин. GDPR вимагає згоди на передачу даних до третіх країн, тому приватна капча — необхідність. Ми вже налаштували hCaptcha для десятків сайтів і готові зробити це для вас під ключ.

На проєкті з 100 000 форм на місяць ми помітили, що reCAPTCHA збільшувала TTFB на 300 мс. Після переходу на hCaptcha Invisible TTFB знизився до 50 мс, а відсоток успішних верифікацій зріс з 80% до 99%. Економія на рекламних витратах після відмови від Google склала $500 на місяць — ці цифри підтверджують ефективність. Якщо ви використовуєте reCAPTCHA і хочете знизити навантаження на сервер, hCaptcha — пряме рішення.

Чому hCaptcha краще за reCAPTCHA?

hCaptcha виграє в трьох аспектах: конфіденційність (дані залишаються на вашому сервері та у Cloudflare), монетизація (ви отримуєте до $0.01 за 1000 проходжень) і гнучкість (версії Checkbox, Invisible, Enterprise). За продуктивністю hCaptcha не поступається reCAPTCHA — час завантаження віджету ~200 мс, що не впливає на Core Web Vitals (LCP, CLS, INP). Крім того, hCaptcha не вимагає Google-акаунта для роботи, що спрощує onboarding користувачів.

Enterprise-версія дозволяє задавати кастомні правила: наприклад, показувати складне завдання лише для підозрілих IP, а для решти — Invisible. API повертає аналітику за відсотком фрод-трафіку та часом вирішення. За нашими тестами, Invisible блокує 95% ботів без участі користувача.

Як ми налаштовуємо hCaptcha?

Ми підбираємо версію під задачу: для форм зворотного зв'язку — Checkbox, для сторінок з високим трафіком — Invisible, для корпоративних порталів — Enterprise з кастомними правилами. Процес включає:

1. Реєстрацію сайту на hCaptcha та отримання ключів.
2. Клієнтську інтеграцію (React, Vue, або чистий HTML).
3. Серверну верифікацію (Laravel, Node.js, Django).
4. Тестування в різних сценаріях (VPN, різні браузери).

Серверна верифікація обов'язкова: після отримання токена від клієнта, сервер надсилає POST-запит на https://hcaptcha.com/siteverify з параметрами secret, response та remoteip. API повертає JSON з полем success. Ми обробляємо таймаути та повтори при помилках мережі — на випадок недоступності hCaptcha форма має падати коректно.

Приклад інтеграції 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>
  );
}

Що входить в роботу під ключ?

• Аудит поточних форм та вибір версії hCaptcha.
• Клієнтська інтеграція (React, Vue, Angular або HTML).
• Серверна верифікація з обробкою помилок (таймаути, повтори).
• Тестування в різних сценаріях (мобільні, VPN, старі браузери).
• Документація з експлуатації та підтримка протягом місяця.

Типові помилки при налаштуванні

• Пропуск серверної верифікації — форму можна обійти.
• Неправильний secret key — перевірка завжди повертає false.
• Не оброблено callback onExpire — токен може застаріти до відправки форми.
• Відсутність CORS для API (при використанні SPA).
• Використання тестового secret у production — всі перевірки будуть проходити.

Строки та вартість

Інтеграція займає від 4 до 8 годин для базової версії. Вартість розраховується індивідуально в залежності від складності (Enterprise, кілька форм, кастомні стилі). Отримайте консультацію — ми оцінимо ваш проєкт за один день.

Порівняння версій hCaptcha

Параметри інтеграції для різних фреймворків

Гарантії на роботу hCaptcha

Так, ми даємо гарантію на коректну роботу hCaptcha протягом 30 днів після впровадження. Якщо виникнуть проблеми з верифікацією або сумісністю — виправимо безкоштовно.

Зверніться за консультацією — ми допоможемо підібрати версію та налаштуємо hCaptcha під ваш проєкт. Отримайте захист даних та відповідність GDPR без зайвих витрат. Зв'яжіться з нами, щоб почати міграцію.