Installer le widget reCAPTCHA de Google
Obtenir votre clé pour utiliser le widget reCAPTCHA de Google
Pour installer votre captcha, vous devez d’abord obtenir deux clés en vous rendant sur le site de Google, à cette adresse : https://www.google.com/recaptcha/intro/invisible.html puis cliquer sur le bouton « Get ReCAPTCHA ».
Vous devrez ensuite renseigner un libellé pour identifier votre site puis choisir le type de Captcha que vous souhaitez mettre en place :
- ReCaptcha V2 : l’option la plus simple à intégrer et qui ne nécessite qu’un clic de la part de l’internaute pour confirmer qu’il n’est pas un robot (option choisie pour la suite de cet article)
- ReCaptcha Invisible : totalement transparent pour l’internaute qui n’a même pas besoin de cliquer. Nécessite un appel javascript supplémentaire (cela fera l’objet d’un article prochainement)
indiquez ensuite les domaines depuis lesquels ce captcha va être utilisé. Une fois toutes ces informations renseignées, validez : vous avez alors accès à plusieurs clés :
- La clé du site (utilisée dans le code HTML)
- Une clé secrète (utilisée coté serveur pour vérifier la requête de l’utilisateur)
Intégration du Captcha coté client :
Bien, vous êtes outillé pour mettre en place votre captcha sur votre formulaire. Pour afficher ce captcha, il vous fut maintenant:
- Placer un appel de script avant la balise fermante </head> de votre fichier HTML
- Et placer un bout de code après la balise <form>, à l’endroit où vous souhaitez que le widget reCAPTCHA s’affiche, comme dans l’exemple ci-dessous.
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Test de Captcha</title> <script src='https://www.google.com/recaptcha/api.js'></script> </head> <body> <form method="post"> <div class="g-recaptcha" data-sitekey="VOTRE-CLE-DU-SITE"></div> <input type="submit" name="test" value="Test"> </form> </body> </html>
A cette étape, vous pouvez voir apparaitre sur votre page avec l’exemple ci-dessus :
Si vous envoyez votre formulaire, vous obtiendrez les données suivantes :
// Validation du formulaire sans avoir cliqué sur le Captcha
Array
(
[g-recaptcha-response] =>
[test] => Test
)
// Validation après avoir cliqué
Array
(
[g-recaptcha-response] => jkljmLKJMkjmlKJMKLjmlkJlkj[...]
[test] => Test
)
Intégration du Captcha coté serveur :
Vous allez maintenant devoir vérifier que les données reçues sont valides. Pour cela il va falloir envoyez une demande POST avec les paramètres suivants : la clé secrète, la valeur reçue de g-recaptcha-response et l’adresse IP de votre visiteur. Rien de complexe, mais Google nous mâche le travail en proposant une librairie toute prête pour traiter cette partie ! Vous pouvez consulter ce projet Github à cette adresse : https://github.com/google/recaptcha
Allons vite, et installons cette librairie avec Composer :
cd /Applications/MAMP/htdocs/emplacement-de-votre-dossier curl -sS https://getcomposer.org/installer | php php composer.phar require google/recaptcha "~1.1"
Vous pouvez maintenant traiter les résultats du Captcha, avec le code ci-dessous, à adapter comme bon vous semble :
<?php
require_once __DIR__ . '/recaptcha-google/vendor/autoload.php';
function is_captcha_valid($response = null, $secret = null)
{
if (empty($secret) || empty($response)) return false ;
$recaptcha = new \ReCaptcha\ReCaptcha($secret);
$resp = $recaptcha->verify($response, $_SERVER['REMOTE_ADDR']);
if ($resp->isSuccess())
{
return true ;
}
return false ;
}
$siteKey = 'la clé du site';
$secret = 'la clé secrète';
if (isset($_POST['g-recaptcha-response']))
{
$result_captcha = is_captcha_valid($_POST['g-recaptcha-response'], $secret) ;
if ($result_captcha === true)
{
echo 'Captcha valide !' ;
}
else
{
echo 'Captcha non valide !' ;
}
}
?>
Si vous ne souhaitez pas passer par la librairie proposée par Google, vous pouvez utiliser ce script de traitement proposé par grafikart.fr.
Bonne mise en place !
Si cet article vous a aidé, si vous avez des questions ou des améliorations à proposer, n'hésitez pas à me laisser un commentaire en bas de page !
