Comment protéger votre site web contre les pourriels avec Google reCAPTCHA V3 ou V2 [PHP + Extension WordPress]

Comment protéger votre site web contre les pourriels avec Google reCAPTCHA V3 ou V2 [PHP + Extension WordPress]

À travers cet article, nous allons voir comment utiliser Google reCAPTCHA V3 et V2 pour protéger un site web contre les pourriels. Le but de notre article sera de voir comment ajouter un captcha sur un formulaire. Nous allons également voir comment le Captcha V3 fonctionne. Enfin, nous allons discuter des types de captcha et de pourquoi V3 est préférable aux autres versions.

Prérequis pour la version tutoriel de l’article

  • Pour tout le monde  – Si vous êtes un lecteur curieux, vous pouvez lire cet article pour avoir des connaissances générales. Nous avons une extension gratuite disponible pour les sites web WordPress que vous pouvez télécharger sous wordpress.org
  • Une option pour les développeurs – Cependant, si vous êtes développeur et aimerez appliquer nos conseils sur votre projet, vous devez avoir les

Un développeur aura besoin de:

  • Connaissances de base en HTML.
  • Quelques notions en PHP.
  • Connaitre JavaScript pourrait être un plus.

Protéger votre site web contre les pourriels avec Google reCAPTCHA V3 en seulement 3 étapes

Pour être en mesure de protéger votre site web avec Google reCAPTCHA V3, vous n’avez que peu d’étapes à suivre. Nous allons dans cette partie voir les différentes étapes à suivre.

Acceuil Captcha V3

Étape 1 – Enregistrement de son site web sur la plateforme Google reCAPTCHA

