{"id":24853,"date":"2021-05-26T10:35:00","date_gmt":"2021-05-26T07:35:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24853"},"modified":"2021-10-18T02:13:32","modified_gmt":"2021-10-17T23:13:32","slug":"comment-ajouter-je-ne-suis-pas-un-robot-captcha-dans-laravel-forms","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-ajouter-je-ne-suis-pas-un-robot-captcha-dans-laravel-forms\/","title":{"rendered":"Comment ajouter Je ne suis pas un robot captcha dans Laravel Forms"},"content":{"rendered":"

Cherchez-vous \u00e0 ajouter Google reCAPTCHA dans vos formulaires Laravel\u00a0? Google reCAPTCHA aide \u00e0 prot\u00e9ger les formulaires contre les robots qui en r\u00e9sultent pour nous sauver des spams. Si vous ne prot\u00e9gez pas vos formulaires, vous recevez probablement une tonne de spams dans la base de donn\u00e9es.<\/p>\n

Au moment de la r\u00e9daction, Google propose 2 versions de reCAPTCHA \u2013 v2 et v3. Le reCAPTCHA v3 place une ic\u00f4ne dans le coin inf\u00e9rieur droit de vos pages et v\u00e9rifie les demandes avec un score. D’autre part, reCAPTCHA v2 v\u00e9rifie les demandes avec un d\u00e9fi. Dans cet article, nous \u00e9tudions reCAPTCHA v2 et nous allons valider les requ\u00eates avec la case \u00e0 cocher "Je ne suis pas un robot".<\/p>\n

Pourquoi avoir besoin de Google reCAPTCHA\u00a0?<\/h3>\n

Un bot Internet est un syst\u00e8me qui ex\u00e9cute des scripts automatis\u00e9s sur Internet. Ils ciblent les formulaires du site Web pour envoyer des spams dans la base de donn\u00e9es. Fondamentalement, ce syst\u00e8me fonctionne \u00e0 un rythme beaucoup plus \u00e9lev\u00e9 que les humains seuls. Nous voulons toujours qu’un vrai humain interagisse avec les formulaires de notre site Web, pas un bot.<\/p>\n

En ajoutant Google reCAPTCHA, nous pouvons prot\u00e9ger les formulaires de notre site Web contre ces robots Internet, leurs spams et leurs abus. Il est impossible pour un syst\u00e8me automatis\u00e9 de r\u00e9soudre le d\u00e9fi pos\u00e9 par reCAPTCHA. Et votre formulaire ne sera pas soumis tant que le d\u00e9fi n’est pas r\u00e9solu. Un humain peut facilement r\u00e9soudre ces probl\u00e8mes et soumettre un formulaire.<\/p>\n

Configurez Google reCAPTCHA sur votre site Web Laravel<\/h3>\n

Pour commencer, vous devez d’abord enregistrer le site sur Google<\/a>. Choisissez l’option reCAPTCHA v2 et la case \u00e0 cocher \u00ab\u00a0Je ne suis pas un robot\u00a0\u00bb comme indiqu\u00e9 dans la capture d’\u00e9cran ci-dessous.<\/p>\n

\"Comment<\/a><\/p>\n

Lors de l’enregistrement du site, copiez la cl\u00e9 du site et la cl\u00e9 secr\u00e8te dont nous aurons besoin dans un instant.<\/p>\n

Nous devons ajouter reCAPTCHA dans le projet Laravel. Pour accomplir la t\u00e2che, je vais utiliser la biblioth\u00e8que anhskohbo\/no-captcha<\/a>.<\/p>\n

Ouvrez l’invite de commande dans le r\u00e9pertoire racine de votre projet et ex\u00e9cutez la commande\u00a0:<\/p>\n

composer require anhskohbo\/no-captcha<\/code><\/pre>\n
Ouvrez le fichier ‘config\/app.php’ et ajoutez la ligne ci-dessous au tableau ‘fournisseurs’.<\/p>\n
AnhskohboNoCaptchaNoCaptchaServiceProvider::class,<\/code><\/pre>\n
Ajoutez un alias de classe au tableau d’alias\u00a0:<\/p>\n
'NoCaptcha' => AnhskohboNoCaptchaFacadesNoCaptcha::class,<\/code><\/pre>\n
Publiez le fichier de configuration \u00e0 l’aide de la commande\u00a0:<\/p>\n
php artisan vendor:publish --provider=\"AnhskohboNoCaptchaNoCaptchaServiceProvider\"<\/code><\/pre>\n
Ensuite, ouvrez le .env<\/code>fichier et sp\u00e9cifiez les cl\u00e9s reCAPTCHA comme suit.<\/p>\n
NOCAPTCHA_SECRET=secret-key\nNOCAPTCHA_SITEKEY=site-key<\/code><\/pre>\n
Assurez-vous de remplacer les espaces r\u00e9serv\u00e9s cl\u00e9 secr\u00e8te, cl\u00e9 de site par les valeurs r\u00e9elles.<\/p>\n
Videz le cache de configuration en ex\u00e9cutant la commande ci-dessous.<\/p>\n
php artisan config:clear <\/code><\/pre>\n
Ajout de Google reCAPTCHA au formulaire dans Laravel<\/h3>\n
\u00c0 ce stade, vous avez termin\u00e9 la configuration de base requise pour reCAPTCHA. Maintenant, \u00e9crivons du code et mettons-le en action.<\/p>\n
Ouvrez votre fichier de vue o\u00f9 vous souhaitez ajouter la case \u00e0 cocher Je ne suis pas un robot. En haut du fichier blade, initialisez la source JS comme suit\u00a0:<\/p>\n
{!! NoCaptcha::renderJs() !!}<\/code><\/pre>\n
Ajoutez l’instruction sur une seule ligne ci-dessous \u00e0 l’endroit o\u00f9 vous souhaitez afficher la case \u00e0 cocher reCAPTCHA. Le meilleur endroit est avant le bouton de soumission.<\/p>\n
{!! NoCaptcha::display() !!}<\/code><\/pre>\n
\u00c0 titre d’exemple, cr\u00e9ons un formulaire avec quelques champs et ajoutons-y reCAPTCHA en utilisant le code ci-dessous.<\/p>\n
{!! NoCaptcha::renderJs() !!}\n\u00a0\n@if ($errors->has('g-recaptcha-response'))\n\u00a0\u00a0\u00a0\u00a0<span class=\"help-block\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<strong>{{ $errors->first('g-recaptcha-response') }}<\/strong>\n\u00a0\u00a0\u00a0\u00a0<\/span>\n@endif\n<form action=\"{{ url('ROUTE_HERE') }}\" method=\"post\">\n\u00a0\u00a0\u00a0\u00a0<p>Name: <input type=\"text\" name=\"fullname\" \/><\/p>\n\u00a0\u00a0\u00a0\u00a0<p>Email: <input type=\"email\" name=\"email\" \/><\/p>\n\u00a0\u00a0\u00a0\u00a0<p>Message: <textarea name=\"message\"><\/textarea><\/p>\n\u00a0\u00a0\u00a0\u00a0{!! NoCaptcha::display() !!}\n\u00a0\u00a0\u00a0\u00a0{{ csrf_field() }}\n\u00a0\u00a0\u00a0\u00a0<p><input type=\"submit\" name=\"submit\" value=\"Submit\" \/><\/p>\n<\/form><\/code><\/pre>\n
Apr\u00e8s avoir ajout\u00e9 les lignes ci-dessus, vous verrez reCAPTCHA appara\u00eetre comme illustr\u00e9 dans la capture d’\u00e9cran ci-dessous.<\/p>\n
\"Comment<\/a><\/p>\n
Dans le code ci-dessus, j’ai \u00e9galement ajout\u00e9 un code qui affiche une erreur si elle se produit lors de la validation d’un reCAPTCHA.<\/p>\n
Maintenant, nous devons valider le reCAPTCHA lors de la soumission du formulaire. Pour y parvenir, j’utiliserai Laravel Validator<\/a> comme suit.<\/p>\n
<?php\n\u00a0\nnamespace AppHttpControllers;\n\u00a0\nuse IlluminateHttpRequest;\nuse IlluminateSupportFacadesValidator;\n\u00a0\nclass ContactController extends Controller\n{\n\u00a0\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0\u00a0public function store(Request $request)\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$messages = [\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'g-recaptcha-response.required' => 'You must check the reCAPTCHA.',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'g-recaptcha-response.captcha' => 'Captcha error! try again later or contact site admin.',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0];\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$validator = Validator::make($request->all(), [\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'g-recaptcha-response' => 'required|captcha'\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0], $messages);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if ($validator->fails()) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return redirect('ROUTE_HERE')\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0->withErrors($validator)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0->withInput();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ process the form\n\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0 \n}<\/code><\/pre>\n
Ici, j’ai inclus la fa\u00e7ade ‘Validator’ et la validation d’un reCAPTCHA dans la m\u00e9thode ‘store’. S’il ne parvient pas \u00e0 valider, il g\u00e9n\u00e9rera une erreur.<\/p>\n
C’est \u00e7a! Vous avez ajout\u00e9 avec succ\u00e8s reCAPTCHA v2 avec la case \u00e0 cocher Je ne suis pas un robot au formulaire Laravel. D\u00e9sormais, votre formulaire ne sera pas soumis tant que le visiteur n’aura pas r\u00e9solu le d\u00e9fi reCAPTCHA.<\/p>\n
Articles Li\u00e9s<\/h4>\n