Protéger vos formulaires PHP des soumissions automatisées est crucial pour éviter les attaques de spam et les risques de sécurité.
Sans solution adaptée, votre site est vulnérable aux bots, compromettant la sécurité et la fiabilité de vos données.
Intégrez Google reCAPTCHA dans vos formulaires PHP pour distinguer les utilisateurs humains des robots. Ce guide vous montre étape par étape comment mettre en place reCAPTCHA et renforcer la sécurité de votre site web, tout en assurant une expérience utilisateur fluide.
Enregistrement et Configuration sur Google reCAPTCHA en PHP 8
Qu’est-ce que reCAPTCHA ?
reCAPTCHA est un service gratuit qui protège votre site Web contre le spam et les abus. reCAPTCHA est un système de type CAPTCHA conçu pour établir qu’un utilisateur d’ordinateur est un humain.
Pour vous déclarer auprès de Google reCAPTCHA, suivez ces étapes :
Créer un compte Google reCAPTCHA
Si vous n’avez pas encore de compte Google, commencez par en créer un. Ensuite, connectez-vous à Google reCAPTCHA avec votre compte Google en suivant ce lien : Google reCAPTCHA.
Accéder à la Console d’Administration
- Une fois connecté, cliquez sur Admin Console (console d’administration) en haut à droite de la page.
- Vous serez redirigé vers la page de gestion de reCAPTCHA, où vous pouvez configurer et gérer vos sites.
Ajouter un Nouveau Site
- Cliquez sur le bouton + (plus) ou sur Add a new site pour ajouter un nouveau site.
- Renseignez le label pour identifier votre site. Ce nom est uniquement pour votre référence.
- Choisissez le type de reCAPTCHA que vous souhaitez utiliser. Les options incluent :
- reCAPTCHA v2 : Sélectionnez cette option si vous voulez utiliser le traditionnel « Je ne suis pas un robot » (Checkbox).
- reCAPTCHA v3 : Ce type fonctionne en arrière-plan sans interaction de l’utilisateur, en attribuant un score basé sur le comportement de l’utilisateur.
- reCAPTCHA Invisible : Cette option fonctionne comme reCAPTCHA v2 mais sans nécessiter de clic de l’utilisateur.
- Saisissez-le(s) nom(s) de domaine(s) pour lesquels vous souhaitez activer reCAPTCHA. Assurez-vous que ces domaines correspondent à ceux sur lesquels vous déploierez votre formulaire.
- Ajoutez les adresses e-mail des propriétaires ou des administrateurs qui auront accès à ce site dans la console reCAPTCHA.
Accepter les Conditions d’Utilisation
- Cochez la case pour accepter les conditions d’utilisation de Google reCAPTCHA.
- Si vous souhaitez recevoir des alertes en cas de trafic suspect sur votre site, vous pouvez également cocher l’option correspondante.
Obtenir les Clés de reCAPTCHA
- Après avoir soumis le formulaire, Google vous fournira deux clés :
- Clé de site (Site Key) : Utilisée dans le code HTML pour afficher le reCAPTCHA sur votre site.
- Clé secrète (Secret Key) : Utilisée côté serveur pour vérifier si la soumission du formulaire est valide.
Intégrer les Clés dans votre Site
Utilisez la clé de site dans le widget reCAPTCHA que vous ajouterez à votre formulaire HTML, et la clé secrète pour valider les réponses reCAPTCHA dans votre script côté serveur.
Tester et Configurer
Testez votre implémentation sur le site de développement avant de la déployer en production pour vous assurer que tout fonctionne correctement.
En suivant ces étapes, vous serez correctement inscrit et prêt à intégrer Google reCAPTCHA à vos projets web.
Création des Bases du Formulaire avec reCAPTCHA en PHP 8
Pour mettre en place les bases d’un formulaire avec l’intégration de Google reCAPTCHA, vous pouvez suivre les étapes suivantes :
- Code de formulaire HTML
Nous contacteer
- Résultat affiché :
Intégration des Codes Front-end de reCAPTCHA en PHP 8
Pour intégrer Google reCAPTCHA dans votre formulaire existant, vous devez ajouter quelques éléments au code HTML. Voici les étapes pour mettre en place les codes front-end de Google reCAPTCHA :
- Ajouter l’API JavaScript de reCAPTCHA
Dans l’en-tête (<head>) de votre document HTML, vous devez inclure le script de l’API Google reCAPTCHA. Ce script permet de charger et d’afficher le widget reCAPTCHA sur votre page.
- Apres en va ajouter le code suivant de javascript
- Résultat affiche :
Récupération du Token de Google reCAPTCHA en PHP 8
Pour récupérer le token retourné par Google reCAPTCHA après la validation par l’utilisateur, vous devez procéder comme suit :
- Comprendre le Fonctionnement de reCAPTCHA
- Récupérer le Token dans le Formulaire
Le token reCAPTCHA est automatiquement ajouté au formulaire sous la forme d’un champ caché nommé g-token lorsque l’utilisateur valide le CAPTCHA. Vous n’avez donc pas besoin de faire quoi que ce soit de spécial pour le récupérer dans votre formulaire.
Dans le code précédemment en ajouter cette ligne
Apres en ajouter pour le code javascript le code suivant
document.getElementById('g-token').value = token;
Utilisation du Token de reCAPTCHA pour la Vérification
Pour exploiter correctement le token retourné par Google reCAPTCHA, vous devez utiliser ce token pour vérifier que l’utilisateur est bien un humain et non un robot. Voici comment vous pouvez ajuster et améliorer votre code pour exploiter le token :
- Récupérer et Vérifier le Token
Le code que vous avez fourni vérifie simplement si le token est vide ou non. Cependant, pour être certain que le token est valide et que l’utilisateur est effectivement un humain, vous devez envoyer ce token à l’API de vérification de Google reCAPTCHA.
- Résultat affiché
Cas 1 : token est existe
Cas 2 : Sinon le token est vide
Configuration Backend de reCAPTCHA en PHP 8
Pour installer et configurer le côté backend de Google reCAPTCHA, suivez les étapes ci-dessous. L’objectif est de vérifier le token reCAPTCHA sur le serveur après que l’utilisateur a validé le CAPTCHA côté client.
Étapes pour Installer le Côté Backend de Google reCAPTCHA
- Récupérer les Clés API de reCAPTCHA
- Clé de site (site key): Utilisée pour afficher le widget reCAPTCHA côté client.
- Clé secrète (secret key): Utilisée côté serveur pour vérifier la réponse reCAPTCHA.
Ces clés peuvent être obtenues en vous connectant à Google reCAPTCHA Admin Console.
- Créer un Script PHP pour Vérifier la Réponse reCAPTCHA
Vous allez utiliser la clé secrète pour vérifier que le token reCAPTCHA est valide. Le token est envoyé à l’API de vérification de Google pour confirmation.
Explication de code :
- isset($_POST[‘valider’]) : Cette condition vérifie si le bouton de soumission du formulaire nommé valider a été cliqué. Si c’est le cas, le code à l’intérieur de ce bloc sera exécuté.
- empty($_POST[‘g-token’]) : Ici, le script vérifie si la valeur de g-token (qui est censée contenir le token généré par reCAPTCHA) est vide.
- echo « Tu es un robot »; : Si le token est vide, le script suppose que l’utilisateur n’a pas validé le reCAPTCHA et affiche « Tu es un robot ». Cela signifie que l’utilisateur pourrait être un robot ou qu’il n’a pas complété le reCAPTCHA.
- $scret : Cette variable contient la clé secrète de Google reCAPTCHA (dans cet exemple, c’est une valeur fictive). Cette clé est utilisée pour authentifier la requête de vérification du reCAPTCHA auprès de l’API de Google.
- $repons : Cette variable récupère la valeur du token reCAPTCHA envoyé par le formulaire. Ce token a été généré lorsque l’utilisateur a validé le reCAPTCHA.
- $remoteip : Cette variable récupère l’adresse IP de l’utilisateur qui soumet le formulaire. L’adresse IP est envoyée avec la requête de vérification pour une validation supplémentaire.
- $url : Cette variable construit l’URL complète qui sera utilisée pour vérifier le token reCAPTCHA auprès de Google. Elle contient :
- secret=$scret : La clé secrète pour authentifier la requête.
- response=$repons : Le token généré par reCAPTCHA que vous devez vérifier.
- remoteip=$remoteip : L’adresse IP de l’utilisateur qui a soumis le formulaire.
Décodage des Réponses de Google reCAPTCHA en PHP 8
Pour vous assurer que votre formulaire est bien protégé contre les soumissions automatisées, il est crucial que vous vérifiiez correctement le token généré par Google reCAPTCHA côté serveur. Dans cette section, vous allez apprendre à décoder et analyser la réponse de Google reCAPTCHA afin de valider l’authenticité de l’utilisateur.
- Modifier le script précédemment par le suivant
";
print_r($reponse);
echo"
";
}
}
?>
- Affichage des Résultats
Validation des Réponses de Google reCAPTCHA
Dans cette section, vous allez tester le retour de Google reCAPTCHA. Premièrement, vous devrez modifier le script PHP pour traiter correctement la réponse de reCAPTCHA.
- Voici le script PHP modifié pour vérifier et décoder le token reCAPTCHA retourné par Google
";
print_r($reponse->success);
echo"
";
if($reponse->success){
echo"Validation ok";
}else{
echo"Validatio ko !";
}
}
}
?>
- Résultat affiché :
Cas 1 : réponse succès
Cas 2 : réponse échouée
Exercice : Créer le Code HTML du Formulaire avec reCAPTCHA en PHP 8
Pour cet exercice, vous allez créer un formulaire HTML intégrant Google reCAPTCHA. L’objectif est de préparer un formulaire simple où les utilisateurs peuvent entrer des informations, tout en utilisant reCAPTCHA pour vérifier qu’ils ne sont pas des robots.
- Voici le code HTML complet pour votre formulaire avec l’intégration de Google reCAPTCHA :
Nous contacteer
Nous contacter
- Résultat affiché :
Exercice : Personnalisation du Style du Formulaire en PHP 8
Maintenant, nous allons mettre en forme le style du formulaire.
- Voici le code complet en CSS
body{
background-color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
section {
background-color: #f3f3f3;
width: 450px;
padding: 15px;
border-radius: 15px;
box-sizing: border-box;
}
section h1{
font-family: 'Times New Roman', Times, serif;
color: #333;
font-size: 36px;
margin: 0;
padding: 0;
}
section p{
font-family: 'Times New Roman', Times, serif;
font-size: 12px;
color:#333;
margin: 0;
}
section input[type="text"],section input[type="email"], section textarea{
display: block;
width: 85%;
margin: 20px auto;
padding: 15px;
border: 1px solid #c3c3c3;
background-color: #e4e4e4;
border-radius: 5px;
outline: none;
transition: 0.5s;
}
textarea{
height: 100px;
}
section input[type="text"]:hover,section input[type="email"] :hover, section textarea:hover{
background-color: #fff;
background-color: #000;
}
section footer{
background-color: #d3dfdf;
text-align: center;
padding: 30px 0;
border-radius:5px;
}
section input[type="submit"]{
background-color: #000;
color: #fff;
border: none;
height: 50px;
width: 150px;
border-radius: 50px;
font-size:20px;
cursor: pointer;
outline: none;
transition: 0.5s;
}
section input[type="submit"]:hover{
background-color: #a00;
}
- Résultat affiché :
Exercice : Création de la Base de Données pour le Formulaire en PHP 8
Pour assurer le bon fonctionnement de votre application, il est crucial de créer une base de données pour stocker les informations. Dans cette section, vous allez créer une base de données nommée alphorm et définir une table contacte avec les colonnes suivantes : ContacteID, nom, email et message.
Étape 1 : Créer la base de données
Dans phpMyAdmin, créez une nouvelle base de données appelée alphorm :
- Connectez-vous à phpMyAdmin.
- Cliquez sur l’onglet Bases de données.
- Saisissez le nom de la base de données : alphorm.
- Cliquez sur Créer
Étape 2 : Créer la table user
Une fois la base de données créée, vous allez créer une table appelée user avec les champs suivants :
- contacteID : Identifiant unique de l’utilisateur (clé primaire).
- nom : Nom d’utilisateur, doit être unique.
- email :Email utilisateur .
- message : message entrer par utilisateur
Procédure :
- Dans phpMyAdmin, sélectionnez la base de données alphorm.
- Cliquez sur Nouvelle table et nommez-la contacte .
- Ajoutez les champs suivants :
contacteID : type INT, cochez A_I (Auto-Increment), cochez PRIMARY (clé primaire).
nom : type VARCHAR(50), cochez UNIQUE (unique).
email : type VARCHAR(50).
message : type VARCHAR(50).
- Cliquez sur Enregistrer.
Résultat final :
Configuration de la Classe PDO en PHP pour le Formulaire
Dans cette section, vous allez créer un dossier nommé cnx, qui contiendra un fichier de connexion. Vous y mettrez le code suivant pour établir la connexion à la base de données :
- Code de fichier cnx.php
getMessage();
}
Exercice : Traitement du Formulaire en PHP 8
Maintenant, nous allons effectuer le traitement du formulaire. Vous allez créer un fichier appelé traitement.php, puis y insérer ce code :
Traitement
Traitement
Exercice : Insertion des Données du Formulaire en Base de Données en PHP 8
Dans cette section, vous allez apprendre à insérer les données soumises par le formulaire dans une base de données. Vous mettrez en pratique vos connaissances en PHP et MySQL pour traiter les informations de manière sécurisée et efficace.
- Voici le code de script PHP de fichier traitment.php
prepare($sql);
$query->execute(array('nom'=>$nom,'email'=>$email,'message'=>$message));
}
}
?>
- Résultat affiché
- Vérification dans la base de données
Exercice : Intégration de reCAPTCHA sur le Formulaire en PHP 8
Dans cette section, vous allez intégrer Google reCAPTCHA à votre formulaire afin de protéger votre application contre les soumissions automatisées. Vous allez suivre les étapes pour ajouter et configurer reCAPTCHA, garantissant ainsi une sécurité renforcée pour votre site.
- Voici le code modifier de fichier traitment.php
";
print_r($reponse->success);
echo"
";
if($reponse->success){
$nom =strip_tags($_POST['nom']);
$email = strip_tags($_POST['email']);
$message = strip_tags($_POST['message']);
if(empty($nom) || empty($email) || empty($message)){
echo 'Veuillez remplir tous les champs';
}else{
$msg="Votre message a bien été envoyé";
$sql="INSERT INTO contacte(nom,email,message) VALUES(:nom,:email,:message)";
$query=$cnx->prepare($sql);
$query->execute(array('nom'=>$nom,'email'=>$email,'message'=>$message));
}
}else{
header('Location: index.php');
}
}
}
?>
- Puis dans le fichier index en ajoute ce code
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui. Découvrez des cours variés pour tous les niveaux !
Conclusion
Intégrer Google reCAPTCHA avec PHP 8 sécurise vos formulaires contre les bots et les soumissions automatisées. En suivant les étapes de configuration et de validation expliquées, vous protégez efficacement votre site tout en offrant une meilleure expérience utilisateur. Utiliser reCAPTCHA avec PHP 8 est indispensable pour tout développeur souhaitant renforcer la sécurité de ses applications web.