Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Faire une image anti- robots (ou captcha) facilement Par Francois GAY (fecgay)

Faire une image anti- robots (ou captcha) facilement Par Francois GAY (fecgay) et Benoît CRAUET (Kermi) www.openclassrooms.com Licence Creative Commons 6 2.0 Dernière mise à jour le 1/07/2010 Sommaire 2 Sommaire ........................................................................................................................................... 3 Faire une image anti-robots (ou captcha) facilement ......................................................................... 3 Caractéristiques et explication du code ............................................................................................................................ 4 C'est pas tout, mais codons un peu ! .......................................................................................................................................................................... 4 Création du script principal ................................................................................................................................................ 7 Création de notre formulaire de vérification ...................................................................................................................... 7 Création de la page de confirmation ................................................................................................................................. 8 Partager ....................................................................................................................................................................................................................... 2/9 www.openclassrooms.com Faire une image anti-robots (ou captcha) facilement Par Benoît CRAUET (Kermi) et Francois GAY (fecgay) Mise à jour : 01/07/2010 Difficulté : Facile Durée d'étude : 30 minutes Bien le bonjour ! Dans ce tutoriel, nous allons réaliser un générateur de captchas en PHP. Tout d'abord, je réponds à tous ceux qui se posent encore la question : Qu'est-ce qu'un captcha ? Un captcha est une image contenant un code que doit composer l'utilisateur lors d'une inscription, dans un formulaire de contact, etc. Ce concept n'est pas sans utilité, évidemment. En effet, cela empêche les robots de poster des messages de spam : sur votre site, sur vos forums, dans votre boîte mail, etc. C'est compliqué à réaliser ? Comment dire… Prenez le module GD, une session, une condition, et le compte devrait être bon ! Plus sérieusement, il est extrêmement simple de réaliser une image de ce type. Commençons ! Sommaire du tutoriel : Caractéristiques et explication du code Création du script principal Création de notre formulaire de vérification Création de la page de confirmation Caractéristiques et explication du code Bien, nous allons voir que ce script ne requiert pas beaucoup de choses en soi, étant donné qu'il ne nécessite que GD… Euh… c'est bien tout ça, mais c'est quoi GD ? Vous, vous n'avez pas lu le tutoriel PHP / MySQL de M@teo 21 en entier ! GD, si vous ne savez pas ce que c'est (et c'est bien dommage ! ), est un module PHP qui permet de programmer des images dites dynamiques. Par exemple, une image de cette sorte peut afficher la date et l'heure actuelles, et tout ce qui est affichable (donc à peu près tout Sommaire 3/9 www.openclassrooms.com ) sur une page XHTML. La différence est que vous affichez ces informations sur… une image ! Pour plus d'informations sur GD, allez voir le tuto PHP GD de M@teo21 qui explique parfaitement toutes les bases. Le module GD est présent chez tous les hébergeurs aujourd'hui. Très rares sont ceux qui ne le prennent pas en charge. C'est pas tout, mais codons un peu ! Ce petit script va s'occuper de créer une variable qui va nous être fort utile : c'est une session, et elle se nomme aleat_nbr. Nous comparerons ensuite celle-ci avec une autre variable, comme $_POST['code_verif'] par exemple… Alors sortez tous vos éditeurs, bande de bachi-bouzouks ! 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. V oici ce début de code : Code : PHP <?php // On crée la session avant tout session_start(); // On définit la configuration : $nbr_chiffres = 6; // Nombre de chiffres qui formeront le nombre // Là, on définit 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'); Il nous faut aussi définir les couleurs de l'image : Code : PHP <?php // On définit maintenant les couleurs // Couleur de fond : $arriere_plan = imagecolorallocate($_img, 0, 0, 0); // Au cas où on n'utiliserait 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']. Faire une image anti-robots (ou captcha) facilement 4/9 www.openclassrooms.com À la fin de la génération du code, on détruit toutes les variables inutiles avec la fonction unset(). Code : PHP <?php ##### 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 qui s'y trouvent foreach ($chiffres as $caractere) { $nombre .= $caractere; } ##### On a 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 ? Pourquoi s'embêter à faire 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 a pourtant un but. En fait, cette méthode n'est pas très fiable. Si le nombre sélectionné est 007865, le code s'affichera comme suit : 7865. Cela fait donc 2 caractères en moins ! Imaginez que notre mt_rand() sélectionne le nombre 0… Nous nous retrouverions avec un code à 1 caractère… Ça ferait fouillis ! Donc, pour garder le nombre de caractères, nous devons inscrire 6 entrées dans un array, qui contiendront chacune un nombre aléatoire entre 0 et 9. Or, le chiffre 0 est affiché s'il est seul. Comment va se dépatouiller notre script dans ce cas ? Pour résumer, 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 ! Désormais, notre code affichera 007865 au lieu de 7865. Pour terminer notre code, nous allons afficher la variable $nombre (qui je vous le rappelle contient le code généré) dans notre image. Ensuite, nous afficherons notre image, comme ceci : Faire une image anti-robots (ou captcha) facilement 5/9 www.openclassrooms.com Code : PHP <?php imagestring($_img, 5, 18, 8, $nombre, $avant_plan); imagepng($_img); ?> Et je vous informe désormais que notre script est… terminé ! Si vous n'avez grillé aucune étape, et bien écouté en classe, vous devriez avoir un script ressemblant à celui-ci : Code : PHP <?php // On crée la session avant tout session_start(); // On définit la configuration : $nbr_chiffres = 6; // Nombre de chiffres qui formeront le nombre // Là, on définit 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éfinit maintenant les couleurs // Couleur de fond : $arriere_plan = imagecolorallocate($_img, 0, 0, 0); // Au cas où on n'utiliserait 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 qui s'y trouvent foreach ($chiffres as $caractere) { $nombre .= $caractere; } ##### On a 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); ?> Ce simple script vous permet de protéger vos formulaires des vilains robots en soif de spam et autres. Avouez que ça fait Faire une image anti-robots (ou captcha) facilement 6/9 www.openclassrooms.com peur, non ? Création de notre formulaire de vérification Stop ! V oici une partie XHTML que je ne traiterai pas ici. J'estime que si vous en êtes au PHP, vous savez déjà faire du XHTML. Si ce n'est pas chose faite, je vous invite à aller lire sans plus attendre le tutoriel sur le XHTML/CSS de M@teo21 ou, si vous le préférez, le livre du même auteur : Réussir son site web avec XHTML et CSS. Créez tout d'abord le uploads/S4/ faire-une-image-anti-robots-ou-captcha-facilement.pdf