db25bec3e5
- sentry - variables in manifest - some dynamic pages - breadcrumbs - dynamic page resolver
56 lines
1.8 KiB
Markdown
56 lines
1.8 KiB
Markdown
# 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
|
||
|
||
```tsx
|
||
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>
|
||
);
|
||
}
|