Captcha (anti-robot)

mars073

Bonjour à tous, 
J'ai fais un topic sur la création d'image et la sécu, et j'ai eu aucun commentaire :E 
mais bon là je vais faire un mélange des 2 je vais vous expliquer comment faire une captcha de base. 
Pour ceux qui ne qui n'ont jamais entendu parler des captcha, et non chapka (le chapeau russe), c'est le plus nouveau une suite de chiffre ou/et de lettre qu'il faut recopier lorsque l'on inscrit ou que l'on fait appel à un service sur un site. 
Contexte: On doit généré un code qui fait entre 3 et 5 caractères alphanumérique en majuscule sauf 0 (car c'est lourd mélanger le O et le 0).
<pre class="ipsCode prettyprint lang-auto">
<?php
$chars = "123456789AZERTYUIOPQSDFGHJKLMWXCVBN"; // La liste des caractères possible
$code = "";
$code_len = rand(3, 5); // longueur de code aléatoire
for ($i = 0; $i < $code_len; $i++) {
$code .= $chars[rand(0, strlen($chars)-1)]; // ajout d'un caractère au hasard
}

echo $code;
?&gt;

</pre>
maintenant on génère un image avec:
<pre class="ipsCode prettyprint lang-auto">
<?php
header('Expires: Mon, 1 Jan 2000 01:00:00 GMT'); // date à la quelle l'image doit d'être supprimée (il y a +14 ans xD)
header('Cache-Control: no-store, no-cache, must-revalidate'); // on dit que ça doit pas mettre sauvegardé dans le cache
header('Cache-Control: post-check=0, pre-check=0', false); // même chose
header("Content-type: image/png"); // type d'image png, vous pouvez aussi mettre en jpeg et diminuer la qualité pour avoir un truc pour perturber les robots...

$img = imagecreatetruecolor(120, 30); // génération d'une image de 120px de large et 30px de haut
imagefill($img, 0, 0, 0xFFFFFF); // la couleur de fond est blanc dans ce cas-ci

$chars = "123456789AZERTYUIOPQSDFGHJKLMWXCVBN"; // La liste des caractères possible
$code = "";
$code_len = rand(3, 5); // longueur de code aléatoire
for ($i = 0; $i &lt; $code_len; $i++) {
	$code .= $chars[rand(0, strlen($chars)-1)]; // ajout d'un caractère au hasard
}

imagestring($img, 5, 20, 10, $code, 0x000000);

imagepng($img);
imagedestroy($img);
?&gt;

</pre>
rendu: <img alt="captcha.old.png" src="http://mars073.zz.mu/demo/captcha/captcha.old.png"/> 
fonction non-vu dans mon autre topic:

<a href="http://be2.php.net/manual/fr/function.imagecreatetruecolor.php" rel="external nofollow">imagecratetruecolor()</a> crée une image avec toute les couleurs (+16 million).
<a href="http://be2.php.net/manual/fr/function.imagefill.php" rel="external nofollow">imagefill()</a> ça vous permet de remplir votre image d'une certaine couleur.
<a href="http://be2.php.net/manual/fr/function.imagestring.php" rel="external nofollow">imagestring()</a> écrire un simple texte sur l'image. 
0x000000 est l'équivalent du code couleur hexadécimal #000000 le système souvent utilisé en html, css, lua, etc. Normalement on utilise une variable (car les couleurs ne sont pas correctes de mémoire) le code pour le remplissage aurait donc due être:
<pre class="ipsCode prettyprint lang-auto">
<?php
$blanc = imagecolorallocate($img, 255, 255, 255);
imagefill($img, 0, 0, $blanc); // la couleur de fond est blanc dans ce cas-ci
?>
</pre>
la fonction <a href="http://be2.php.net/manual/fr/function.imagecolorallocate.php" rel="external nofollow">imagecolorallocate()</a> permet de déclarer une couleur en peu comme en css avec par exemple: "rgb( 255, 255, 255);". 
une image php peut se mettre au même titre que n'importe quelle image dans un code html:
<pre class="ipsCode prettyprint lang-auto">

<img src="captcha.php" border="0">
<input type="text" name="antirobot" placeholder="Recopier le code...">
</pre>
Mais comment on fait pour connaître code après? simplement avec une variable $_SESSION et au passage on va ajouter entre 2 et 6 lignes en arrière-plan.
<pre class="ipsCode prettyprint lang-auto">
<?php
session_start();
header('Expires: Mon, 1 Jan 2000 01:00:00 GMT'); // date à la quelle l'image doit d'être supprimée (il y a +14 ans xD)
header('Cache-Control: no-store, no-cache, must-revalidate'); // on dit que ça doit pas mettre sauvegardé dans le cache
header('Cache-Control: post-check=0, pre-check=0', false); // même chose
header("Content-type: image/png"); // type d'image png, vous pouvez aussi mettre en jpeg et diminuer la qualité pour avoir un truc pour perturber les robots...

$img = imagecreatetruecolor(120, 30); // génération d'une image de 120px de large et 30px de haut
imagefill($img, 0, 0, 0xFFFFFF); // la couleur de fond et blanc dans ce cas-ci

$chars = "123456789AZERTYUIOPQSDFGHJKLMWXCVBN"; // La liste des caractères possible
$code = "";
$code_len = rand(3, 5); // longueur de code aléatoire

$line_n = rand(2, 6); // nombre de ligne aléatoire entre 2 et 6
for ($i=0; $i < $line_n; $i++) {
// position du point de départ et de fin de la ligne au hasard
imageline($img, rand(1, imagesx($img)), rand(1, imagesy($img)), rand(1, imagesx($img)), rand(1, imagesy($img)), 0x000000);
}

for ($i = 0; $i < $code_len; $i++) {
$code .= $chars[rand(0, strlen($chars)-1)]; // ajout d'un caractère au hasard
}
$_SESSION['code'] = $code;
imagestring($img, 5, 20, 10, $code, 0x000000);

imagepng($img);
imagedestroy($img)
?>
</pre>
fonctions:
<a href="http://be2.php.net/manual/fr/function.imageline.php" rel="external nofollow">imageline()</a> tracer une ligne sur une image avec un point de départ et un point de fin.
<a href="http://be2.php.net/manual/fr/function.imagesx.php" rel="external nofollow">imagesx()</a> retourne la largeur de l'image.
<a href="http://be2.php.net/manual/fr/function.imagesy.php" rel="external nofollow">imagesy()</a> retourne la hauteur de l'image. 
Protégé contre les robots? haha t'es marrant, je te tuerais en dernier. En faite il est extrêmement compliqué... enfin les vrai robot pas les trucs en mousse codé en javascript ou en vb. 
maintenant on va faire en sorte que les lettres soient positionnées un peu aléatoirement:
<pre class="ipsCode prettyprint lang-auto">
<?php
session_start();
header('Expires: Mon, 1 Jan 2000 01:00:00 GMT'); // date à la quelle l'image doit d'être supprimée (il y a +14 ans xD)
header('Cache-Control: no-store, no-cache, must-revalidate'); // on dit que ça doit pas mettre sauvegardé dans le cache
header('Cache-Control: post-check=0, pre-check=0', false); // même chose
header("Content-type: image/png"); // type d'image png, vous pouvez aussi mettre en jpeg et diminuer la qualité pour avoir un truc pour perturber les robots...

$img = imagecreatetruecolor(120, 30); // génération d'une image de 120px de large et 30px de haut
imagefill($img, 0, 0, 0xFFFFFF); // la couleur de fond et blanc dans ce cas-ci

$chars = "123456789AZERTYUIOPQSDFGHJKLMWXCVBN"; // La liste des caractères possible
$code = "";
$code_len = rand(3, 5); // longueur de code aléatoire

$line_n = rand(2, 6); // nombre de ligne aléatoire entre 2 et 6
for ($i=0; $i < $line_n; $i++) {
// position du point de départ et de fin de la ligne au hasard
imageline($img, rand(1, imagesx($img)), rand(1, imagesy($img)), rand(1, imagesx($img)), rand(1, imagesy($img)), 0x000000);
}

for ($i = 0; $i < $code_len; $i++) {
$char = $chars[rand(0, strlen($chars)-1)]; // un caractère au hasard
$code .= $char; // ajout du catactère
imagestring($img, 5, 20+($i*12)+rand(-2, 2), 10+rand(-10, 5), $char, 0x000000);
}
$_SESSION['code'] = $code;

imagepng($img);
imagedestroy($img)
?>
</pre>
maintenant on va mettre des couleurs et flouter l'image avec une matrix:
<pre class="ipsCode prettyprint lang-auto">
<?php
session_start();
header('Expires: Mon, 1 Jan 2000 01:00:00 GMT'); // date à la quelle l'image doit d'être supprimée (il y a +14 ans xD)
header('Cache-Control: no-store, no-cache, must-revalidate'); // on dit que ça doit pas mettre sauvegardé dans le cache
header('Cache-Control: post-check=0, pre-check=0', false); // même chose
header("Content-type: image/png"); // type d'image png, vous pouvez aussi mettre en jpeg et diminuer la qualité pour avoir un truc pour perturber les robots...

$img = imagecreatetruecolor(120, 30); // génération d'une image de 120px de large et 30px de haut
imagefill($img, 0, 0, 0xA3A3A3); // la couleur de fond et blanc dans ce cas-ci

$chars = "123456789AZERTYUIOPQSDFGHJKLMWXCVBN"; // La liste des caractères possible
$code = "";
$code_len = rand(3, 5); // longueur de code aléatoire

$line_n = rand(2, 6); // nombre de ligne aléatoire entre 2 et 6
for ($i=0; $i < $line_n; $i++) {
// position du point de départ et de fin de la ligne au hasard
imageline($img, rand(1, imagesx($img)), rand(1, imagesy($img)),
rand(1, imagesx($img)), rand(1, imagesy($img)), "0x".dechex(rand(20, 200)).dechex(rand(20, 200)).dechex(rand(20, 200)));
}

for ($i = 0; $i < $code_len; $i++) {
$char = $chars[rand(0, strlen($chars)-1)]; // un caractère au hasard
$code .= $char; // ajout du catactère
imagestring($img, 5, 20+($i*12)+rand(-2, 2), 10+rand(-10, 5), $char, "0x".dechex(rand(180, 255)).dechex(rand(180, 255)).dechex(rand(180, 255)));
}
$_SESSION['code'] = $code;

$flou = array(
array(1.0, 2.0, 1.0),
array(2.0, 4.0, 2.0),
array(1.0, 2.0, 1.0)
);
imageconvolution($img, $flou, 16, 0);

imagepng($img);
imagedestroy($img)
?>
</pre>
ps: la fonction <a href="http://be2.php.net/manual/fr/function.dechex.php" rel="external nofollow">dechex()</a> permet de transformer un chiffre décimal en hexadécimale pour le code couleur. 
et donc le test de la captcha en requête POST (par exemple) donnerait:
<pre class="ipsCode prettyprint lang-auto">
<?php
session_start();
if (isset($_POST['antirobot'])) {
if ($_POST['antirobot']==$_SESSION['code']) {
echo "Le code est valide";
} else {
echo "Le code est incorrect";
}
}
?>
</pre>
Rendu final: <img alt="captcha.png" src="http://mars073.zz.mu/demo/captcha/captcha.png"/> 
moche et compliqué à lire, c'est ça le principe? non à vous de modifier 
Bonne programmation à tous! 
Cordialement, 
Mars073

Soulalex

C'est compliqué pour moi tout ça ^^ Est-ce qu'on pourrait avoir une image du rendu final ?

mars073

un peu de patience il y avait "... rédaction en cours ..." en bas, pour dire que je n'avais pas fini s'il y a des trucs un peu chaud à comprendre faut me le dire je mets plus d'explications

Azad

Merci de ce tutoriel, je compte m'en servir rapidement sur un prochain site. 
+1 Rep.

NodeBB

Captcha (anti-robot)