Pour être capable d’utiliser le Google reCAPTCHA V3, vous devez avant tout enregistrer votre site sur la plateforme Google reCAPTCHA. Veuillez noter que pour enregistrer un site, il devrait être publié sur le net. Voici les étapes à suivre :

  • Visitez le site Google reCAPTCHA – et cliquez sur console admin. Le site va vous rediriger vers la page de connexion.
  • Si vous avez un compte Gmail ou G-Suite, vous devez vous connecter pour accéder au panneau de gestion des Captchas. Dans le cas contrairement, vous devez créer un compte Gmail.
  • Cliquez sur le plus dans le coin haut-droit du panneau d’administrateur et un formulaire d’enregistrement de site web apparaitra.
  • Via ce formulaire, vous devez inscrire le libellé de votre site, le type de reCAPTCHA et les noms de domaine (
  • Après avoir sauvegardé le formulaire, la plateforme va générer une clé du site et une clé secrète. Copiez les clés pour les étapes suivantes.

captcha V3 - formulaire

Étape 2 – Ajout des paramètres sur le formulaire et gestion des données côté client.

Nous allons utiliser un formulaire de contacts HTML pour illustration. Veuillez noter que vous pourriez être en mesure d’ajouter le catcha sur n’importe quelque type de formulaire.

Ajout de champs caché sur le formulaire de contacts

Sur notre formulaire de contact HTML, nous allons ajouter un champ caché appelé « reponsecaptcha ». Ce champ a pour but de détecter si l’utilisateur est un humain ou robot.

Voici à quoi pourrait ressembler le code du formulaire initial.


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Envoyer un message</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>

<div class="container">
  <h2>Send an SMS</h2>
  <form action="envoyer.php" method="POST">
    <div class="form-group">
      <label for="email">Nom et Prénom</label>
      <input type="tel" class="form-control"  placeholder="Nom et Prénom" name="firstlastname">
    </div>
    <div class="form-group">
      <label for="pwd">Email</label>
      <input type="email" class="form-control"  placeholder="Adresse Courriel" name="youremail">
    </div>
    <div class="form-group">
      <label>
         Votre Message
      </label>
      <textarea  class="form-control" placeholder="your message" name="yourmessage"></textarea>
    </div>
    <button type="submit" class="btn btn-primary form-control">Envoyer le message</button>
  </form>
</div>
</body>
</html>

Code 1 – Code initial sans le champs de captcha

Après ajout du champ caché et des autres paramètres, on aura un formulaire semblable à celui ci-dessous


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Envoyer un message</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>

<div class="container">
  <h2>Send an SMS</h2>
  <form action="envoyer.php" method="POST">
    <div class="form-group">
      <label for="email">Nom et Prénom</label>
      <input type="tel" class="form-control"  placeholder="Nom et Prénom" name="firstlastname">
    </div>
    <div class="form-group">
      <label for="pwd">Email</label>
      <input type="email" class="form-control"  placeholder="Adresse Courriel" name="youremail">
    </div>
    <div class="form-group">
      <label>
         Votre Message
      </label>
      <textarea  class="form-control" placeholder="your message" name="yourmessage"></textarea>
    </div>
     <input type="hidden" name="reponsecaptcha" id="recaptcha">

    <button type="submit" class="btn btn-primary form-control" name="envoie">Envoyer le message</button>
  </form>
</div>
<script src="https://www.google.com/recaptcha/api.js?render=LA_CLE_DE_VOTRE_SITE"></script>
    <script>
        grecaptcha.ready(function () {
            grecaptcha.execute('LA_CLE_DE_VOTRE_SITE', { action: 'contact' }).then(function (token) {
                var recaptchaResponse = document.getElementById('recaptcha');
                recaptchaResponse.value = token;
            });
        });
    </script>
</body>
</html>

Code 2 – Code final avec le champs de captcha v3

Commentaires du code

  • Dans l’éventualité où vous prêtez attention au Code 1 et Code 2, vous allez vous rendre compte que nous avons ajouté un champ caché à la ligne 28 du code 2. Nous avons également ajouté du code JavaScript depuis la ligne 33.
  • Pour activer le reCAPTCHA V3 sur votre site, vous devez remplacer LA_CLE_DE_VOTRE_SITE par la clé obtenue à l’étape 1.
  • Sur la ligne 36, vous allez remarquer un paramètre appelé « action : ». Vous pouvez faire varier ce paramètre au regard de vos objectifs. L’action correspond au nom de l’action que vous aimerez effectuer. Pour en savoir plus sur les différentes options qui s’offrent à vous, veuillez-vous référer à la documentation pour les différentes options.

Si vous avez été en mesure de suivre les consignes, vous devez voir apparaître sur votre site l’icône de Google reCAPTCHA V3 dans le coin droit et en bas de votre site. Cela signifie tout simplement que le captcha est activé ; mais pas encore fonctionnel. Nous regardons à l’étape suivante comment gérer l’envoie des informations.

Étape 3 – Gestion des informations côté serveur

Gérer les données côté serveur consistera tout simplement à :

  • récupérer les informations envoyées par l’utilisateur,
  • vérifier si son score est dessus de la moyenne (généralement 0.5)
  • Bloquer l’envoie du message lorsqu’il parait suspect.

Création du fichier de réception des données — envoyer.php

Nous allons créer un fichier PHP qui nous permettra de récupérer les données soumises par l’utilisateur. Le fichier pourrait avoir des informations semblables aux données ci-dessous :


<?php // Vérifier si le formulaire a été soumis
if(isset($_POST['envoie']) && isset($_POST['reponsecaptcha'])) {

    // Connecter à Google avec les clés
    $recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
    $recaptcha_secret = 'VOTRE_CLE_SECRETE';
    $recaptcha_response = $_POST['reponsecaptcha'];

    // Décoder les informations récupérées
    $recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
    $recaptcha = json_decode($recaptcha);

    // Effectuer une action en fonction du score obtenu.
    if ($recaptcha->score >= 0.5) {
        // Envoyer le couriel
    } else {
        // Vous n'avez pas vérifier si l'utilisateur est un humain ou un robot. Affichez le message d'erreur.
    }

} ?>

Remarque

Veuillez noter que le code PHP fait appel à la fonction file_get_contents qui n’est pas forcément supporté par tous les serveurs pour des raisons de sécurité ou tout autres raisons. Dans ce cas, une alternative pourrait être CURL qui est fortement recommandé. En remplaçant file_get_contents par CURL, le code ci-dessus deviendra :


<?php // Vérifier si le formulaire a été soumis
if(isset($_POST['envoie']) && isset($_POST['reponsecaptcha'])) {

    // Connecter à Google avec les clés
    $recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
    $recaptcha_secret = 'VOTRE_CLE_SECRETE';
    $recaptcha_response = $_POST['reponsecaptcha'];

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,$recaptcha_url);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query(array('secret' => $recaptcha_secret, 'response' => $recaptcha_response)));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$capcharespo = curl_exec($ch);
curl_close($ch);
$Reponse = json_decode($capcharespo, true);

    // Effectuer une action en fonction du score obtenu.
    if ($Reponse['score'] >= 0.5) {
        // Envoyer le couriel
    } else {
        // Vous n'avez pas vérifier si l'utilisateur est un humain ou un robot. Afficher le message d'erreur.
    }

} ?>

