Loin de moi ici de vous proposer un tuto sur l’intégration d’un CAPTCHA Google, je vous propose plutôt d’en analyser les différents langages, à quels moments sont-ils utilisés, et la façon dont l’outil fonctionne. Après l’avoir fait, et ce, depuis plusieurs années maintenant, je trouvais intéressant de publier la méthode proposée en vue de prochaines utilisations.
CAPTCHA ?! A vos souhaits !
(Elle était vraiment nulle celle-là :D) Blague à part, le mot CAPTCHA a réellement une origine. Le mot est « censé être composé des initiales de Completely Automated Public Turing test to tell Computers and Humans Apart, soit en français, « Test public de Turing complètement automatique ayant pour but de différencier les humains des ordinateurs » » (1). Turing étant le célèbre mathématicien qui a entre autres pu décoder les transmissions allemandes lors de la Seconde Guerre mondiale. Maintenant que les présentations sont faites, vous comprenez à présent qu’un CAPTCHA peut vous servir à contrer les spams et autres bots utilisants vos formulaires ! De mon côté, il est aujourd’hui obligatoire lorsque je mets en place un formulaire.
L’intégration d’un CAPTCHA Google
Vous trouverez sans doutes d’autres CAPTCHA que celui de Google, et vous pouvez même en coder un vous-même. Il n’empêche, que passer par une API semble assez logique puisque le GAFA en question vous propose un score de menace qu’il doit calculer en vue de répondre un message de succès ou au contraire, de potentiellement menaçant. Vous définissez vous-même ce score en Backend, ce que nous verrons plus tard. D’après la réponse, vous pouvez ensuite continuer les actions auxquelles votre formulaire était employé, comme l’envoie d’un email par exemple.
Ce qui est intéressant, c’est que Google intervient à tous les niveaux pour mettre en place son outil. C’est d’ailleurs même un peu trop selon moi. Il serait possible de l’intégrer juste en javascript côté Frontend par exemple. Voilà où il intervient :
1.HTML
La méthode proposée sur le site officiel va plutôt injecter un token (un code unique) à travers une balise HTML que votre formulaire traitera. Voilà à quoi cela peut ressembler :
<input type="hidden" name="recaptcha_response" id="recaptchaResponse">2. Javascript
Afin d’en attribuer la valeur, c’est du côté JavaScript qu’on se tournera. Ce dernier utilisera donc l’API Google et surtout la clé de votre site, que vous devez au préalable enregistrer ici. Voilà comment faire ;
<script src="https://www.google.com/recaptcha/api.js?render=site_key"></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('site_key', { action: 'submit' }).then(function(token) {
var recaptchaResponse = document.getElementById('recaptchaResponse');
recaptchaResponse.value = token;
});
});
</script>
Si je traduis ; une fois que la page de mon formulaire est chargée, recherche l’élément HTML dont l’ID est « recaptchaResponse« , et attribue lui une valeur est égale au Token généré par la fonction « grecaptcha.execute » et prenant en paramètre la clé de mon site (remplacez site_key par votre clé !)
CSS
A ce stade, nous terminons le côté Frontend. Mais le CAPTCHA Google ajoute un « badge » (en bas à droite) pas très joli pour mentionner à vos utilisateurs que votre formulaire est protégé. Là aussi vous pourriez le cacher en Javascript mais pourquoi ne pas utiliser le langage qui convient le mieux en ajoutant simplement ces quelques lignes pour s’en débarrasser :
<style>
.grecaptcha-badge {
visibility: hidden;
}
</style>
Côté backend
Ca y est, votre formulaire est prêt. Mais comme expliqué plus haut, il va falloir interroger l’API Google CAPTCHA pour savoir si votre formulaire est utilisé par un robot ou un humain. Pour ce faire, j’utilise le langage PHP. Ce dernier va interroger l’API en plaçant en paramètre de l’URL, la clé secrète cette fois-ci, que vous obtenez également via l’administration de vos Google CAPTCHA. Vous y placerez également le Jeton unique que votre balise HTML « input hidden » a généré à l’étape précédente.
La requête vous renverra une réponse sous forme d’objet. L’une des clés de cet objet est le score dont je vous parlais. (« score« ). Ce dernier est compris entre 0.0 et 1.0 ou si vous préférez une échelle de 1 à 10. En ce qui me concerne, je la mets à 0.5. Si le score est en dessous de cette évaluation, je considère l’expéditeur comme n’étant pas humain ou potentiellement dangereux. Voilà à quoi cela pourrait ressembler :
4. PHP
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['recaptcha_response'])):
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
$recaptcha_secret = 'secret_key';
$recaptcha_response = $_POST['recaptcha_response'];
$recaptcha = file_get_contents($recaptcha_url.'?secret='.$recaptcha_secret.'&response='.$recaptcha_response);
$recaptcha = json_decode($recaptcha);
if ($recaptcha->score < 0.5):
$error['status'] = true;
$error['info'][] = "Error Google Captcha";
exit();
else :
$error['status'] = true;
$error['info'][] = "Error POST recaptcha_response";
exit();
endif;
endif;Conclusion
Je voulais vous montrer ici à quel point un outil que l’on croise tous les jours sur la toile pouvait toucher à différents niveaux et langages de par son intégration. On pourrait aller plus loin encore ; rechercher une alternative à Google CAPTCHA, créer soi-même son CAPTCHA, améliorer l’outil côté Frontend/Backend. En attendant, je l’ajoute aux outils déjà présents sur https://tools.lintermediaire.be afin de que vous puissiez l’utiliser à votre tour.
(1) Sources : https://fr.wikipedia.org/wiki/CAPTCHA
Voir aussi cet article en relation :
