{"id":24620,"date":"2021-05-22T11:32:00","date_gmt":"2021-05-22T08:32:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24620"},"modified":"2021-10-18T02:14:37","modified_gmt":"2021-10-17T23:14:37","slug":"valider-google-recaptcha-a-l-aide-de-javascript","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/valider-google-recaptcha-a-l-aide-de-javascript\/","title":{"rendered":"Valider Google reCAPTCHA \u00e0 l’aide de JavaScript"},"content":{"rendered":"

Google reCAPTCHA est un choix populaire pour prot\u00e9ger les formulaires du site Web contre le spam et les robots. Le reCAPTCHA demande aux utilisateurs de r\u00e9soudre des \u00e9nigmes simples qui sont faciles pour les humains mais difficiles pour les bots. En cons\u00e9quence, on peut \u00e9conomiser de l’espace sur le serveur en \u00e9vitant d’ins\u00e9rer des enregistrements de spam inutiles dans la base de donn\u00e9es. Cela nous fait \u00e9galement gagner du temps car nous ne recevons jamais de commentaires de spam dans notre bo\u00eete aux lettres.<\/p>\n

Lorsque nous ajoutons un Google reCAPTCHA dans des formulaires de site Web, nous devons \u00e9crire un morceau de code pour valider la r\u00e9ponse de reCAPTCHA. Si une r\u00e9ponse est valide, seul notre formulaire doit continuer.<\/p>\n

Il existe 2 fa\u00e7ons de valider la r\u00e9ponse, l’une c\u00f4t\u00e9 serveur et l’autre c\u00f4t\u00e9 client. Dans cet article, nous nous concentrons sur la validation c\u00f4t\u00e9 client et nous \u00e9tudions donc comment valider Google reCAPTCHA \u00e0 l’aide de JavaScript.<\/p>\n

Si vous recherchez une validation c\u00f4t\u00e9 serveur, veuillez vous reporter \u00e0 l’article Utilisation de Google reCAPTCHA sur vos formulaires de site Web avec PHP<\/a>.<\/p>\n

Enregistrez le site et obtenez des cl\u00e9s API<\/h3>\n

Pour commencer, vous devez enregistrer votre site ici – <\/a>https:\/\/www.google.com\/recaptcha\/admin<\/a>.<\/p>\n

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

Choisissez l’option ‘reCAPTCHA v2’ qui donne une case \u00e0 cocher "Je ne suis pas un robot".<\/p>\n

Une fois que vous avez entr\u00e9 les d\u00e9tails dans le formulaire ci-dessus, vous obtiendrez votre cl\u00e9 de site et votre cl\u00e9 secr\u00e8te. Comme nous traitons de la validation c\u00f4t\u00e9 client, nous n’avons besoin que d’une cl\u00e9 de site.<\/p>\n

Si vous souhaitez le tester sur un serveur local, ajoutez "localhost" en tant que domaine.<\/p>\n

Valider Google reCAPTCHA \u00e0 l’aide de JavaScript<\/h3>\n

Tout d’abord, vous devez ajouter Google reCAPTCHA sur votre formulaire. Vous pouvez le faire en utilisant le code ci-dessous.<\/p>\n

<form method=\"post\" onsubmit=\"return submitUserForm();\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"g-recaptcha\" data-sitekey=\"YOUR_SITE_KEY\" data-callback=\"verifyCaptcha\"><\/div>\n\u00a0\u00a0\u00a0\u00a0<div id=\"g-recaptcha-error\"><\/div>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" value=\"Submit\" \/>\n<\/form>\n<script src='https:\/\/www.google.com\/recaptcha\/api.js'><\/script><\/code><\/pre>\n
Dans le code ci-dessus, j’utilise onsubmit<\/code>event. En effet, lorsque l’utilisateur soumet un formulaire, nous devons v\u00e9rifier la r\u00e9ponse reCAPTCHA, puis lui permettre de soumettre un formulaire.<\/p>\n
Ensuite, j’ai ajout\u00e9 un ‘verifyCaptcha’ comme nom d’une fonction de rappel \u00e0 l’attribut ‘data-callback’. J’utiliserai cette m\u00e9thode de rappel pour supprimer le message d’erreur une fois la validation pass\u00e9e. J’ai \u00e9galement ajout\u00e9 un div avec un identifiant ‘g-recaptcha-error’ pour afficher le message d’erreur.<\/p>\n
Vous devez remplacer l’espace r\u00e9serv\u00e9 \u00ab\u00a0YOUR_SITE_KEY\u00a0\u00bb par votre cl\u00e9 de site r\u00e9elle.<\/p>\n
Enfin, \u00e9crivons un code JavaScript qui g\u00e8re la r\u00e9ponse reCAPTCHA. Et en fonction de la r\u00e9ponse, il affiche un message d’erreur ou permet au formulaire de continuer.<\/p>\n
<script>\nfunction submitUserForm() {\n\u00a0\u00a0\u00a0\u00a0var response = grecaptcha.getResponse();\n\u00a0\u00a0\u00a0\u00a0if(response.length == 0) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.getElementById('g-recaptcha-error').innerHTML = '<span style=\"color:red;\">This field is required.<\/span>';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return false;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0return true;\n}\n\u00a0\nfunction verifyCaptcha() {\n\u00a0\u00a0\u00a0\u00a0document.getElementById('g-recaptcha-error').innerHTML = '';\n}\n<\/script><\/code><\/pre>\n
Dans la m\u00e9thode, submitUserForm<\/code>nous obtenons la r\u00e9ponse reCAPTCHA en utilisant grecaptcha.getResponse()<\/code>. Il s’agit d’une fonction int\u00e9gr\u00e9e fournie par le service Google reCAPTCHA.<\/p>\n
Si la r\u00e9ponse n’est pas valide, elle renvoie 0. Cela signifie qu’un utilisateur n’a pas encore valid\u00e9 reCAPTCHA. Et donc, il renvoie une erreur et s’ajoute au div qui a l’ID ‘g-recaptcha-error’.<\/p>\n
Lorsque Google reCAPTCHA envoie une r\u00e9ponse valide, je renvoie une valeur vraie, ce qui permet au formulaire de continuer.<\/p>\n
La verifyCaptcha<\/code>m\u00e9thode re\u00e7oit un appel lorsque vous r\u00e9solvez toutes les \u00e9nigmes de reCAPTCHA. Nous supprimons ensuite le message d’erreur une fois qu’un puzzle est r\u00e9solu.<\/p>\n
Notre code final est :<\/p>\n
<form method=\"post\" onsubmit=\"return submitUserForm();\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"g-recaptcha\" data-sitekey=\"YOUR_SITE_KEY\" data-callback=\"verifyCaptcha\"><\/div>\n\u00a0\u00a0\u00a0\u00a0<div id=\"g-recaptcha-error\"><\/div>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" value=\"Submit\" \/>\n<\/form>\n<script src='https:\/\/www.google.com\/recaptcha\/api.js'><\/script>\n<script>\nfunction submitUserForm() {\n\u00a0\u00a0\u00a0\u00a0var response = grecaptcha.getResponse();\n\u00a0\u00a0\u00a0\u00a0if(response.length == 0) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.getElementById('g-recaptcha-error').innerHTML = '<span style=\"color:red;\">This field is required.<\/span>';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return false;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0return true;\n}\n\u00a0\nfunction verifyCaptcha() {\n\u00a0\u00a0\u00a0\u00a0document.getElementById('g-recaptcha-error').innerHTML = '';\n}\n<\/script><\/code><\/pre>\n
J’esp\u00e8re que vous comprenez comment valider Google reCAPTCHA \u00e0 l’aide de JavaScript. Essayez-le dans votre projet et partagez vos r\u00e9flexions ou suggestions dans la section commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n