Réagir

Ajoutez hCaptcha à un formulaire React avec official React component. Compatible également avec Preact.

Installer

npm install @hcaptcha/react-hcaptcha

Récupérez votre clé de site publique auprès de Sites. Conservez votre clé secrète sur votre serveur.

Ajouter le widget

Le composant charge automatiquement le SDK. Ce formulaire envoie h-captcha-response à votre point de terminaison /login avec les autres champs.

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

export default function LoginForm() {
  return (
    <form method="POST" action="/login">
      <input type="email" name="email" required />
      <input type="password" name="password" required />
      <HCaptcha sitekey="YOUR_SITE_KEY" />
      <button type="submit">Log in</button>
    </form>
  );
}

Pour les soumissions asynchrones, capturez le jeton avec onVerify, effacez-le avec onExpire et onError, puis appelez resetCaptcha() via une référence de composant après chaque tentative. Les jetons ne sont pas réutilisables. Dans le routeur d'application Next.js, placez le widget dans un composant client avec 'use client'.

Vérifier et tester

Votre serveur doit recevoir le jeton verify the token avant de traiter la connexion. Voir Node.js example.

Utilisez test keys et vérifiez que les jetons manquants ou invalides sont rejetés. Suivez les instructions de local development instructions pour une exécution locale.