{"id":25459,"date":"2021-06-07T13:57:00","date_gmt":"2021-06-07T10:57:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25459"},"modified":"2021-10-18T02:08:13","modified_gmt":"2021-10-17T23:08:13","slug":"un-guide-sur-l-ajout-de-google-recaptcha-v3-a-votre-site-web-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/un-guide-sur-l-ajout-de-google-recaptcha-v3-a-votre-site-web-laravel\/","title":{"rendered":"Un guide sur l’ajout de Google reCAPTCHA v3 \u00e0 votre site Web Laravel"},"content":{"rendered":"

Dans le pass\u00e9, j’ai publi\u00e9 un article sur l’ ajout de Google reCAPTCHA aux formulaires Laravel<\/a>. Google a alors apport\u00e9 la prochaine version v3 de reCAPTCHA. Un de nos lecteurs a demand\u00e9 comment int\u00e9grer reCAPTCHA v3 dans une application Laravel.<\/p>\n

reCAPTCHA v3 a un comportement l\u00e9g\u00e8rement diff\u00e9rent. Contrairement \u00e0 l’ancienne version de reCAPTCHA, vous n’avez pas besoin de mettre un captcha dans votre formulaire. Dans cette version, vos visiteurs n’ont pas besoin de r\u00e9soudre un puzzle. Au lieu de cela, vous verrez l’ic\u00f4ne reCAPTCHA dans le coin inf\u00e9rieur droit de votre site Web. Cette version v3 de reCAPTCHA combat les bots en arri\u00e8re-plan. Plus important encore, vous n’avez pas besoin d’ajouter un captcha sous toutes ses formes. Ajoutez-le simplement une fois et il prot\u00e9gera toutes les formes de votre site Web.<\/p>\n

Dans cet article, nous \u00e9tudions comment un utilisateur peut ajouter reCAPTCHA v3 \u00e0 son site Web Laravel. L’ajout de reCAPTCHA prot\u00e8ge votre site Web contre les robots et les spams.<\/p>\n

Obtenir la cl\u00e9 du site et la cl\u00e9 secr\u00e8te de reCAPTCHA<\/h3>\n

Pour commencer, vous devez d’abord enregistrer votre site avec Google reCAPTCHA. Allez sur Google reCAPTCHA<\/a> et cliquez sur l’ic\u00f4ne ‘+’ pour enregistrer votre site. Sur la page suivante, ajoutez le domaine de votre site Web, choisissez l’option ‘reCAPTCHA v3’. Si vous souhaitez le tester sur un serveur local, vous devez ajouter "localhost" au champ domaine.<\/p>\n

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

Une fois que vous avez cliqu\u00e9 sur le bouton Soumettre, vous obtiendrez la cl\u00e9 du site et la cl\u00e9 secr\u00e8te. Copiez ces cl\u00e9s. Ils n\u00e9cessiteront les prochaines \u00e9tapes.<\/p>\n

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

Installer et configurer la biblioth\u00e8que Laravel reCAPTCHA<\/h3>\n

Rendez-<\/a> vous sur votre projet Laravel et installez la biblioth\u00e8que de biscolab<\/a> qui est con\u00e7ue pour int\u00e9grer reCAPTCHA dans Laravel. Ouvrez le terminal dans le r\u00e9pertoire racine de votre projet et ex\u00e9cutez la commande\u00a0:<\/p>\n

composer require biscolab\/laravel-recaptcha<\/code><\/pre>\n
Lors de l’installation de la biblioth\u00e8que, publiez le fichier de configuration \u00e0 l’aide de la commande ci-dessous.<\/p>\n
php artisan vendor:publish --provider=\"BiscolabReCaptchaReCaptchaServiceProvider\"<\/code><\/pre>\n
Ouvrez le .env<\/code>fichier dans votre \u00e9diteur et ajoutez votre site et les cl\u00e9s secr\u00e8tes de reCAPTCHA comme indiqu\u00e9 ci-dessous.<\/p>\n
RECAPTCHA_SITE_KEY=ADD_YOUR_SITE_KEY\nRECAPTCHA_SECRET_KEY=ADD_YOUR_SECRET_KEY<\/code><\/pre>\n
Assurez-vous de remplacer les espaces r\u00e9serv\u00e9s \u00ab\u00a0ADD_YOUR_SITE_KEY\u00a0\u00bb et \u00ab\u00a0ADD_YOUR_SECRET_KEY\u00a0\u00bb par les valeurs r\u00e9elles. Ensuite, ouvrez config\/recaptcha.php<\/code>et d\u00e9finissez la version sur v3.<\/p>\n
return [\n\u00a0\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0\u00a0'version' => 'v3',\n\u00a0\u00a0\u00a0\u00a0...\n];<\/code><\/pre>\n
Apr\u00e8s cela, effacez le cache de configuration \u00e0 l’aide de la commande\u00a0:<\/p>\n
php artisan config:cache<\/code><\/pre>\n
Ajoutez Google reCAPTCHA v3 \u00e0 votre site Web Laravel<\/h3>\n
Nous avons termin\u00e9 avec toute la configuration et nous sommes pr\u00eats \u00e0 ajouter reCAPTCHA sur le site Web. Pour cela, vous devez d’abord ajouter la balise m\u00e9ta HTML pour csrf-token dans la section head.<\/p>\n
<meta name=\"csrf-token\" content=\"{{ csrf_token() }}\"><\/code><\/pre>\n
Si votre site Web a d\u00e9j\u00e0 ajout\u00e9 cette balise, ignorez simplement l’\u00e9tape ci-dessus. Ensuite, ins\u00e9rez l’ htmlScriptTagJsApi()<\/code>assistant avant de fermer la balise head.<\/p>\n
<!DOCTYPE html>\n<html>\n\u00a0\u00a0\u00a0\u00a0<head>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{!! htmlScriptTagJsApi() !!}\n\u00a0\u00a0\u00a0\u00a0<\/head><\/code><\/pre>\n
Allez maintenant sur votre site Web, rechargez-le et vous devriez voir l’ic\u00f4ne reCAPTCHA dans le coin inf\u00e9rieur droit d’une page. Cela signifie que votre site Web est d\u00e9sormais prot\u00e9g\u00e9 par Google reCAPTCHA.<\/p>\n
Vous avez termin\u00e9 d’ajouter Google reCAPTCHA sur votre site Web Laravel. Pour plus de curiosit\u00e9, si vous voulez voir la r\u00e9ponse de reCAPTCHA, vous devez modifier l\u00e9g\u00e8rement le code dans la balise head.<\/p>\n
<head>\n...\n<meta name=\"csrf-token\" content=\"{{ csrf_token() }}\">\n<script type=\"text\/javascript\">\nfunction callbackThen(response){\n\u00a0\u00a0\u00a0\u00a0\/\/ read HTTP status\n\u00a0\u00a0\u00a0\u00a0console.log(response.status);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ read Promise object\n\u00a0\u00a0\u00a0\u00a0response.json().then(function(data){\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(data);\n\u00a0\u00a0\u00a0\u00a0});\n}\nfunction callbackCatch(error){\n\u00a0\u00a0\u00a0\u00a0console.error('Error:', error)\n}\n<\/script>\n\u00a0\n{!! htmlScriptTagJsApi([\n\u00a0\u00a0\u00a0\u00a0'callback_then' => 'callbackThen',\n\u00a0\u00a0\u00a0\u00a0'callback_catch' => 'callbackCatch'\n]) !!}\n<\/head><\/code><\/pre>\n
Rechargez la page et v\u00e9rifiez dans la console du navigateur, vous verrez la r\u00e9ponse du Google reCAPTCHA. Dans mon cas, cela est montr\u00e9 comme une capture d’\u00e9cran ci-dessous.<\/p>\n
\"Un<\/a><\/p>\n
Articles Li\u00e9s<\/h4>\n