Intégrez Google reCAPTCHA avec PHP 8

Cet article fait partie du guide Tutoriel Complet pour Apprendre PHP 8 à Travers des Projets Pratiques, partie 28 sur 28.

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.

Table de matière

Enregistrement et Configuration sur Google reCAPTCHA en PHP 8 Création des Bases du Formulaire avec reCAPTCHA en PHP 8 Intégration des Codes Front-end de reCAPTCHA en PHP 8 Récupération du Token de Google reCAPTCHA en PHP 8 Utilisation du Token de reCAPTCHA pour la Vérification Configuration Backend de reCAPTCHA en PHP 8 Décodage des Réponses de Google reCAPTCHA en PHP 8 Validation des Réponses de Google reCAPTCHA Exercice : Créer le Code HTML du Formulaire avec reCAPTCHA en PHP 8 Exercice : Personnalisation du Style du Formulaire en PHP 8 Exercice : Création de la Base de Données pour le Formulaire en PHP 8 Configuration de la Classe PDO en PHP pour le Formulaire Exercice : Traitement du Formulaire en PHP 8 Exercice : Insertion des Données du Formulaire en Base de Données en PHP 8 Exercice : Intégration de reCAPTCHA sur le Formulaire en PHP 8 Analyser les Limitations du Token de reCAPTCHA Résoudre les Problèmes de Validité du Token de reCAPTCHA Conclusion

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.

Comment fonctionne le flux reCAPTCHA ?

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

				
					<!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nous contacteer</title>
<style>
.box{
width: 400px;
border : 1px solid #ccc;
padding: 25px;
margin: 50px auto;
text-align: center;
}
</style>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https://blog.alphorm.com/wp-content/plugins/jet-tabs/assets/images/spinner-32.svg');}.rll-youtube-player .play{--wpr-bg-67ea198c-7828-4730-9af3-523d2eb9ef26: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".jet-image-accordion__item-loader span","style":".jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg');}","hash":"b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-67ea198c-7828-4730-9af3-523d2eb9ef26: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"67ea198c-7828-4730-9af3-523d2eb9ef26","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<div class="box">
<?php
if(isset($_POST['valider'])){
echo "Formumaire envoyer";
}
?>
<form action="traitement.php" method="POST">
<input type="text" name="pseudo" id=""placeholder="Pseudo">
<input type="submit" value="Valider" name="valider">
</form>
</div>
</div>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"a81c7a2f0f","url":"https:\/\/blog.alphorm.com\/integrer-google-recaptcha-avec-php-8","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>

Résultat affiché :

Formation PHP 8 : Introduction à la Sécurité

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.

				
					<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>

Apres en va ajouter le code suivant de javascript

				
					<script>
grecaptcha.ready(function() {
grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) {
consol.log(token);
// Add your logic to submit to your backend server here.
});
});
</script>

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

Lorsque l’utilisateur interagit avec le widget reCAPTCHA et qu’il réussit le test, Google retourne un token qui est envoyé en tant que partie des données de soumission du formulaire. Ce token est utilisé côté serveur pour vérifier la validité de la réponse 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

				
					<input type="hidden" name="g-token" id="g-token">

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.

				
					<?php
if(isset($_POST['valider'])){
if(empty($_POST['g-token'])){
echo"Tu es un robot";
}else{
echo"Tu es un humain";
}
}
?>

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.

				
					<?php
if(isset($_POST['valider'])){
if(empty($_POST['g-token'])){
echo"Tu es un robot";
}else{
$scret="6LdVqJ0UAAAAADfXq0w2nLsX2N2b0Lg8WQy5bq2e";
$repons=$_POST['g-token'];
$remoteip=$_SERVER['REMOTE_ADDR'];
$url="https://www.google.com/recaptcha/api/siteverify?secret=$scret&response=$repons&remoteip=$remoteip";
}
}
?>

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.

Lorsque vous travaillez avec Google reCAPTCHA, il est souvent préférable d’utiliser la bibliothèque cURL pour envoyer la requête de vérification plutôt que file_get_contents(), surtout si allow_url_fopen est désactivé dans la configuration PHP. cURL est plus flexible, gère mieux les erreurs, et est largement supporté.

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

				
					<?php
if(isset($_POST['valider'])){
if(empty($_POST['g-token'])){
echo"Tu es un robot";
}else{
$scret="6LdVqJ0UAAAAADfXq0w2nLsX2N2b0Lg8WQy5bq2e";
$reponse=$_POST['g-token'];
$remoteip=$_SERVER['REMOTE_ADDR'];
$url="https://www.google.com/recaptcha/api/siteverify?secret=$scret&response=$reponse&remoteip=$remoteip";
$req=file_get_contents($url);
$reponse=json_decode($req);
echo"<pre>";
print_r($reponse);
echo"</pre>";
}
}
?>

Affichage des Résultats

pour améliorer la sécurité et la flexibilité, envisagez d’utiliser cURL pour envoyer la requête à l’API Google au lieu de file_get_contents(). cURL offre une meilleure gestion des erreurs et des délais d’attente, ce qui est particulièrement utile dans des environnements de production.

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

				
					<?php
