Protection des formulaires par reCAPTCHA Google

Ce que l'on appelle le reCAPTCHA, c'est une technologie Google, qui permet de vous assurer, que c'est un humain qui est en train de manipuler votre site de manière naturelle et non un robot de manière malintentionnée. reCAPTCHA vient du mot CAPTCHA qui était une technologie proposée par l'université de Carnegie-Mellon.

Pourquoi craint-on les robots ?

Sur certaines pages de votre site qui sont chargées dans le navigateur, il y a des formulaires qui servent à envoyer des données vers votre serveur. C'est normal. Ces données une fois arrivées sur le serveur sont le plus souvent mémorisées dans la base de données ou envoyées vers votre boîte mail. Le problème, c'est qu'un robot mal intentionné, peut très bien utiliser cette "porte d'entrée" pour vous injecter par programme de grosse quantité de données. Il peut tout simplement saturer votre boîte mail ou saturer votre base de données et ça évidemment vous devez absolument l'éviter.

Donc cette technologie reCAPTCHA est là pour faire le tri entre les humains et les robots.

Dans la version reCAPTCHA2, on demande à l'internaute de cocher une case, pour préciser qu'il est humain. Eventuellement, on va lui proposer une image et lui demander de cliquer sur certaines parties de l'image, de manière à résoudre un défi, que seul un humain peut résoudre. Après cela, si le défi est réussi, on laisse transiter les données du navigateur vers le serveur.

Dans la version reCAPTCHA3, la technologie Google est capable d'authentifier un humain sans aucune intervention de l'internaute. Donc, sur la page, à priori, votre visiteur ne voit plus rien sauf un petit logo qui se trouve en bas à droite. Et surtout, il n'est plus dérangé par l'éventuel défi à réussir.

Pour souscrire au service :

1. Faites une recherche sur le mot clé reCAPTCHA tout en étant connecté à un compte Google.
2. Sur la page d'accueil, en haut à droite, cliquez sur Admin Console.
3. Puis sur le signe plus pour créer le nécessaire à la protection d'un formulaire.
4. Il faut donner un libellé qui va identifier le formulaire, ici, j'ai donné TUTO_CONTACT_V3.
5. Puis, vous choisissez votre version reCAPTCHA2 ou reCAPTCHA3.
6. Puis, vous rentrez le nom de domaine et vous cliquez sur Envoyer.

Vous récupérez un couple de clés. La première clé s'appelle "clé de site" elle servira côté navigateur. La deuxième clé s'appelle "clé secrète" elle servira côté serveur.

1. On identifie trois entités sur le schéma : l'api reCAPTCHA, le navigateur, le serveur.
2. Du côté navigateur, il y a un formulaire. Au moment de l'appui sur submit, on va se servir de la clé de site pour interroger l'api reCAPTCHA de manière à obtenir un token (jeton).
3. Ce token, après réception, on va le transmettre au serveur avec les données du formulaire. Ce token sera dans le champ g-recaptcha-response.
4. Du côté serveur, toujours après réception, on va transmettre à l'api reCAPTCHA le token accompagné cette fois-ci de la clé secrète. L'api va tenter de valider ce couple d'information et va nous rendre une réponse au format Json avec un champ success qui est un booléen.
5. Si success est true ça veut dire que l'on peut utiliser nos données. S'il est false ça veut dire que l'on ne peut pas.

Je vous conseille de donner des noms à vos clés, par exemple avec des define et de regrouper tout ça dans un seul fichier. Ca vous évitera de mélanger vos clés, car rien ne ressemble plus à une clé qu'une autre clé. Croyez-moi !!

Ici le fichier s'appelle recaptcha.php. Ensuite, vous faites des require de ce fichier là où c'est nécessaire.