Autres alternatives –  utilisation de Google reCAPTCHA V2

La version 2 propose une case à coché pour valider si un utilisateur est un robot ou physiquement présent sur votre site web. Dans l’éventualité où vous préférez la version 2, Voici la procédure simple à suivre:

  1. Enregistrez votre site web
  2. Ajout des paramètres sur le formulaire et gestion des données côté client.
  3. Gestion des informations côté serveur

La principale différence entre Google reCAPTCHA V2 et V3 est au niveau de l’approche. En effet, le reCAPTCHA V2, effectue un test avec des images à identifier et la version 3 se sert d’un score.

Dans ce qui suit, nous allons voir les ajustements dans le code pour la version 2.

Ajouter un champ HTML contenant la clé publique dans votre formulaire HTML

Dans les lignes de code ci-dessous, nous illustrons à quoi devrait ressembler votre code.  Il est important de remarquer la ligne avec le code ci-dessous.

<div class="g-recaptcha" data-sitekey="VOTRE_CLE_PUBLIC"></div>

Votre code final devrait ressembler à ceci :

Ensuite inclure le JavaScript de Google qui se chargera des validations.

Remarque: Nous ne sommes plus revenus sur l’enregistrement du site ou la création des clés. Pour inclure vos clés du reCAPTCHA V2, vous devez sélectionner la version 2 lors de la création des clés.

Gestion des données côté serveur

Il n’y a pas une différence majeure dans la façon de gérer la version 2 et 3. Pour la version 3, vous devez définir un score acceptable pour votre site web. Par contre, pour la version 2, s’il y a échec, l’information retournée sera vide.

Une comparaison entre le reCAPTCHA V2 et V3

La reCAPTCHA v3, est la dernière version suggérée par Google pour assister dans la protection des sites web contre les courriels indésirables. Comme différence en comparaison à la version « Je ne suis pas un robot », il n’ajoute pas un champ supplémentaire sur le formulaire. Par conséquent, cela a pour effet de réduire la perte du nombre de clients qui pourraient ne pas réussir les tests.  La version « Je ne suis pas un robot » (V2) peut parfois être frustrant si le visiteur ne parvient pas à résoudre l’énigme pour une raison quelconque.

Par ailleurs, pour une cause quelconque, la version 3 peut se tromper dans l’évaluation du score. Dans le cas où cela devrait arriver, quelqu’un de vos visiteurs pourraient avoir de la difficulté à utiliser votre solution.

Une extension pour ajouter le reCAPTCHA V2 ou V3 sur votre site web WordPress

Nous avons publié l’extension WordPress – reCAPTCHA V2 et V3 pour la page de connexion et création de compte dans la banque des extensions de WordPress.org.

Comment utiliser notre extension ?

La première étape va consister à faire le téléchargement. Vous pourriez l’obtenir soit :

  1. Via le site WordPress.org.
  2. Dans votre panneau administrateur WordPress. — En recherchant dans l’onglet extension. (Prositeweb)

Avec la première option, vous allez apporter le code que vous pourriez manuellement installer dans l’onglet extension. Pour le second cas, après avoir trouvé l’extension, vous pouvez suivre la procédure normale d’installation pour compléter.

Configuration de l’extension.

L’extension vous donne la possibilité d’utiliser les deux versions 2 et la version 3.  Une fois que vous aurez complété avec l’installation, vous devez suivre les étapes suivantes :

  • Cliquez sur le lien Réglages – prositecaptcha
  • Dans l’écran de configuration, sélectionnez la version que vous souhaitez utiliser
  • Entrer les clés de votre reCAPTCHA

Si vous avez bien suivi l’étape de génération des clés, vous ne devriez avoir aucune erreur.

Conclusion

Google reCAPTCHA V3 et V2 sont des excellents moyens de protéger les sites web contre les pourriels. En effet, les pourriels ont des conséquences assez néfastes sur les sites internet. Ils peuvent détruire votre réputation tout en vous faisant perdre de l’argent. C’est donc capital d’utiliser les Captchas pour protéger votre site web ainsi que les données de vos clients.

Merci d’avoir pris le temps de lire notre publication. Si vous avez des questions, n’hésitez pas de nous laisser un message. Vous pouvez également nous contacter dans l’éventualité où vous avez besoin d’aide pour ajouter un captcha sur votre site web.

laissez un commentaire



Merci

Merci d'avoir contacté Prositeweb,
retourner à l'accueil

N'hésitez pas à nous contacter à tout moment pour toute demande concernant nos services. Contactez-nous

Merci