Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zér0 > Les tutoriels > Non-Officiels > Site Web > PHP > Optimisation & Sécurité > Lecture du tutoriel

Faire une image anti-bots facilement

Avatar
Auteur : Kermi
Créé : le 10/06/2006 11:19:14
Modifié : le 17/01/2007 12:42:32
Noter et commenter ce tutoriel
Imprimer ce tutoriel
Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Bonjour :)

Vous vous demandez bien comment faire une image de vérification dans la page d'inscription de votre site ? :o

Sachez que c'est possible avec GD, une session, une image et une condition ! ^^

Nous allons, dans ce tuto, voir cela pas à pas :)
Sommaire du chapitre :

Caractéristiques et explication du code

Bien, nous allons voir que ce script ne requit pas beaucoup de choses en soit, étant donné qu'il ne nécessite que GD.

Donc, il est accepté par la majeure partie des hébergeurs existants actuellement ;)

Euh, c'est quoi GD ?


GD, si vous ne savez pas ce que c'est, c'est un module PHP qui permet de "programmer" ses images dynamiques !

Cela veut dire que par exemple, une image de cette sorte peut afficher la date et l'heure actuelle, avec même les secondes et le timestamp ! ^^

En fait, ce genre d'image peut afficher tout ce que peut afficher PHP sur une page normal, mais dans une image !

Pour plus d'informations sur GD, allez voir le tuto PHP GD de M@teo21 qui explique parfaitement bien toutes les bases. :)

Ce script va nous créer une et une seule variable que nous nous servirons : une session, nommée "aleat_nbr". :)

Nous comparerons ceci ensuite avec une autre variable, comme $_POST['code_verif'] par exemple...

Création du script principal

Nous allons créer, ici, le script principal de notre image ! :)

En effet, nous allons, avec quelques lignes, créer une image dynamique et aléatoire.

Pour commencer, créez un fichier nommé verif_code_gen.php dans un répertoire vierge.

Ensuite, enregistrez, dans le même répertoire, cette image que vous appellerez fond_verif_img.png (Clic droit > Enregistrer la cible sous...)

Nous allons tout d'abord ouvrir le fichier verif_code_gen.php que vous avez normalement créé tout à l'heure.

Il nous faut donc maintenant démarrer la session avant tout, nous devrons ensuite créer une image depuis fond_verif_img.png.

Je vous ajoute en prime dans ce code le header() pour afficher une image, et la variable $nbr_chiffres qui contient le nombre de chiffres aléatoires à afficher.

Voici ce début de code :

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<?php
// On crée la session avant tout
session_start();

// On défini la configuration :
if(!IsSet($_GET['nbr_chiffres'])) {
     $nbr_chiffres = 6; // Nombre de chiffres qui formerons le nombre par défaut
}
else {
     $nbr_chiffres = $_GET['nbr_chiffres']; // Si l'on met dans l'adresse un ?nbr_chiffres=X
}

// Là, on défini le header de la page pour la transformer en image
header ("Content-type: image/png");
// Là, on crée notre image
$_img = imagecreatefrompng('fond_verif_img.png');


Notez l'utilisation de la variable $_GET qui vous permettra de changer le nombre de chiffres temporairement.


Il nous faut aussi définir les couleurs de l'image :

Code : PHP
1
2
3
4
5
// On défini maintenant les couleurs
// Couleur de fond :
$arriere_plan = imagecolorallocate($_img, 0, 0, 0); // Au cas où on utiliserai pas d'image de fond, on utilise cette couleur là.
// Autres couleurs :
$avant_plan = imagecolorallocate($_img, 255, 255, 255); // Couleur des chiffres


Maintenant, nous allons ajouter le module de montage du nombre aléatoire qui fonctionne grâce à un array et à un foreach().

Le nombre généré sera ensuite enregistré dans $_SESSION['aleat_nbr'].

A la fin de la génération du code, on détruit toutes les variables inutiles avec la fonction unset().

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
##### Ici on crée la variable qui contiendra le nombre aléatoire #####
$i = 0;
while($i < $nbr_chiffres) {
        $chiffre = mt_rand(0, 9); // On génère le nombre aléatoire
        $chiffres[$i] = $chiffre;
        $i++;
}
$nombre = null;
// On explore le tableau $chiffres afin d'y afficher toutes les entrées qu'y s'y trouvent
foreach ($chiffres as $caractere) {
        $nombre .= $caractere;
}
##### On as fini de créer le nombre aléatoire, on le rentre maintenant dans une variable de session #####
$_SESSION['aleat_nbr'] = $nombre;
// On détruit les variables inutiles :
unset($chiffre);
unset($i);
unset($caractere);
unset($chiffres);


