Comment installer reCAPTCHA pour lutter contre le Spam ?

Publié le 2 mars 2010 - Developpement Web. Tags :

Avec la toute dernière version de Firefox (3.6), le Captcha que j’utilisais sur mes formulaires depuis plusieurs années est devenu obsolète. Du coup, j’en profite pour faire un petit tutoriel concernant l’installation de la solution leader (et gratuite) du marché : reCAPCHA.

Mais avant de commencer, qu’est-ce qu’un captcha ? Derrière ce nom barbare se cache en réalité un simple test visuel visant à différencier un utilisateur humain d’un ordinateur. Le but est de lutter contre les spammeurs, en les empêchant d’utiliser vos formulaires pour envoyer du des mass-mailings automatisés à partir de vos serveurs. Bien sûr, l’expérience utilisateur s’en trouve quelque peu amoindrie, mais il n’existe malheureusement pas vraiment d’autres solutions pour lutter contre ce fléau de façon efficace. Si je parle aujourd’hui de reCAPTCHA c’est que c’est à mon sens la solution la plus fiable et gratuite de disponible. Avec son système de reconnaissance optique avant-gardiste, c’est d’ailleurs le système le plus utilisé du monde (le service fournit ainsi 30 millions d’images par jour à pas moins de 100.000 sites), et la propriété de Google depuis septembre 2009.

Voici son mode de fonctionnement :

  1. 1- L’internaute charge votre formulaire avec le code de vérification de reCAPTCHA intégré,
  2. 2- Le serveur de reCAPTCHA est interrogé pour obtenir un code de vérification visuelle. Un code est créé et marqué par un numéro d’identification (enregistré sur le serveur de reCAPTCHA).
  3. 3- L’internaute remplit et valide votre formulaire, les résultats sont alors transférés à votre script pour traitement . Celui-ci envoie le résultat de la vérification visuelle à reCAPTCHA.
  4. 4- reCAPTCHA vérifie le code grâce à son numéro identification, et renvoie une réponse à votre script.
  5. 5- Si la réponse est correcte, l’action finale de votre formulaire est effectuée, sinon une erreur apparait.
recaptcha-api-diagram

Alors comment installer reCAPTCHA ? Tout d’abord, il va falloir inscrire votre site sur le service afin d’obtenir une licence d’utilisation. Cette dernière se compose de deux clés (l’une publique, l’autre privée), à utiliser ultérieurement sur vos formulaires. Ensuite, vous devez télécharger la librairie reCAPTCHA, puis décompresser l’archive et enfin trasnférer le fichier recaptchalib.php sur votre serveur (dans votre dossier d’includes par exemple).

Vous allez maintenant devoir éditer votre formulaire et votre script de traitement des informations. Pour procéder, ajoutez ces lignes à l’endroit où vous voulez faire apparaitre le captcha (entre les balises <form> </form>, idéalement avant le bouton d’envoi) :

require_once('recaptchalib.php');
$publickey = "VotreCléPublique";
echo recaptcha_get_html($publickey);

Pensez à remplacer VotreCléPublique par la clé correspondante qui vous a été fournie lors de l’inscription de votre site.

La dernière chose à faire est de modifier votre page de traitement du formulaire, afin de valider ou non le code de vérification saisi. Pour ce faire, copiez ce bout de code au niveau de la récupération des données :

require_once('recaptchalib.php');
$privatekey = "VotreCléPrivée";
$resp = recaptcha_check_answer (
$privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]
);

Pensez à remplacer VotreCléPrivée par la clé correspondante qui vous a été fournie lors de l’inscription de votre site (la 2ème donc).

Lors de la vérification des champs du formulaire, ajoutez ajouter le code suivant (avant tout autre vérification, vu que le formulaire retournera une erreur quoi qu’il arrive si le Captcha est erroné) :

if (!$resp-&gt;is_valid) {
  echo("Le code de vérification est incorrect");
}

Si vous avez tout effectué correctement, le captcha devrait être fonctionnel instantanément.
Pour le tester, remplissez votre formulaire et assurez-vous de recopier à l’identique le code de vérification proposé par reCAPTCHA. Si vous obtenez une erreur « Le code de vérification est incorrect » (si vous suivez ce tutorial), c’est que vous avez probablement oublié un détail. Les erreurs les plus fréquentes sont d’inverser les clés de l’API, ou d’inclure le fichier recaptchalib.php au mauvais endroit dans votre arborescence (dans cet exemple il doit être situé dans le même dossier que votre formulaire.

Pour aller plus loin, et parce que le thème de base rouge n’est pas forcément adapté à tous les designs, nous allons voir comment personnaliser reCAPTCHA. Là encore, rien de plus simple, placez ce bout de code javascript sur votre page affichant le formulaire (idéalement avec vos autres appels JS) :

<script>var RecaptchaOptions = { theme : 'white'}</script>

Remplacez CouleurDuThème par la couleur de votre choix, sachant qu’il n’existe que 3 variantes officielles : white, blackglass, clean. Vous pouvez bien sur créer votre propre thème, en utilisant la variable ‘custom’. Dans ce cas vous devez en plus ajouter le code suivant :

<div id="recaptcha_image"></div>
<input type="text" name="recaptcha_response_field" id="recaptcha_response_field" />

Vous pouvez aussi adapter la langue d’affichage grâce à la variable lang de cette façon :

<script>var RecaptchaOptions = { theme : 'white', lang : 'fr' };</script>

Articles sur ce thème :