1. Fichier recaptcha.php

   Dans ce fichier, en plus des couples de clés, on va déclarer une fonction check_token qui aura la charge d'interroger l'api de manière à vérifier le token au moyen de la clé secrète. On va mettre ces deux informations en argument de la fonction de manière à pouvoir utiliser la fonction pour chaque couple token / clé secrète.

   Ensuite, on va demander la validation de notre couple d'information à l'api. Pour ça on fait une requête http en POST en utilisant la bibliothèque curl. (* Vérifiez que cette bibliothèque est disponible sur votre serveur).

   Ensuite, on récupère la réponse au format Json et on retourne le champ success qui sera true si les données sont valides et false sinon.

   <?PHP/* Fichier recaptcha.php */ define('SITE_TUTO_EXEMPLE','6Ld4yvwZAAAAAGSM_xxxxxxxxxxxxx-fVaAAVJjfepk'); define('SECRETE_TUTO_EXEMPLE','6Ld4yvwZAAAAA_xxxxxxxxxxxxx-MR5PLDB4ALdks'); /*----------------------------------------------------------------------------------*/ function check_token($token,$secret_key) { $verif_url = "https://www.google.com/recaptcha/api/siteverify?secret=$secret_key&response=$token"; $curl = curl_init($verif_url); curl_setopt($curl, CURLOPT_HEADER, false); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); $verif_response = curl_exec($curl); if ( empty($verif_response) ) return false; else { $json = json_decode($verif_response); return $json->success; } } ?>

2. Fichier formulaire.php

   Dans le formulaire et conformément à la documentation, il faut :

   1. Importer l'api JavaScript reCAPTCHA.
   2. Mettre un bouton submit. Renseigner le champ data-sitekey avec la clé de site.
   3. Mettre en place un petit code JavaScript qui contient un callback qui sera appelé au moment d'un click sur submit. Dans ce callback, vous pourrez valider vos données avant de demander la soumission du formulaire.
   <!-- formulaire.php --> <?PHP require "recaptcha.php" ; ?> <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <script src="https://www.google.com/recaptcha/api.js"></script> </head> <body> <h1>Formulaire</h1> <form id='myform' name='myform' action="traitement-exemple.php" method='post'> <fieldset> <label for='mytext'>Rentrer du texte <input id='mytext' name='mytext' type='text'> </label> <button class="g-recaptcha" data-sitekey="<?PHP echo SITE_TUTO_EXEMPLE ?>" data-callback='onSubmit' data-action='submit'>Submit</button> </fieldset> </form> <script> function onSubmit() { // ICI Validation JavaScript du formulaire document.getElementById("myform").submit(); } </script> </body> </html>

3. Fichier traitement.php

   Dans ce fichier, on va se contenter d'appeler la fonction check_token avec justement le token que l'on récupère dans $_POST['g-recaptcha-response'] et la clé secrète. Si la fonction retourne true, on traite le formulaire.

   <!-- traitement.php --> <?PHP require "recaptcha.php"; ?> <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> </head> <body> <h1>Traitement</h1> <?PHP if ( check_token_site($_POST['g-recaptcha-response'],SECRETE_TUTO_EXEMPLE) ) echo "Je traite mon formulaire"; else echo "Je ne traite pas mon formulaire"; ?> </body> </html> Tester le code

4. Fonction avec trace pour le debug

   <!DOCTYPE html> <html lang="fr"> <?php function check_token($token,$secret_key,$DEBUG=false) { if ( $DEBUG ) { echo "<b>token =></b> $token<br><br>"; echo "<b>clé secrète =></b> $secret_key<br><br>"; } if ( empty($token) ) return false; $verif_url = "https://www.google.com/recaptcha/api/siteverify?secret=$secret_key&response=$token"; if ( function_exists('curl_version') ) { if ( $DEBUG ) echo "<b>Curl sur url =></b> ",htmlspecialchars($verif_url),"<br><br>"; $curl = curl_init($verif_url); curl_setopt($curl, CURLOPT_HEADER, false); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); curl_setopt($curl, CURLOPT_TIMEOUT, 1); $verif_response = curl_exec($curl); } else { if ( $DEBUG ) echo "On fait du file_get_content<br><br>"; $verif_response = file_get_content($verif_url); } if ( $DEBUG ) echo "<b>Réponse =></b> $verif_response<br><br>"; if ( empty($verif_response) ) return false; else { $json = json_decode($verif_response); return $json->success; } } ?> </html>