ldc-ovoteam/docs/recaptcha/RECAPTCHA.md

Guide d'utilisation du système ReCaptcha Provider

Ce guide explique comment utiliser notre système ReCaptcha basé sur un Provider et un hook React, pour simplifier l'intégration de Google reCAPTCHA avec gestion des cookies.

---

1. Structure du système

Le système se compose de trois éléments principaux :

1. RecaptchaProvider

   • Encapsule votre formulaire et active le reCAPTCHA automatiquement selon le statut des cookies.
   • Fournit un contexte React (useRecaptcha) pour accéder au token et au formRef.

2. useRecaptcha

   • Hook React pour accéder au contexte du Provider.
   • Fournit :
     • enabled : booléen indiquant si le reCAPTCHA est actif (cookie accepté).
     • getToken() : fonction pour récupérer le token reCAPTCHA actuel.
     • formRef : référence au formulaire pour manipulation ou focus.

3. RecaptchaForm

   • Wrapper autour du <form> standard.
   • S'occupe de :
     • Injecter le conteneur reCAPTCHA .r_captcha si actif.
     • Ajouter l’attribut inert sur le formulaire si le reCAPTCHA n’est pas encore activé.
     • Appeler la fonction getToken() au submit si nécessaire.

---

2. Utilisation dans un formulaire

import { useForm } from "@inertiajs/react";
import { RecaptchaProvider } from "@/front/providers/RecaptchaProvider";
import RecaptchaForm from "@/front/Components/Base/RecaptchaForm";

export default function ContactForm() {
  const { data, setData, post, processing } = useForm({
    name: "",
    email: "",
    message: "",
  });

  const handleSubmit = (token: string) => {
    post("/contact");
  };

  return (
    <RecaptchaProvider>
      <RecaptchaForm onSubmit={handleSubmit} data={data}>
       ...input + boutton submit (pas besoin de balise form)
      </RecaptchaForm>
    </RecaptchaProvider>
  );
}