Avez-vous de la difficulté à protéger votre site web contre les spams? Via cet article, nous allons voir comment utiliser Google Captcha V3 pour arriver à cette fin. Le but de notre article sera de voir comment ajouter un catcha sur un formulaire. Nous allons également voir comment le Captcha V3 fonctionne. Et enfin, nous allons discuter des types de catcha et de pourquoi V3 est préférable aux autres versions.

Pré-réquis pour être en mesure d'utiliser cet article

Si vous êtes un lecteur curieux, vous pouvez lire cet article pour avoir des connaissances générales. Cependant, si vous êtes développeur et aimerez appliquer nos conseils sur votre projet, vous devez avoir les compétences ci-dessous:
  • Des connaissances de base en HTML.
  • Avoir quelques notions en PHP.
  • Connaitre JavaScript pourrait être un plus.

Protéger votre site web contre les spams en seulement 3 étapes

Pour être en mesure de protéger votre site web, 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 en mesure d'utiliser le captcha de Google, vous devez avant tout enregistrer votre site sur la plateforme Google reCaptcha. Veuillez noter que pour enregistrer un site, il devrait être publier 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 Gsuite, 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 contact 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 contact

Sur notre formulaire de contact HTML, nous allons ajouter un champs caché appelé "reponsecaptcha". Ce champs à 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 champs caché et des autres paramètres, on aura un formulaire similaire à 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

  • Si 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 à partir de la ligne 33.
  • Pour activer le reCaptcha V3 sur votre site, vous devez remplacer LA_CLE_DE_VOTRE_SITE par la clé obtenu à l'étape 1.
  • Sur la ligne 36, vous allez remarquer un paramètre appelé "action:". Vous pouvez faire varier ce paramètre en fonction 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 referrez à la documentation pour les différentes option.
Si vous avez été en mesure de suivre les consignes, vous devez voir apparaître sur votre site l'icône  de Google reCaptcha dans le coin droit et en bas de votre site. Cela signifie tout simplement que le captcha est activé; mais pas encore fonctionnel. Nous allons voir à 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é par l'utilisateur,
  • vérifier si son score est dessus de la moyenne (généralement 0.5)
  • Bloquer l'envoie du message s'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 soumis par l'utilisateur. Le fichier pourrait avoir des informations similaires 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 forcement 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 formes de captcha qui peuvent aider à protéger votre site web contre les Spams

Il existe plusieurs autres types de Captcha qui peuvent aider à lutter contre les spams. Vous pourriez être intéressé par cet article,
"Recevez-vous constamment des courriels indésirable via votre site Internet?"
L'article donne quelques exemples de types de captchas.

Pourquoi le captcha v3

La recatcha v3, est la dernière version proposée par Google pour assister dans la protection des sites web contre les courriels indésirables. Comme différence par rapport à la version "Je ne suis pas un robot", il n'ajoute pas un champ supplémentaire sur le formulaire. Et par conséquent, cela a pour effet de réduire la perte du nombre de clients. La version "Je ne suis pas un robot" peut parfois être frustrant si le visiteur ne parvient pas à résoudre l'énigme pour une raison quelconque.

Conclusion et réflexion finale

Les captchas sont des excellents moyens de protéger les sites web contre les spams. En effet, les spams ont des conséquences assez néfaste sur les sites internet. Merci d'avoir pris le temps de lire notre publication. Si vous avez des questions, n'hésitez pas de nous laissez un message. Vous pouvez également nous contacter si vous avez besoin d'aide pour ajouter un captcha sur votre site web.