Dans ce tutoriel, nous allons apprendre à implémenter Google reCaptcha version 3 sur notre site web afin de protéger nos formulaires contre les spams.
Grâce à la v3 de reCAPTCHA, l’internaute n’a plus rien à faire pour s’authentifier, un progrès important depuis la V2.
- Nous allons passer en revu le côté client (frontend) de Google reCaptcha V3 que nous allons encoder à l'aide du JavaScript moderne.
- Ensuite, nous passerons en revu le côté serveur (backend) de reCaptcha V3 que nous allons encoder à l'aide du langage PHP.
- Une fois les connaissances acquises à propos de l'API Google reCaptcha, nous allons faire ensemble un exercice concret. Nous allons réaliser un formulaire de contact qui devra être protégé par google reCaptcha V3.
Si l'API nous détecte en qualité d'internaute et non de robot, alors nous pourrons insérer les données issues du formulaire de contact, dans une base de données MySQL.
Tous les fichiers de travail sont fournis !
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Pour aller plus loin :
Table des matières de cette formation JavaScript, Php (durée : 1h43m)
-
Cours
- Présentation de reCaptcha V3 00:06:50
- Mise en place d'un formulaire 00:06:29
- Récupération des codes frontend 00:07:50
- Un peu de JavaScript 00:04:10
- On teste la présence d'un token 00:04:06
- Communication avec reCaptcha V3 00:06:46
- On décode la réponse de l'API reCaptcha V3 00:05:39
- On teste le succès ou non de la réponse 00:03:44
-
Exercice
- Création du formulaire HTML 00:03:37
- Création de la Bdd 00:02:30
- Instanciation de PDO 00:03:42
- Traitement du formulaire 00:09:06
- Insertion des données 00:06:13
- Mise en place d'un style CSS 00:12:57
- Mise en place du reCaptacha 00:09:54
-
Le temps limité du token
- Explications 00:04:13
- Solution 00:05:30
-
Conclusion
- Conclusion 00:00:41
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Un grand merci Carl, grâce à ta pédagogie j'ai pu adapter la version 3 de reCaptcha dans un formulaire inscription (membres), car j'étais spammer par des inscriptions pirates.
-
Excellent tuto ! Cela fonctionne à merveille et merci pour tout les conseils et la méthodologie! Bonne continuation Carl !
-
La version v2 n'avait pas été concluante pour moi. Cette fois ça s'est bien passé, quoiqu'un peu perdue à partir du time-out :-) l'utilisation de la console du navigateur c'est pas mon truc. Un tuto bien développé et les explications sont claires et complètes. Merci Carl et à bientôt.
-
Avec quelles versions de logiciels ce tuto est-il compatible ?JavaScript , Php
-
Que contient le fichier source ?Le code source de l'exercice.
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés