[PHP] Utiliser reCaptcha

Publié le 26/07/2015 à 00h20

ReCaptcha est une libraire qui permet d'ajouter facilement un captcha antispam performant sur un site web. Ce service est très populaire outre Atlantique (il est même utilisé par Twitter). Ce petit tutorial va expliquer comment s'en servir et les manières misent à disposition par reCaptcha pour personnaliser la partie d'un formulaire qui affiche le captcha.

Mise à jour 26/07/2015 : la technologie de reCaptcha a évolué en décembre 2014, depuis la première publication de cet article. L'article a été mis à jour en conséquent pour inclure les informations liées aux dernière nouveautés.

reCAPTCHA 2.0

reCAPTCHA 2.0

Présentation de reCaptcha

Le spam est un vrai fléau sur le web. De nombreux sites essaient de faire des sécurités pour éviter qu'un robot utilise une application sur le web à la place d'un humain. Toutefois, la plupart des solutions existantes ne sont pas d'une grande efficacité. Malgré tout, l'outil reCaptcha se démarque du lot et est utilisé par des milliers de sites web.

ReCaptcha a également l'avantage d'être accessible grâce au formulaire qui peut être utilisé par les personnes ayant une déficience visuelle car c'est compatible avec les technologies d'assistances. Enfin, c'est gratuit et globalement facile à utiliser.

Tutoriel d'utilisation de reCAPTCHA 2.0 (nouvelle version)

1) S'inscrire sur le site officiel

Inscrivez-vous ou connectez-vous avec votre compte Google à l'adresse suivante : https://www.google.com/recaptcha/. Garder les identifiants, car cette interface en ligne vous sera utile pour obtenir des codes uniques et des statistiques sur les éventuelles attaques informatiques.

Une fois inscrit, ajoutez-y le site web sur lequel vous souhaitez installer le captcha. Vous obtiendrez un clé pour le site et une clé privée, notez-les soigneusement à l'aide d'un petit copier/coller, elles vous seront utiles ultérieurements.

2) Installer la librairie

Un dépôt officiel a été créé sur Github à l'adresse suivante : https://github.com/google/recaptcha. Sur cette page il est possible de télécharger les sources à l'aide du bouton "Download ZIP", pour ensuite installer la librairie sur votre site web.

Astuce : les fichiers de la librairies incluent un exemple officiel simple et concret.

3) Code pour afficher le captcha dans le formulaire

Une fois la librairie installée, il faut ajouter le code pour l'inclure sur la page PHP de votre formulaire, par exemple en copiant/collant ce code :

1
2
3
4
5
6
7
8
9
10
11
<?php
// include de ReCaptcha
include_once DIR_LIB.'classes/ReCaptcha/ReCaptcha.php';
include_once DIR_LIB.'classes/ReCaptcha/RequestMethod.php';
include_once DIR_LIB.'classes/ReCaptcha/RequestParameters.php';
include_once DIR_LIB.'classes/ReCaptcha/Response.php';
include_once DIR_LIB.'classes/ReCaptcha/RequestMethod/Curl.php';
include_once DIR_LIB.'classes/ReCaptcha/RequestMethod/Post.php';
include_once DIR_LIB.'classes/ReCaptcha/RequestMethod/Socket.php';
include_once DIR_LIB.'classes/ReCaptcha/RequestMethod/SocketPost.php';
?>

Puis, il faut insérer le code suivant à l'endroit où le captcha doit s'afficher (en pensant à personnaliser le code) :

1
2
3
<?php $siteKey = 'VOTRE_CODE_SITE_KEY'; ?>
<div class="g-recaptcha" data-sitekey="<?php echo $siteKey; ?>"></div>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=fr"></script>

4) Code de vérification

Pour vérifier la réponse, utilisez par exemple ce bout de code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
$secret = 'CODE_CLE_SECRETE'; // a personnaliser

if (isset($_POST['g-recaptcha-response'])):
// creer une instance de la librairie
$recaptcha = new \ReCaptcha\ReCaptcha($secret);

// verifier qu'on a les droits
$resp = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);

if ($resp->isSuccess()):
// la reponse est un succes, bravo
echo 'BRAVO VOUS ETES HUMAIN';
else:
// erreur, c'est un robot
echo 'OUPS, VOUS SEMBLEZ ETRE UN ROBOT';
endif;
endif;
?>

Attention, pensez tout de même à lire le bout de code fournit dans l'exemple officiel, il contient des informations importantes notamment si le code ne fonctionne pas sur votre installation.

Tutoriel d'utilisation de reCaptcha 1.0 (ancienne version)

Exemple de captcha antispam

Exemple de captcha antispam (version 1.0)

1) S'inscrire sur le site recaptcha.net

La première étape consiste à s'inscrire sur le site http://recaptcha.net. Sachant que le projet recaptcha.net essaie de combattre le spam, vous pouvez presque est certain que votre adresse email utilisé pour l'inscription ne sera pas revendu à des tiers.

A la fin de l'inscription, il faut prendre note de la clé publique et de la clé privée. Sans ces deux informations, il ne sera pas possible d'utiliser la librairie.

2) Installer la librairie

Il existe plusieurs versions de la librairie et il existe également des plugins (notamment un plugin WordPress). Dans la liste des librairies reCaptacha il faut télécharger la version pour PHP. Une fois téléchargé, le fichier doit être décompressé puis installer quelque part sur l'hébergement du site web. Les débutants peuvent installer la librairie au même endroit où se trouve le formulaire qui utilisera la librairie. Les webmasters expérimentés peuvent installer la librairie dans un fichier où se situe toutes les librairies.