if(isset($_POST['valider'])){
if(empty($_POST['g-token'])){
echo"Tu es un robot";
}else{
$scret="6LdVqJ0UAAAAADfXq0w2nLsX2N2b0Lg8WQy5bq2e";
$reponse=$_POST['g-token'];
$remoteip=$_SERVER['REMOTE_ADDR'];
$url="https://www.google.com/recaptcha/api/siteverify?secret=$scret&response=$repons&remoteip=$remoteip";
$req=file_get_contents($url);
$reponse=json_decode($req);
echo"<pre>";
print_r($reponse->success);
echo"</pre>";
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

PHP 8

Maîtrise Complète de PHP 8 : De l'Initiation à l'Expertise en Architecture MVC

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 :

				
					<!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nous contacteer</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https://blog.alphorm.com/wp-content/plugins/jet-tabs/assets/images/spinner-32.svg');}.rll-youtube-player .play{--wpr-bg-67ea198c-7828-4730-9af3-523d2eb9ef26: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".jet-image-accordion__item-loader span","style":".jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg');}","hash":"b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-67ea198c-7828-4730-9af3-523d2eb9ef26: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"67ea198c-7828-4730-9af3-523d2eb9ef26","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<section>
<h1>Nous contacter</h1>
<form action="traitement.php" method="post">
<label for="nom">Nom</label>
<input type="text" name="nom" id="nom" placeholder="Votre nom">
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Votre email">
<label for="message">Message</label>
<textarea name="message" id="message" placeholder="Votre message"></textarea>
<footer>
<input type="submit" name="soumettre" value="Soumettre">
</footer>
</section>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"a81c7a2f0f","url":"https:\/\/blog.alphorm.com\/integrer-google-recaptcha-avec-php-8","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>

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

phpMyAdmin est un outil populaire pour la gestion des bases de données MySQL/MariaDB via une interface web. Il est largement utilisé pour créer et gérer des bases de données, des tables, des champs, etc.

É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

				
					<?php
$dsn='mysql:host=localhost;dbname=alphorm,charset=utf8';
$user='root';
$pass='';
try{
$cnx=new PDO($dsn,$user,$pass);
}catch(PDOException $e){
echo 'error de connexion'.$e->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 :

				
					<?php
include('cnx/cnx.php');
if(isset($_POST['soumettre'])){
$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="Insertion dans la BDD";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traitement</title>
<link rel="stylesheet" href="style.css">
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https://blog.alphorm.com/wp-content/plugins/jet-tabs/assets/images/spinner-32.svg');}.rll-youtube-player .play{--wpr-bg-67ea198c-7828-4730-9af3-523d2eb9ef26: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".jet-image-accordion__item-loader span","style":".jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg');}","hash":"b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-67ea198c-7828-4730-9af3-523d2eb9ef26: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"67ea198c-7828-4730-9af3-523d2eb9ef26","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
</div>
<section>
<h1>Traitement</h1>
<p><?php if(isset($msg)) {echo $msg;}?> </p>
</section>
</div>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"a81c7a2f0f","url":"https:\/\/blog.alphorm.com\/integrer-google-recaptcha-avec-php-8","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>

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

				
					<?php
include('cnx/cnx.php');
if(isset($_POST['soumettre'])){
$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 été envoyé";
$sql="INSERT INTO contacte(nom,email,message) VALUES(:nom,:email,:message)";
$query=$cnx->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

				
					<?php
include('cnx/cnx.php');
if(isset($_POST['soumettre'])){
if(empty($_POST['g-token'])){
header('Location: index.php');
}else{
$scret="6LdVqJ0UAAAAADfXq0w2nLsX2N2b0Lg8WQy5bq2e";
$reponse=$_POST['g-token'];
$remoteip=$_SERVER['REMOTE_ADDR'];
$url="https://www.google.com/recaptcha/api/siteverify?secret=$scret&response=$repons&remoteip=$remoteip";
$req=file_get_contents($url);
$reponse=json_decode($req);
echo"<pre>";
print_r($reponse->success);
echo"</pre>";
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 été envoyé";
$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

				
					<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) {
consol.log(token);
// Add your logic to submit to your backend server here.
});
});
Aussi en ajoute cet input
<input type="hidden" name="g-token" id="g-token">

Résultat affiché :

Analyser les Limitations du Token de reCAPTCHA

Dans cette section, vous allez explorer les limitations du token reçu par Google reCAPTCHA. Il est essentiel de comprendre ces contraintes pour mieux sécuriser votre application et savoir comment réagir en cas d’éventuels abus ou erreurs liés à la validation du token.

Voici la modification de code

				
					<?php
include('cnx/cnx.php');
if(isset($_POST['soumettre'])){
if(empty($_POST['g-token'])){
header('Location: index.php');
}else{
$scret="6LdVqJ0UAAAAADfXq0w2nLsX2N2b0Lg8WQy5bq2e";
$reponse=$_POST['g-token'];
$remoteip=$_SERVER['REMOTE_ADDR'];
$url="https://www.google.com/recaptcha/api/siteverify?secret=$scret&response=$repons&remoteip=$remoteip";
$req=file_get_contents($url);
$reponse=json_decode($req);
echo"<pre>";
print_r($reponse->success);
echo"</pre>";
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 été envoyé";
$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{
$msg='Time out';
}
}
}
?>

Résultat affiché

comment résoudre limitions du token reçu?

Résoudre les Problèmes de Validité du Token de reCAPTCHA

Dans cette section, vous allez découvrir des stratégies pour surmonter les limitations du token reCAPTCHA. Vous apprendrez à renforcer la validation du token et à implémenter des solutions alternatives pour garantir une sécurité optimale, même en cas de restrictions ou de défaillances liées au reCAPTCHA.

Modifier le script de javascript dans le fichier index.php

				
					<script>
let tk=()=>{
grecaptcha.ready(function() {
grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) {
consol.log(token);
// Add your logic to submit to your backend server here.
});
});
} tk();
setInterval(() => {
tk();
}, 1000);
</script>

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.