Mais, mais ? Pourquoi s'embêter à faire tout un monstre pareil pour afficher un nombre aléatoire de 6 chiffres ?
Pourquoi ne pas utiliser tout simplement un mt_rand(0, 999999); ???


Ah oui :)

Cette question est souvent posée mais cette technique à pourtant un but.

En fait, avec cette méthode, c'est pas très fiable, étant donné que si le nombre sélectionné est 007865, le code s'affichera comme suit : 7865

Cela fait donc 2 caractères en moins !

Donc, pour garder le nombre de caractères, nous devons entrer 6 entrées dans un array, qui contiendrons chacune d'entre elles un nombre aléatoire entre 0 et 9. Or, le chiffre 0 est affiché s'il est seul.

En fait, dans ce code, php va générer ça différemment :

  1. Je crée l'entrée 0 dans l'array, et je sélectionne aléatoirement un chiffre entre 0 et 9.
  2. Je crée l'entrée 1 dans l'array, et je sélectionne aléatoirement un chiffre entre 0 et 9.
  3. Je crée l'entrée 2 dans l'array, et je sélectionne aléatoirement un chiffre entre 0 et 9.
  4. Je crée l'entrée 3 dans l'array, et je sélectionne aléatoirement un chiffre entre 0 et 9.
  5. etc...


Tout simplement ;)

Ce qui donne finalement, à l'affichage, ce code là : 007865 au lieu de 7865 :)

Pour finir notre code, nous allons afficher la variable $nombre (celle qui contient tout le code de confirmation) dans notre image, et après ça, nous afficherons notre image :

Code : PHP
1
2
3
4
imagestring($_img, 5, 18, 8, $nombre, $avant_plan);

imagepng($_img);
?>


Et voilà ! Votre script est terminé !

Si vous n'avez sauté aucune étape, vous devriez avoir un fichier comme celui-ci :

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?php
// On crée la session avant tout
session_start();

// On défini la configuration :
if(!IsSet($_GET['nbr_chiffres'])) {
     $nbr_chiffres = 6; // Nombre de chiffres qui formerons le nombre par défaut
}
else {
     $nbr_chiffres = $_GET['nbr_chiffres']; // Si l'on met dans l'adresse un ?nbr_chiffres=X
}

// Là, on défini le header de la page pour la transformer en image
header ("Content-type: image/png");
// Là, on crée notre image
$_img = imagecreatefrompng('fond_verif_img.png');

// On défini maintenant les couleurs
// Couleur de fond :
$arriere_plan = imagecolorallocate($_img, 0, 0, 0); // Au cas où on utiliserai pas d'image de fond, on utilise cette couleur là.
// Autres couleurs :
$avant_plan = imagecolorallocate($_img, 255, 255, 255); // Couleur des chiffres

##### Ici on crée la variable qui contiendra le nombre aléatoire #####
$i = 0;
while($i < $nbr_chiffres) {
        $chiffre = mt_rand(0, 9); // On génère le nombre aléatoire
        $chiffres[$i] = $chiffre;
        $i++;
}
$nombre = null;
// On explore le tableau $chiffres afin d'y afficher toutes les entrées qu'y s'y trouvent
foreach ($chiffres as $caractere) {
        $nombre .= $caractere;
}
##### On as fini de créer le nombre aléatoire, on le rentre maintenant dans une variable de session #####
$_SESSION['aleat_nbr'] = $nombre;
// On détruit les variables inutiles :
unset($chiffre);
unset($i);
unset($caractere);
unset($chiffres);

imagestring($_img, 5, 18, 8, $nombre, $avant_plan);

imagepng($_img);
?>


J'utilise mon script sur mon site, et il n'as jamais buggué ! Il est aussi assez rapide dans la mesure où, aucunes includes, aucunes connexions à mysql ne sont faites et que j'utilise des quotes simples à la place de quotes doubles.

Petit rappel sur les quotes en PHP





Les doubles quotes cherchent donc à parser les variables inclusent dans la chaîne directement. Cela signifie qu'il "scanne" la chaîne en même temps de la lire.

Création de notre formulaire de vérification

