React : ReCAPTCHA vlient et démo du serveur

Dans cette démo, j'utiliserai les informations d'identification Google ReCAPTCHA v3 dans une application React construite sur Next.js. Le token ReCAPTCHA sera généré côté client et validé côté serveur.

Links

• Démo

• Base de code

Étape 1 : Générez vos informations d'identification ReCAPTCHA

Accédez à Google ReCaptcha V3 et générez vos identifiants.

Étape 2 : Importez la bibliothèque ReCaptcha

<Script src={`https://www.google.com/recaptcha/enterprise.js?render=${process.env.NEXT_PUBLIC_RE_CAPTCHA_SITE_KEY}`} />

Remarque : vous pouvez utiliser certains packages, mais la mise en œuvre est simple.

Étape 3 : Appelez la méthode d'exécution dans votre gestionnaire de clics

const loginClickHandler = (event) => {
  event.preventDefault();

  grecaptcha.enterprise.ready(async () => {
    const token = await grecaptcha.enterprise.execute(
      process.env.NEXT_PUBLIC_RE_CAPTCHA_SITE_KEY,
      { action: "LOGIN" }
    );

    await submit(token);
  });
};

grecaptcha est un objet injecté par le script importé.

Remarque : lorsque vous utilisez Next.js, assurez-vous que toutes les variables d'environnement exposées dans le navigateur portent le préfixe NEXT_PUBLIC.

Lorsque l'utilisateur clique sur se connecter, l'application génère automatiquement un captcha pour lui en appelant deux méthodes depuis l'objet grecaptcha :

• window.grecaptcha.enterprise.ready : cela garantit que l'objet Google reCAPTCHA est prêt à fonctionner.
• window.grecaptcha.enterprise.execute : Cela génère le jeton captcha.

Enfin, les données sont envoyées au backend (dans mon cas, j'utilise une fonction Lambda), avec le jeton captcha généré.

const submit = async (code) => {
  await fetch("`/.netlify/functions/react-recaptcha-v3-nextjs", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ code }),
  });
};

Remarque : si vous travaillez avec un formulaire, vous devez également inclure d'autres valeurs de champ telles que le nom d'utilisateur, le nom ou toute autre donnée supplémentaire collectée par votre formulaire.

Étape 4 : Validez le Captcha sur le Backend

const validateReCaptcha = async (captcha) => {
  const url = `https://www.google.com/recaptcha/api/siteverify?secret=${process.env.RE_CAPTCHA_SECRET_KEY}&response=${captcha}`;
  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ captcha }),
  });

  return response.json();
};

validateReCaptcha est une méthode backend qui appelle un point de terminaison de l'API Google, en transmettant le SECRET_KEY (stocké en tant que variable d'environnement) et le jeton Captcha généré sur le client.

Si le Captcha est valide, la réponse de l'API ressemblera à ceci :

{
  "success": true,
  "challenge_ts": "2024-11-24T03:04:34Z",
  "hostname": "localhost",
  "score": 0.9
}

Conclusion

ReCaptcha est crucial pour sécuriser les formulaires, en particulier lorsque vous cherchez à empêcher les robots de les soumettre. Google propose un niveau gratuit qui fournit jusqu'à 10 000 évaluations par mois (au moment de la rédaction), ce qui en fait un choix solide pour de nombreuses applications. L'intégration est facilitée grâce à la bibliothèque fournie par Google. Il vous suffira de transmettre vos identifiants : SITE_KEY côté client et SECRET_KEY côté serveur.

Un point clé à retenir est que SECRET_KEY ne doit jamais être exposé côté client, car cela pourrait compromettre la sécurité de votre application. Seul le SITE_KEY est destiné au client.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!