Image de l'article Code de sécurité en PHP pour vos formulaires

Code de sécurité en PHP pour vos formulaires

Un code de sécurité c'est quoi ?

C'est une image qui représente un texte que les utilisateurs devront copier dans un champ de texte pour prouver qu'ils ne sont pas des robots spammeurs qui ne cherchent rien d'autres que polluer les sites avec leurs publicités qui n'intéressent personne !

captcha_exemple3 captcha_exemple1

Le principe de mise en place est le suivant :

  1. Il faut générer le code de sécurité.
  2. Créer une image qui représente ce code.
  3. Afficher l'image.
  4. Enregistrer le code dans une variable de session.
  5. Lorsque le formulaire est envoyé, comparer le code de l'utilisateur avec le code en session.

Cette première partie couvre les points 1 à 3.

Générer un code de sécurité en PHP

La fonction suivante crée un texte aléatoire dont vous spécifiez le nombre de mot et de caractères.

Cette fonction peut utiliser 3 paramètres facultatifs :

  1. $WordNb : nombre de mot à générer
  2. $aCharMin : nombre de caractères minimum par mot
  3. $aCharMax : nombre de caractères maximum par mot

function CaptchaRandomWord($WordNb=1, $aCharMin=5, $aCharMax=10){
	$lst = "abcdefghijklmnopqrstuvwxyz";
	$str = '';
	for($i=0; $i<$WordNb; $i++){
		if($WordNb>1 && $i>0) $str .= ' ';
		$nb = rand($aCharMin, $aCharMax);
		for($j=0; $j<$nb; $j++){
			$str .= substr($lst, rand(0, 25), 1);
		}
	}
	return $str;
}

Vous pouvez ajouter des chiffres ou tout autre caractère que vous jugez indispensable en modifiant la variable $lst. Voici quelques exemples de ce que génère cette fonction.


echo CaptchaRandomWord();
// lofwgpw
echo CaptchaRandomWord(2, 3, 5);
// rqqe lmxg
echo CaptchaRandomWord(2, 3, 5);
// whqfc iydiy

Transformer du texte en image avec en PHP

Une fois votre code initialisé il faut créer l'image qui va le représenter.

Nous allons créer l'image avec imagecreatetruecolor(), écrire le texte avec imagestring() et enregistrer l'image dans un fichier avec imagepng().

Avant tout, il faut déterminer la position du mot dans l'image. Plutôt que de l'écrire aux coordonnées 0, 0, on va essayer de centrer le texte dans l'image.

comment center du texte dans une image en PHP

Il suffit de soustraire la moitié de la largeur du texte à la moitié de largeur de l'image :
- Largeur de l'image/2 - Largeur du texte/2
- (Largeur de l'image - Largeur du texte)/2

Dans cet article on utilise uniquement la typo par défaut de la librairie GD. On peut ainsi connaître la largeur d'un caractère avec imagefontwidth(). Pour calculer la longueur du texte on multiplie la largeur d'un caractère par le nombre de caractères (strlen()).

Le principe est le même pour la hauteur :
- (Hauteur de l'image - hauteur d'un caractère)/2


// créer une image avec la bibliothèque GD
function CaptchaImage($aText='', $aPath='', $aWidth=200, $aHeight=50){
	if(empty($aText) || empty($aPath)) return 0;
	$fontSize = 6;
	
	// calcul les coordonnées X et Y pour centrer le texte dans l'image
	// coordonnées X
	$fontW = imagefontwidth($fontSize);
	$strW = $fontW*strlen($aText);
	$strX = ($aWidth/2-$strW)/2;
	
	// calcule la coordonnée Y
	$fontH = imagefontheight($fontSize);
	$strY = ($aHeight-$fontH)/2;
	
	// créer l'image
	$img = imagecreatetruecolor($aWidth, $aHeight);
	
	// ajoute un fond clair
	$color = imagecolorallocate($img, 250, 250, 250)
	imagefill($img, 0, 0, $color);
	
	// affiche le texte
	$color = imagecolorallocate($img, 0, 0, 0);
	imagestring($img, $fontSize, $strX, $strY, $aText, $color);
	
	// enregistre l'image sur le disque.
	// je préfère enregistrer l'image  en PNG plutôt qu'en JPG à 100%
	// car le fichier généré est plus petit.
	// enregistre l'image sur le disque
	imagepng($img, $aPath);
	
	// détruit la variable en mémoire
	imagedestroy($img);
	
	// renvoi 1 pour indiquer que tout s'est bien passé
	// pensez à toujours renvoyer quelque chose
	return 1;
}

Exemple de mise en place en PHP

Voici un exemple simple d'affichage du code de sécurité.


$txt = CaptchaRandomWord(2, 3, 5);
CaptchaImage($txt, "test.png", 200, 50);
$h = '<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Code de sécurité</title></head><body>';
$h .= '<h1>Code</h1>';
$h .= '<img src="test.png" width="200px" height="50px" alt="" />';
$h .= '<p>texte : "'.$txt.'"</p>';
$h .= '</body></html>';
echo $h;

Démo

Et maintenant ?

Cette première partie vous a permis de voir comment générer un code aléatoire et comment le transformer en image simplement.

Dans la partie suivante je vous montrerais comment améliorer l'esthétique de l'image et utiliser des vrais mots, plus facile à écrire pour l'utilisateur que des caractères aléatoires.

Liens vers les autres parties de cet article

  1. Création d'un code de sécurité
  2. Amélioration du code de sécurité
  3. Vérification

Article précédent : jsSimpleColorPickr sélecteur de couleur Javascript

Article suivant : Liste PHP des pays du monde

 

Image Viewer