Intégrer Google reCAPTCHA sur votre site

21 février 2020 - : HTML Javascript Tutoriel - : 12 commentaires - Tutoriel Javascript html html5

Dernière modification le 7 mars 2020

Si vous possédez un site web, vous y proposez certainement un formulaire de contact qui permet à vos visiteurs de vous envoyer un message directement, sans quitter le site et sans connaître votre adresse e-mail.

Le gros inconvénient de ce formulaire de contact réside dans le fait qu'il s'agit d'une porte d'entrée pour les spams en tous genres, qui peuvent rapidement remplir votre boîte mail.

Pour éviter de perdre votre temps à trier ces nombreux e-mails, il existe plusieurs solutions, comme le Captcha, par exemple, qui demande de recopier un code, ou la case "Je ne suis pas un robot". Une autre solution plus simple à mettre en place et très discrète pour les visiteurs s'appelle Honeypot (“Pot de miel”, en français). Cette dernière est traitée dans l'article "Un antispam sur votre site - La technique du pot de miel"

Google reCAPTCHA : comment ça marche ?

La plupart des spams sont envoyés par des robots, scripts automatiques qui parcourent les sites à la recherche de formulaires. ors de la soumission du formulaire, la plupart des robots ne passent pas par la page elle même et soumettent donc le formulaire directement.

Une première vérification permet de savoir que le formulaire n'a jamais été affiché.

Certains robots affichent le formulaire mais n'ont pas un comportement "humain", ils sont trop rapides, trop systématiques, ne bougent pas la souris, autant de critères qui permettent de les détecter.

Google reCAPTCHA détecte ces comportements et déduit si le visiteur est humain ou non.

Créer le formulaire de base

Un formulaire de contact de base contiendra, par exemple, le code suivant

<form action="traitement.php" method="post">
    <p>
        <label for="nom">Nom :</label>
        <input type="text" name="nom" id="nom">
    </p>
    <p>
        <label for="sujet">Sujet :</label>
        <input type="text" name="sujet" id="sujet">
    </p>
    <p>
        <label for="email">E-mail :</label>
        <input type="email" name="email" id="email">
    </p>
    <p>
        <label for="message">Message :</label>
        <textarea name="message" id="message"></textarea>
    </p>
    <button>Envoyer</button>
</form>

Ce formulaire enverra l'information au fichier "traitement.php", mais sera vulnérable aux spams.

Traiter le formulaire

Notre fichier "traitement.php" permettra comme son nom l'indique de traiter le formulaire. Ce traitement, dans cet exemple, n'enverra pas de mail mais confirmera l'envoi, pour simuler le fonctionnement.

<?php

if($_SERVER['REQUEST_METHOD'] == 'POST'){
    // On vérifie que tous les champs sont remplis
    if(
        isset($_POST['nom']) && !empty($_POST['nom']) &&
        isset($_POST['sujet']) && !empty($_POST['sujet']) &&
        isset($_POST['email']) && !empty($_POST['email']) &&
        isset($_POST['message']) && !empty($_POST['message'])
    ){
        // On "nettoie" le contenu
        $nom = strip_tags($_POST['nom']);
        $sujet = strip_tags($_POST['sujet']);
        $email = strip_tags($_POST['email']);
        $message = htmlspecialchars($_POST['message']);

        // Ici vous devrez traiter les données

        echo " Message de {$nom} envoyé";

    }

}else{
    http_response_code(405);
    echo "Méthode non autorisée";
}

Mettre en place Google reCAPTCHA

Nous allons tout d'abord devoir créer un compte sur la plateforme Google reCAPTCHA.

Une fois le compte créé, vous pouvez accéder à la console d'administration qui ressemble à l'écran ci-dessous

Cliquez sur le "+" en haut à droite pour enregistrer un nouveau site et remplissez le formulaire en sélectionnant la V3.

Lorsque vous cliquez ensuite sur "Envoyer", vous verrez apparaître deux clés, l'une publique (clé du site), l'autre privée (clé secrète)

Ces clés nous permettront de faire fonctionner Google reCAPTCHA

Nous allons effectuer quelques modifications dans notre code pour mettre en place l'antispam.

Le formulaire

Du côté du formulaire, nous allons avoir quelques modifications à effectuer.

La première sera l'ajout d'un champ caché qui contiendra une clé de validation envoyée par Google.