3) Code PHP pour afficher le captcha

Une fois que la librairie est sur l'espace web, il est possible de commencer à coder la page qui utilisera le captcha. Le code pour afficher ce captcha est relativement simple:

<?php
require_once('recaptchalib.php'); // Vérifier que l'URL relative correspond à l'emplacement du fichier (adapter si nécessaire)
$publickey = "..."; // Utiliser la clé que vous avez eu lors de l'inscription sur recaptcha.net
echo recaptcha_get_html($publickey); // Affiche le captcha
?>

Attention: il faut bien veiller à ce que l'URL relative corresponde à l'emplacement du fichier. Dans le cas contraire, il y aura une erreur sur la page car celle-ci n'aura pas réussi à accéder au fichier.

4) Code PHP de vérification

Le code PHP présenté ici est volontairement présenté à part de l'autre code. La raison est simple, il arrive que le formulaire de validation soit présent sur une autre page web. Dans le cas où le formulaire envois vers la même page, il est possible de joindre les codes sur la même page.

<?php
require_once('recaptchalib.php'); // Ne pas réafficher cette ligne dans le cas où ce code est sur la même page que le formulaire
$privatekey = "..."; // Utiliser la clé privée qui est donnée sur votre compte recaptcha.net
$resp = recaptcha_check_answer ($privatekey,
                                $_SERVER["REMOTE_ADDR"],
                                $_POST["recaptcha_challenge_field"],
                                $_POST["recaptcha_response_field"]);

if (!$resp->is_valid) { // Test si le captcha a bien été rempli
  // Si le captcha n'est pas valide
  echo 'Oups, le captcha antispam n\'est pas valide. Veuillez recommencer';
}
else{
  // Si le captcha est valide
  // Ici, utiliser votre code PHP pour traiter le formulaire
}
?>

5) Personnaliser l'aperçu du captcha

Les couleurs par défaut sont malheureusement très tape-à-l'œil. Le rouge ne va pas forcément avec le design de votre site. Il est alors pratique de pouvoir adapter le design du formulaire. Il y a quelques thèmes par défaut qu'il est possible d'utiliser. Pour cela il faut utiliser le code suivant sur votre page web entre <head> et </head>:

<script type="text/javascript">
var RecaptchaOptions={
lang: 'fr',
theme: 'clean'
};
</script>

A noter: ce code permet par la même occasion de franciser l'interface.

Il faut également savoir qu'il y a plusieurs thèmes de base possible. Il est possible de remplacer "clean" par une des valeurs suivantes: white, red (par défaut), blackglass ou custom. N'hésitez pas à tester pour voir à quoi ressemble l'interface dans chacun de ces cas.

Auteur: Tony Archambeau

Développeur web passionné par le référencement et l'ergonomie d'utilisation des sites et applications web, j'édite plusieurs sites web dont infowebmaster.fr.

Commentaires


Jennifer
Le 20 février 2010

Merci beaucoup pour le présentation. Sorry, my French is still not so good, I am just learning French.  I have translated your post into German. It was very helpful. Best regards Jennifer


Funnycat [site]
Le 20 février 2010

@Jennifer: No problem at all. I’m glad there are visitors in different part of the world. :)


poker gratuit sans telechargement
Le 23 février 2010

Merci bien pour ce tuto je l’ai effectivement mis en place sur un site,e t beaucoup moins de commentaire inutile d’un coup ! Bravo pour l’article .


anne74
Le 20 mars 2010

C’est très efficace mais il y a surement des logiciels qui passent outre.


Funnycat [site]
Le 20 mars 2010

@anne74: Actuellement je suis plutôt content des résultats. Si vous trouvez mieux, n’hésitez pas à me le faire savoir. :)


Christophe
Le 22 mars 2010

Bon tuto et bon sujet. J’ai mis en place recaptcha sur mon site, c’est super facile à installer.


Funnycat [site]
Le 22 mars 2010

@Christophe: Félicitation, le captcha s’intègre plutôt bien au design de votre site.


Christophe
Le 23 mars 2010

Merci Funnycat! :)


Theme wordpress gratuit
Le 30 mars 2010

très bon tuto
merci


Renaud
Le 16 avril 2010

Utilisateur de wordpress sur plusieurs sites j’utilise plutot simplecaptcha mais je viens de voir que ReCaptcha existe pour WP aussi … Dès que j’ai du temps je l’essayerais. Il est graphiquement sympa.


sebastien
Le 20 août 2010

C’est effectivement très efficace mais gênant pour l’utilisateur qui dois parfois ce voir retaper plusieurs fois le code car celui ci est tellement modifier qu’il apparait difficilement lisible.


Vitoutso
Le 4 septembre 2010

Bonjour,
J’ai scrupuleusement suivi les différentes étapes pour installer le Captcha, cependant je peux malgré-tout envoyer le formulaire sans avoir besoin de taper le code du Captcha.
Qu’est-ce que j’ai oublié ou qu’est-ce que j’ai mal fait ?
Une aide serait appréciée, merci d’avance
 
Vitoutso
 


Funnycat [site]
Le 4 septembre 2010

@vitoutso: Si vous souhaitez de l’aide, inscrivez-vous et poster un message sur le forum PHP associé à ce blog. En précisant le code PHP que vous avez-utilisé si ça se révèle utile. Ça sera plus facile que d’utiliser les commentaires de ce blog. :)


poker virtuel
Le 4 octobre 2010

Merci pour le tuto, c’est justement ce dont j’avais besoin pour plusieurs de mes sites :) Merci à bientôt

Sorry, the comment form is closed at this time.