Je vais pas le faire en 50 exemplaires, mais là on doit juste coder du HTML :)

Créez tout d'abord le fichier inscription.html que vous mettrez dans le même répertoire que tout les autres fichiers créés.

Ensuite, mettez-y ce code HTML :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<title>Inscription</title>
</head>
<body>
<form action="verif_insc.php" method="post">
<p><label>Pseudo</label> : <input type="text" name="pseudo" /></p>
<p><label>Mot de passe</label> : <input type="password" name="mdp" /></p>
<p><label>Retapez votre MdP</label> : <input type="password" name="mdpv" /></p>
<p><label>E-Mail</label> : <input type="text" name="email" /></p>
<p><label>Retapez votre E-Mail</label> : <input type="text" name="emailv" /></p>
<!-- On affiche l'image générée par notre script -->
<p><img src="verif_code_gen.php" alt="Code de vérification" /></p>

<p><label>Merci de retaper le code de l'image ci-dessus</label> : <input type="text" name="verif_code" /></p>
<p><input type="submit" value="Inscription" /></p>
</form>
</body>
</html>


Tout simplement.

Création de la page de confirmation

Là aussi, je vais pas vous faire un roman.

On est là pour l'image de vérification, pas pour une page d'inscription, donc je ne traiterait pas les autres champs présents dans notre formulaire. Je vérifierait juste le code de confirmation.


Vous devez créer le fichier verif_insc.php dans le même répertoire que inscription.html

Maintenant, entrez-y ce code :

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
session_start(); // L'image utilise les sessions, donc on les active ici car on as besoin de ces informations
$debut_html = '<html>
<head>
<title>Inscription</title>
</head>
<body>
<p>';
$milieu_html = NULL;
$fin_html = '</p>
</body>
</html>';

if(IsSet($_POST['verif_code']) AND !Empty($_POST['verif_code'])) { // Le champ du code de confirmation a été remplis
     if($_POST['verif_code']==$_SESSION['aleat_nbr']) { // Si le champ est égal au code généré par l'image
          $milieu_html = 'Vous avez entré le bon code de confirmation !';
     }
     else {
          $milieu_html = 'Votre code de confirmation n\'est pas bon ! Merci de réessayer.<br /><a href="#" onclick="history.go(-1);">Retour</a>';
     }
}
else {
    $milieu_html = 'Vous devez remplir le champ du code de confirmation !';
}

// Là, on affiche toute la source générée :
echo $debut_html . $milieu_html . $fin_html;

?>


Et là, magique, si vous entrez le code correspondant, normalement, le script devrait retourner que votre code est bon ;)

Voilà ! Vous avez maintenant une image de vérification !!!

Changer temporairement le nombre de chiffres dans le code

Je vous ai parlé, tout à l'heure, dans la seconde partie, d'une variable $_GET permettant de changer temporairement le nombre de chiffres constituant le code.

Si vous souhaitez, pour une seule page en particulier, diminuer le nombre de chiffres sans avoir à créer un deuxième script contenant plus de chiffres, vous pouvez appeller votre image comme suit :

Code : HTML
1
<img src="verif_img.php?nbr_chiffres=4" alt="Image de vérification" />


Ainsi, votre image contiendra 4 chiffres seulement à l'endroit où vous l'avez appellée ainsi.

Pour afficher le nombre de chiffres par défaut, vous n'avez juste qu'à enlever cette option :

Code : HTML
1
<img src="verif_img.php" alt="Image de vérification" />


Tout simplement. :)

Q.C.M.

Quel module permet de "programmer des images" en PHP ?
Grâce à quelle fonction pouvons-nous utiliser les variables $_SESSION ?
Que fait ce code ?

&lt;code type="php"&gt;
&lt;?php
$var1 = mt_rand(1, 900);
$var2 = mt_rand(900, 1000);
echo $var1;
?&gt;
&lt;/code&gt;


Vous avez donc vu la facilité de créer une image de protection anti-bots sur votre site ! :D

Il suffit juste de savoir manier les sessions et le GD ! ^^

Faites-en bon usage ;)
Auteur : Kermi
Noter et commenter ce tutoriel
Imprimer ce tutoriel

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | Fil RSS | XHTML 1.0 | CSS 2.0
Édité par Simple IT SARL : Nous contacter | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 650 Zéros connectés | Requêtes SQL 8 requêtes | Temps de génération de la page : Total (SQL) 0.0361s (0.0168s)