<input type="hidden" id="recaptchaResponse" name="recaptcha-response">

Après notre formulaire nous ajouterons également le code javascript permettant de lancer la vérification

<script src="https://www.google.com/recaptcha/api.js?render=ICI_LA_CLE_DU_SITE"></script>
<script>
grecaptcha.ready(function() {
    grecaptcha.execute('ICI_LA_CLE_DU_SITE', {action: 'homepage'}).then(function(token) {
        document.getElementById('recaptchaResponse').value = token
    });
});
</script>

Le traitement

Ensuite, dans le traitement, nous allons vérifier si ce champ est vide avant de continuer. Le fichier "traitement.php" contiendra donc ceci

<?php

// On vérifie que la méthode POST est utilisée
if($_SERVER['REQUEST_METHOD'] == 'POST'){
    // On vérifie si le champ "recaptcha-response" contient une valeur
    if(empty($_POST['recaptcha-response'])){
        header('Location: index.php');
    }else{
        if(
            isset($_POST['nom']) && !empty($_POST['nom']) &&
            isset($_POST['sujet']) && !empty($_POST['sujet']) &&
            isset($_POST['email']) && !empty($_POST['email']) &&
            isset($_POST['message']) && !empty($_POST['message'])
        ){
            // On nettoie le contenu
            $nom = strip_tags($_POST['nom']);
            $sujet = strip_tags($_POST['sujet']);
            $email = strip_tags($_POST['email']);
            $message = htmlspecialchars($_POST['message']);

            // Ici vous traitez vos données

            echo "Message de {$nom} envoyé";
        }
    }
}else{
    http_response_code(405);
    echo 'Méthode non autorisée';
}

Nous devons également vérifier que la réponse de Google reCAPTCHA est un succès.

Pour ce faire, nous devons interroger l'URL suivante

https://www.google.com/recaptcha/api/siteverify?secret=VOTRE_CLE_SECRETE&response=REPONSE_DE_GOOGLE

Nous pouvons interroger cette url de deux façons. Avec CURL ou avec la méthode file_get_contents.

Nous utiliserons de préférence CURL, de la façon suivante

// On prépare l'URL
$url = "https://www.google.com/recaptcha/api/siteverify?secret=6Ldw_9oUAAAAAMyZp2-qjvJX4xfRMEYvzS8DwSMy&response={$_POST['recaptcha-response']}";

// On vérifie si curl est installé
if(function_exists('curl_version')){
    $curl = curl_init($url);
    curl_setopt($curl, CURLOPT_HEADER, false);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_TIMEOUT, 1);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    $response = curl_exec($curl);
}else{
    // On utilisera file_get_contents
    $response = file_get_contents($url);
}

Nous vérifions ensuite si nous avons une réponse et si elle est positive

// On vérifie qu'on a une réponse
if(empty($response) || is_null($response)){
    header('Location: index.php');
}else{
    $data = json_decode($response);
    if($data->success){
        // Google a répondu avec un succès
        // On traite le formulaire
    }else{
        header('Location: index.php');
    }
}

Le fichier "traitement.php" final sera donc le suivant

<?php

// On vérifie que la méthode POST est utilisée
if($_SERVER['REQUEST_METHOD'] == 'POST'){
    // On vérifie si le champ "recaptcha-response" contient une valeur
    if(empty($_POST['recaptcha-response'])){
        header('Location: index.php');
    }else{
        // On prépare l'URL
        $url = "https://www.google.com/recaptcha/api/siteverify?secret=6Ldw_9oUAAAAAMyZp2-qjvJX4xfRMEYvzS8DwSMy&response={$_POST['recaptcha-response']}";

        // On vérifie si curl est installé
        if(function_exists('curl_version')){
            $curl = curl_init($url);
            curl_setopt($curl, CURLOPT_HEADER, false);
            curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($curl, CURLOPT_TIMEOUT, 1);
            curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
            $response = curl_exec($curl);
        }else{
            // On utilisera file_get_contents
            $response = file_get_contents($url);
        }

        // On vérifie qu'on a une réponse
        if(empty($response) || is_null($response)){
            header('Location: index.php');
        }else{
            $data = json_decode($response);
            if($data->success){
                if(
                    isset($_POST['nom']) && !empty($_POST['nom']) &&
                    isset($_POST['sujet']) && !empty($_POST['sujet']) &&
                    isset($_POST['email']) && !empty($_POST['email']) &&
                    isset($_POST['message']) && !empty($_POST['message'])
                ){
                    // On nettoie le contenu
                    $nom = strip_tags($_POST['nom']);
                    $sujet = strip_tags($_POST['sujet']);
                    $email = strip_tags($_POST['email']);
                    $message = htmlspecialchars($_POST['message']);

                    // Ici vous traitez vos données

                    echo "Message de {$nom} envoyé";
                }
            }else{
                header('Location: index.php');
            }
        }
    }
}else{
    http_response_code(405);
    echo 'Méthode non autorisée';
}

