Vous avez certainement déjà entendu parler de Captcha... Si ce n'est pas le cas alors sachez que Captcha désigne les images générées aléatoirement par un script pour vérifier qu'un humain est bel et bien derrière l'écran pour lui donner accès à certains services. On peut par exemple citer l'enregistrement à un forum, à une zone réservée, faire suivre un article à un ami, etc. Pourquoi prendre autant de précaution ? Parce que ces services pourrait être utilisés de manière mal intentionnée par des scripts externes et des robots spammeurs.

Ne croyez pas que votre site sera complétement protégé avec Captcha. Des outils existent pour cracker les images captchas (http://sam.zoy.org/pwntcha/). Il faut donc choisir un bon compromis entre lisibilité de l'image et niveau de sécurité.

Installation de Captcha pour TYPO3

La première chose à faire consiste à installer captcha si ce n'est pas déjà fait :)  Voici le lien vers l'extension Captcha sur TYPO3.org. Aucun manipulation particulière lors de l'installation via l'extension manager - notez simplement le chemin d'installation (typo3conf/ext/captcha par ex).

Tester Captcha

Rien de plus simple. Affichez dans votre navigateur l'image générée par l'extension (www.monsite.com/typo3conf/ext/captcha/captcha/captcha.php).Vous devriez apercevoir une image de ce type :

Pas très lisible non ?

Améliorer la lisibilité de l'image Captcha

L'extension Captcha utilise des fonctions de PHP qui ne sont pas assez évoluées pour spécifier votre propre type de police (arial, verdana, etc...) ni la taille souhaitée. La principale fonction utilisée est imagestring. Imagestring prend plusieurs arguments avec notamment un paramètre de police prédéfinie :

imagestring ( resource image, int font, int x, int y, string s, int col )

où font est un entier pouvant varier de 1 à 5. Or, on aimerait bien ajouter une taille ou une police spécifique.

Nous allons donc utiliser deux autres fonctions en PHP. Il s'agit de imagettfbox et de imagettftext.

array imagettfbbox ( float size, float angle, string fontfile, string text )
array imagettftext ( resource image, float size, float angle, int x, int y, int color, string fontfile, string text )

imagettftext dessine un texte avec une police TrueType définie tandis que imagettfbox dessine un rectangle autour de ce texte. Pour spécifier votre police, uploader dans le même répertoire que captcha.php votre fichier de police. Dans mon cas, on utilisera la police arial représentée par le fichier arial.ttf. On choisi une taille : 16

Un peu de programmation

Rassurez-vous, ce n'est pas grand chose :)

Commentez la ligne qui fait appel à la fonction imagestring :

//Imagestring($img_number,5,1,1,$text,$textcolor);

Modifiez les lignes suivantes :

// Hauteur / Largeur du cadre - 30x70
$imgHeight = 30;
$imgWidth = 70;

// Couleur du cadre (couleurs RGB - 238x238x238)
$backcolor = imagecolorallocate($img_number,238,238,238);

Puis ajoutez les lignes suivantes après la fonction imagefill

// Police à uploader dans le même répertoire
$font = dirname(__file__) . '/arial.ttf';

// La taille de ma police
$fontsize = 16;

// Fonction imagestring désactivée
//Imagestring($img_number,5,1,1,$text,$textcolor);

$size = imagettfbbox($fontsize, 0, $font, $text);
$long_text = $size[2]+$size[0];
$posx = ($imgWidth - $long_text)/2;
imagettftext($img_number,$fontsize,0, $posx, (imagesy($img_number)) - (imagefontheight($fontsize)/2),$textcolor, $font,$text);

La variable backcolor spécifie la couleur de fonc au format RGB. $font spécifie le fichier de police tandis que $fontsize spécifie la taille. $long_text et $posx sont utilisée pour centrer le texte dans le cadre ; on calcule notamment la largeur du texte en fonction de la taille et de la police utilisée.

Voici le code résumé (notez l'emplacement d'imagefill).

// Hauteur / Largeur du cadre - 30x70
$imgHeight = 30;
$imgWidth = 70;

// Couleur du cadre (couleurs RGB - 238x238x238)
$backcolor = imagecolorallocate($img_number,238,238,238);

imagefill($img_number,0,0,$backcolor);

// Police à uploader dans le même répertoire
$font = dirname(__file__) . '/arial.ttf';

// La taille de ma police
$fontsize = 16;

// Fonction imagestring désactivée
//Imagestring($img_number,5,1,1,$text,$textcolor);

$size = imagettfbbox($fontsize, 0, $font, $text);
$long_text = $size[2]+$size[0];
$posx = ($imgWidth - $long_text)/2;
imagettftext($img_number,$fontsize,0, $posx, (imagesy($img_number)) - (imagefontheight($fontsize)/2),$textcolor, $font,$text);

Et on obtient une image enfin lisible ! Voici un exemple avec d'autres couleurs RGB.