Et voilà, les spams devraient drastiquement diminuer avec cette méthode.

A noter qu'aucune méthode ne fonctionnera à 100%.

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat

Partager

Partager sur Facebook Partager sur Twitter Partager sur LinkedIn

Commentaires

ghostmoon a écrit le 30 août 2020 à 22:25

<?php
  $destinataire = "XXX";

// On vérifie que la méthode POST est utilisée
if($_SERVER['REQUEST_METHOD'] == 'POST'){
    // On vérifie si le champ "recaptcha-response" contient une valeur
    if(empty($_POST['recaptcha-response'])){
        header('Location: index.html');
    }else{
        // On prépare l'URL
        $url = "https://www.google.com/recaptcha/api/siteverify?secret=6Lcf57sZAAAAAJr3OZ6PkXQmyDtqf52K2eQstfwn&response={$_POST['recaptcha-response']}";

        // On vérifie si curl est installé
        if(function_exists('curl_version')){
            $curl = curl_init($url);
            curl_setopt($curl, CURLOPT_HEADER, false);
            curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($curl, CURLOPT_TIMEOUT, 1);
            curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
            $response = curl_exec($curl);
        }else{
            // On utilisera file_get_contents
            $response = file_get_contents($url);
        }

        // On vérifie qu'on a une réponse
        if(empty($response) || is_null($response)){
            header('Location: index.html');
        }else{
            $data = json_decode($response);
            if($data->success){
                if(
                    isset($_POST['nom']) && !empty($_POST['nom']) &&
                                   isset($_POST['email']) && !empty($_POST['email']) &&
                    isset($_POST['message']) && !empty($_POST['message'])
                ){
                    // On nettoie le contenu
                    $nom = strip_tags($_POST['nom']);
                    $email = strip_tags($_POST['email']);
                   $message = htmlspecialchars($_POST['message']);

                    // Ici vous traitez vos données
                  $headers = "Content-Type: text/html; charset=\"iso-8859-1\"\n".'From: '.$nom.' <'.$email.'>';
		$message = str_replace('\r\n','<br>',$message);
		$objet = str_replace("&#039;","'",$objet);
		
	// envoyer une copie au visiteur 

				$cible = $destinataire.','.$email;
			

		//constitution du corps du mail

		$message = 'Nom : '.$nom."<br>".'email : '.$email."<br>".'Message : '.$message;

		// Envoi du mail

		if (mail($cible, 'copie mail photographe recaptcha', $message, $headers))
                    
              header('Location: confirm.html');
                }
            }else{ 
                header('Location: nok_message.htm');
            }
        }
    }
}else{
     header('Location: nok_message.htm');
}

?>

Bonjour, super votre article tous fonctionne tres bien par contre je ne comprends pas pourquoi ma page "nok_message.htm"   ne s'affiche pas en cas de champs vide alors que le code du "confirm.htm" fonctionne. Pourriez vous m'aider SVP ?

 

 

Répondre

Philippe Ghost a écrit le 9 août 2020 à 14:56

Bonjour, merci pour super tuto qui correspond exactement a ce que je cherchais pourr mon site web, j'ai suivi pas a pas la procedure mais j'ai un soucis, j'ai bien le logo captcha, le message comme quoi le mail est bien envoy par contre le mail n'arrive pas, voici les données que j'ai saisi pour l'envoi du formulaire, ai je fias une erreur quelques part ? Merci de votre reponse. 

<?php

  $destinataire = monmail@gmail.com";
    $email_subject = "Le sujet de votre email"

(....)
 // Ici vous traitez vos données
  mail($destinataire,$email_subject,$sujet,$email,$message)
   echo
(....)

Répondre

Guigui0812 a écrit le 31 juillet 2020 à 14:40

Bonjour, 

J'ai fait exactement les mêmes manipulations que vous, cependant google ne me délivre aucun token... Je n'arrive donc pas à faire fonctionner recapcha correctement. Auriez-vous des pistes à explorer ?

Je vous remercie d'avance pour votre aide.

Répondre

tonio a écrit le 27 juillet 2020 à 19:41

Bonjour,

j'ai un message d'erreur et je narrive pas a savoir pourquoi.

 

Warning: file_get_contents(): Unable to find the wrapper "https" - did you forget to enable it when you configured PHP? in C:\Users\anton\Documents\tutophp\Contact\traitement.php on line 22

Warning: file_get_contents(https://www.google.com/recaptcha/api/siteverify?secret=6LcslaQZAAAAAIybGj7X__Yur-nzNR4qbX-0YCxS&response=03AGdBq25KFUDn3vI9DUKCkfjvWor28jvxteZXEPU-5oXIRnBUrgGxmfxf2O4aqCtb9Pgi2kiv5utKbEVzuQu8QccYcminywgh2eDKuFgq7ADyChAmBla5GZh-rzzTExTVsePJXQZYoSz6ifYFSU2WfKNsxWwE7WrbgFmeIIajj9hPTjoYv77yJtBIEtEgc2MKoFXD6wBQl1UTUmNHAmttLVmyjoMJkdqG12gLVnpkqQjc0BC9wo6ntLiIcxa4JlWRjLU4MUGIckQtOCvbJONE9pucdfLbwsgQgitq5B84fJXy0VeEnPsmuk9OJaipswu-Fbh6CTPZ_7RJRvUObwMdWibczl4lfevOKivYEIdemGVESnzTm8rz-vk): failed to open stream: No error in C:\Users\anton\Documents\tutophp\Contact\traitement.php on line 22

Warning: Cannot modify header information - headers already sent by (output started at C:\Users\anton\Documents\tutophp\Contact\traitement.php:22) in C:\Users\anton\Documents\tutophp\Contact\traitement.php on line 26

 

avez vous des info.

 

Cordialement

Répondre

wubijacq a écrit le 19 juillet 2020 à 17:57

Bonjour

Je ne vois pas le badge reCaptcha sur ta page!

merci pour tes explications sur la méthode utilisée par Google  reCaptcha v3.

Répondre

Nouvelle-Techno.fr a répondu le 19 juillet 2020 à 17:59

Bonjour,

Je n'utilise pas ReCaptcha c'est pour ça ;-)

Répondre

wubijacq a répondu le 19 juillet 2020 à 18:47

Et je ne suis pas un spambot donc tout va bien !

Répondre

CHRIMA82 a écrit le 13 juillet 2020 à 23:12

Bonjour et merci pour la video et le script qui suit.

Des explications claires, un enchainement logique et trés bien expliqué.

Le tout m'a permis de mettre en place le reCaptachaV3 dans mon site aprés pas mal de recherches infructueuses.

Encore merci

Christian

Répondre

Marc Menard a écrit le 28 juin 2020 à 04:10

Bonjour Benoît,

Super la vidéo, première en français qui me semble faire du sens concernant Google recaptcha. Je me demandais par contre, on me demande de voir le crochet et "Je ne suis pas un robot", plutôt que ça soit invisible. Le code tel que montré, c'est le même pour recaptcha v2 ou dois-je utiliser autre chose? Je trouve que Google n'est pas aussi bon que toi pour expliquer... Merci!

Répondre

Nouvelle-Techno.fr a répondu le 28 juin 2020 à 10:34

Bonjour Marc,

Le code sera différent effectivement, la logique de fonctionnement de l'api V2 n'est pas la même.

Répondre

Gaeil a écrit le 13 avril 2020 à 18:26

bonjour et merci pour ce tuto d'une pédagogie parfaite. Timing parfait (certains cliquent dans tous les sens, on a le temps de rien voir et il faut arrêter les vidéos toutes les 5 secondes...), Explications claires et commentées au fur et à mesure...j'ai regardé beaucoup de tuto sur l'intégration du Recaptcha de Google, aucun ne vous arrive e la cheville .

Encore merci

Gerard

Répondre

Nouvelle-Techno.fr a répondu le 28 juin 2020 à 10:35

Merci beaucoup :-)

Répondre

Obtenir de l'aide

Il n'est plus possible d'ajouter de commentaires.

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat