À l'heure actuelle, nous avons tous rencontré des images CAPTCHA sous des formes en ligne. Les captchas sont un mal nécessaire, et cet article vous apprendra comment ils sont fabriqués.
Veuillez noter que bien qu'il y ait de meilleures solutions tierces automatiques pour CAPTCHAS telles que RecaptCha, ce tutoriel vise simplement à expliquer et à démontrer comment la technologie fonctionne réellement. Nous n'expliquerons pas ce que sont réellement Captchas, comme il est supposé être de notoriété publique et déjà couverte plus en détail ailleurs.
Vous devez avoir installé la bibliothèque GD (Graphics Draw) avant de continuer. Cette bibliothèque permet le dessin de graphiques et d'images via des fonctions PHP intégrées. Pour l'installer, exécutez Sudo apt-get installer php5-gd ou si sur les systèmes d'exploitation non basés sur l'ubuntu, suivez les instructions.
Les captchas sont généralement composés de 3 choses - forme, distorsion et texte.
Nous suivrons les étapes mentionnées ci-dessous:
Le style de procédure utilisé dans cet article est présent uniquement parce qu'il s'agit d'une preuve de concept et de garder le fichier final aussi simple que possible. Dans un vrai projet, vous iriez OOP.
L'image sera traitée par HTML comme si une image externe était affichée à l'aide de la balise «IMG». Deux fonctions sont utilisées - une pour créer l'image et une autre pour l'affichage.
<span><span><?php </span></span><span><span>session_start(); </span></span><span><span>?></span> </span> <span><span><span><title</span>></span>demo.php<span><span></title</span>></span> </span> <span><span><span><body</span> <span>style<span>="<span>background-color:#ddd; </span>"</span></span>></span> </span> <span><span><?php </span></span><span> <span>create_image(); </span></span><span> <span>display(); </span></span><span> <span>/***** definition of functions *****/ </span></span><span> <span>function display() </span></span><span> <span>{ </span></span><span> <span>?></span> </span> <span><span><span><div</span> <span>style<span>="<span>text-align:center;</span>"</span></span>></span> </span> <span><span><span><h3</span>></span>TYPE THE TEXT YOU SEE IN THE IMAGE<span><span></h3</span>></span> </span> <span><span><span><b</span>></span>This is just to check if you are a robot<span><span></b</span>></span> </span> <span><span><span><div</span> <span>style<span>="<span>display:block;margin-bottom:20px;margin-top:20px;</span>"</span></span>></span> </span> <span><span><span><img</span> src<span>="image.png"</span>></span> </span> <span><span><span></div</span>></span> </span> //div1 ends <span><span><span></div</span>></span> //div2 ends </span> <span><span><?php </span></span><span> <span>} </span></span><span> </span><span> <span>function create_image() </span></span><span> <span>{ </span></span><span> <span>$image = imagecreatetruecolor(200, 50); </span></span><span> <span>imagepng($image, "image.png"); </span></span><span> <span>} </span></span><span> </span><span> <span>?></span> </span> <span><span><span></body</span>></span> </span><span><span><?php </span></span><span><span>?></span></span>
La première ligne indique le début de la session de l'utilisateur sur notre page.
La fonction affiche () n'a rien d'autre qu'un code HTML normal qui affiche une image dans le navigateur. En dehors de cela, seul le style est effectué pour que la sortie soit présentable.
À l'intérieur de la fonction create_image (), une variable est utilisée pour référer l'image renvoyée par la fonction ImageCreateTrueColor () qui prend la largeur et la longueur de l'image comme arguments. ImagePng () crée une image PNG du nom et du chemin spécifié (dans le même répertoire).
Une image noire sera la sortie après notre première étape.
Notez que la fonction ImagePng () sera la dernière ligne de notre fonction et toutes les étapes suivantes doivent être insérées dans la fonction create_image () avant cet appel de fonction, sinon ils ne prendraient pas effet.
Toute forme peut être choisie pour le captcha. Nous choisirons un rectangle en utilisant la fonction ImageFildRectangle (). Il faut cinq arguments - référence d'image, démarrage X-POS, démarrer Y-POS, terminer X-POS, terminer Y-POS et la couleur d'arrière-plan. Vous pouvez utiliser la fonction correspondante pour une ellipse pour générer un captcha elliptique.
La fonction ImageColorAllocate () alloue une couleur à une variable car elle prend la combinaison RVB de la couleur comme arguments. Le code suivant doit être ajouté dans la fonction Create ().
<span><span><?php </span></span><span><span>session_start(); </span></span><span><span>?></span> </span> <span><span><span><title</span>></span>demo.php<span><span></title</span>></span> </span> <span><span><span><body</span> <span>style<span>="<span>background-color:#ddd; </span>"</span></span>></span> </span> <span><span><?php </span></span><span> <span>create_image(); </span></span><span> <span>display(); </span></span><span> <span>/***** definition of functions *****/ </span></span><span> <span>function display() </span></span><span> <span>{ </span></span><span> <span>?></span> </span> <span><span><span><div</span> <span>style<span>="<span>text-align:center;</span>"</span></span>></span> </span> <span><span><span><h3</span>></span>TYPE THE TEXT YOU SEE IN THE IMAGE<span><span></h3</span>></span> </span> <span><span><span><b</span>></span>This is just to check if you are a robot<span><span></b</span>></span> </span> <span><span><span><div</span> <span>style<span>="<span>display:block;margin-bottom:20px;margin-top:20px;</span>"</span></span>></span> </span> <span><span><span><img</span> src<span>="image.png"</span>></span> </span> <span><span><span></div</span>></span> </span> //div1 ends <span><span><span></div</span>></span> //div2 ends </span> <span><span><?php </span></span><span> <span>} </span></span><span> </span><span> <span>function create_image() </span></span><span> <span>{ </span></span><span> <span>$image = imagecreatetruecolor(200, 50); </span></span><span> <span>imagepng($image, "image.png"); </span></span><span> <span>} </span></span><span> </span><span> <span>?></span> </span> <span><span><span></body</span>></span> </span><span><span><?php </span></span><span><span>?></span></span>
L'image précédente sera blanche après cette étape.
Maintenant, nous commençons par faire la partie de la distorsion du captcha. En PHP, les lignes sont générées à partir du point de départ (x1, y1) au point final (x2, y2). Maintenant, comme nous voulons que nos lignes touchent les deux extrémités de la boîte, nous garderons les coordonnées
<span>$background_color = imagecolorallocate($image, 255, 255, 255); </span><span>imagefilledrectangle($image,0,0,200,50,$background_color);</span>
La fonction Imageline () prend les coordonnées X1, X2, Y1, Y2 comme arguments dans cet ordre en dehors de la référence d'image et de la couleur de la ligne. La couleur de la ligne a été allouée juste au moment où la couleur d'arrière-plan avait été allouée à l'étape précédente.
La coordonnée y est donnée comme rand () * p car c'est la hauteur de notre boîte et renvoie toujours une valeur inférieure à 50. Vous pouvez également utiliser Rand (0,50). Ils produiront la même plage de sortie.
Des points aléatoires seront générés de la même manière que les lignes aléatoires. La fonction utilisée est imagessetPixel (). Cette fonction prend la valeur des coordonnées où le point sera placé dans la boîte.
<span>$line_color = imagecolorallocate($image, 64,64,64); </span><span>for($i=0;$i<10;$i++) { </span> <span>imageline($image,0,rand()%50,200,rand()%50,$line_color); </span><span>}</span>
La coordonnée x est générée de manière aléatoire en utilisant Rand () * 0 car il s'agit de la largeur de notre boîte et cela renverra toujours une valeur inférieure à 200. Vous pouvez également utiliser Rand (0 200). Ils produiront la même plage de sortie. La coordonnée y est générée comme dans l'étape des lignes.
Nous pointerons au hasard vers une position dans la chaîne (qui contient l'alphabet en bas et en haut) et l'attribuer à la variable $ Letter
<span><span><?php </span></span><span><span>session_start(); </span></span><span><span>?></span> </span> <span><span><span><title</span>></span>demo.php<span><span></title</span>></span> </span> <span><span><span><body</span> <span>style<span>="<span>background-color:#ddd; </span>"</span></span>></span> </span> <span><span><?php </span></span><span> <span>create_image(); </span></span><span> <span>display(); </span></span><span> <span>/***** definition of functions *****/ </span></span><span> <span>function display() </span></span><span> <span>{ </span></span><span> <span>?></span> </span> <span><span><span><div</span> <span>style<span>="<span>text-align:center;</span>"</span></span>></span> </span> <span><span><span><h3</span>></span>TYPE THE TEXT YOU SEE IN THE IMAGE<span><span></h3</span>></span> </span> <span><span><span><b</span>></span>This is just to check if you are a robot<span><span></b</span>></span> </span> <span><span><span><div</span> <span>style<span>="<span>display:block;margin-bottom:20px;margin-top:20px;</span>"</span></span>></span> </span> <span><span><span><img</span> src<span>="image.png"</span>></span> </span> <span><span><span></div</span>></span> </span> //div1 ends <span><span><span></div</span>></span> //div2 ends </span> <span><span><?php </span></span><span> <span>} </span></span><span> </span><span> <span>function create_image() </span></span><span> <span>{ </span></span><span> <span>$image = imagecreatetruecolor(200, 50); </span></span><span> <span>imagepng($image, "image.png"); </span></span><span> <span>} </span></span><span> </span><span> <span>?></span> </span> <span><span><span></body</span>></span> </span><span><span><?php </span></span><span><span>?></span></span>
Lorsqu'il est mis à l'intérieur d'une boucle, il ressemble à ceci-
<span>$background_color = imagecolorallocate($image, 255, 255, 255); </span><span>imagefilledrectangle($image,0,0,200,50,$background_color);</span>
Nous expliquerons les lignes
<span>$line_color = imagecolorallocate($image, 64,64,64); </span><span>for($i=0;$i<10;$i++) { </span> <span>imageline($image,0,rand()%50,200,rand()%50,$line_color); </span><span>}</span>
dans la section suivante.
La fonction ImageString () écrit le texte dans notre image. Il a 6 arguments:
Vous pouvez également utiliser la fonction ImageTtFText () si vous souhaitez avoir une police plus grande et un style de police différent. Il faut 2 arguments supplémentaires pour le style d'angle et de police du texte.
Le calcul de la coordonnée x est effectué par inspection. En gros, les lettres sont espacées d'environ 35 pixels (5 ($ i * 30)) où $ i = 0,1,2,3,4,5,6. En effet, si nous avions gardé cette valeur autour de 15 à 20 pix, il y aurait eu une possibilité que deux lettres se chevauchent. Si la valeur avait été supérieure à 40px, les lettres n'auraient pas intégré à la boîte.
Cela générera un texte CAPTCHA à 6 alphabet. Nous pouvons toujours créer plus d'aléatoire en modifiant les aspects qui ont été maintenus constants en raison de la simplicité, comme la couleur, les coordonnées y, etc.
Le captcha final ressemblera à ceci
Le texte écrit dans le captcha changera chaque fois que vous actualisez la page.
Plus d'aléatoire peut être réalisé en créant des conceptions avec les pixels ou en modifiant la couleur ou la taille.
C'est ici que la réponse de l'utilisateur est prise et après l'avoir traitée, il / elle reçoit une réponse. Au début, un formulaire simple est fabriqué avec une zone de texte d'entrée et un bouton de soumission. Il peut y avoir de nombreuses façons de traiter un captcha conformément aux exigences des applications Web complexes. Mais en gardant les choses simples pour cet exemple, nous le traiterons sur la même page.
Les deux lignes laissées inexpliquées dans les extraits de code précédents entrent en jeu maintenant:
Nous allons modifier la définition de l'affichage () pour ajouter une structure de forme.
Deux boutons de soumission seront utilisés, l'un pour soumettre la chaîne et une autre pour actualiser la page.
Les lignes suivantes seront ajoutées entre les deux balises div de clôture (voir les commentaires dans la fonction d'affichage () précédente)
<span><span><?php </span></span><span><span>session_start(); </span></span><span><span>?></span> </span> <span><span><span><title</span>></span>demo.php<span><span></title</span>></span> </span> <span><span><span><body</span> <span>style<span>="<span>background-color:#ddd; </span>"</span></span>></span> </span> <span><span><?php </span></span><span> <span>create_image(); </span></span><span> <span>display(); </span></span><span> <span>/***** definition of functions *****/ </span></span><span> <span>function display() </span></span><span> <span>{ </span></span><span> <span>?></span> </span> <span><span><span><div</span> <span>style<span>="<span>text-align:center;</span>"</span></span>></span> </span> <span><span><span><h3</span>></span>TYPE THE TEXT YOU SEE IN THE IMAGE<span><span></h3</span>></span> </span> <span><span><span><b</span>></span>This is just to check if you are a robot<span><span></b</span>></span> </span> <span><span><span><div</span> <span>style<span>="<span>display:block;margin-bottom:20px;margin-top:20px;</span>"</span></span>></span> </span> <span><span><span><img</span> src<span>="image.png"</span>></span> </span> <span><span><span></div</span>></span> </span> //div1 ends <span><span><span></div</span>></span> //div2 ends </span> <span><span><?php </span></span><span> <span>} </span></span><span> </span><span> <span>function create_image() </span></span><span> <span>{ </span></span><span> <span>$image = imagecreatetruecolor(200, 50); </span></span><span> <span>imagepng($image, "image.png"); </span></span><span> <span>} </span></span><span> </span><span> <span>?></span> </span> <span><span><span></body</span>></span> </span><span><span><?php </span></span><span><span>?></span></span>
Avant de nous déplacer plus loin, nous devons savoir quand afficher et quand ne pas afficher la zone d'entrée. Il ne sera affiché que
La première condition est remplie en utilisant un drapeau $ qui est défini sur «1» chaque fois que le bouton Soumettre est cliqué. Initialement, il a été défini sur toute autre valeur. La deuxième condition est obtenue en vérifiant si la valeur stockée dans notre variable de session est la même que l'entrée utilisateur (voir le code ci-dessous).
Pour y parvenir, nous remplacerons les lignes suivantes de notre étape de départ au début de l'article:
<span>$background_color = imagecolorallocate($image, 255, 255, 255); </span><span>imagefilledrectangle($image,0,0,200,50,$background_color);</span>
avec:
<span>$line_color = imagecolorallocate($image, 64,64,64); </span><span>for($i=0;$i<10;$i++) { </span> <span>imageline($image,0,rand()%50,200,rand()%50,$line_color); </span><span>}</span>
Notez que les fonctions create_image () et affiche () sont appelées uniquement selon les 2 conditions discutées ci-dessus.
Nous aurons besoin de la variable de session de la page précédente, de sorte que la session n'est pas détruite ici. La session sera automatiquement détruite une fois la fenêtre du navigateur fermé.
le captcha ressemblera à ceci-
Si l'entrée est incorrecte, seulement alors l'utilisateur sera à nouveau invité.
Si l'entrée est correcte, l'utilisateur sera affiché un message.
Il y a une mise en garde mineure - lorsque l'utilisateur appuie sur le bouton arrière, toute image déjà présente dans le cache du navigateur ne rechargera pas, tandis que la page le fait. Dans une demande postale, le bouton de retour du navigateur affichera une page "Document Expired", mais lorsque la demande est obtenue, l'image ne se régénère pas.
La solution est simple - créant des noms uniques d'images à chaque fois, de sorte que le navigateur ne les trouve pas en cache. Nous allons ajouter une chaîne unique renvoyée par la fonction time () intégrée au nom de l'image lors de la création et de l'écart dans le navigateur.
Ajoutez cette ligne juste en dessous où vous avez commencé votre session:
<span>$pixel_color = imagecolorallocate($image, 0,0,255); </span><span>for($i=0;$i<1000;$i++) { </span> <span>imagesetpixel($image,rand()%200,rand()%50,$pixel_color); </span><span>} </span>
Remplacez la balise SRC IMG dans la fonction Display () par
<span>$letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'; </span><span>$len = strlen($letters); </span><span>$letter = $letters[rand(0, $len-1)]; </span> <span>$text_color = imagecolorallocate($image, 0,0,0);</span>
et la partie où nous avons créé l'image PNG dans la fonction create_image () sera également remplacée par
<span>for ($i = 0; $i< 6;$i++) { </span> <span>$letter = $letters[rand(0, $len-1)]; </span> <span>imagestring($image, 5, 5+($i*30), 20, $letter, $text_color); </span> <span>$word.=$letter; </span><span>} </span><span>$_SESSION['captcha_string'] = $word;</span>
Les images seront désormais appelées quelque chose comme Image39342015.png. Cette procédure créera des images autant de fois que la page est actualisée, ce qui peut gaspiller d'énormes quantités d'espace disque, nous nous assurerons donc qu'avant de créer une image, toutes les autres images de l'extension PNG sont supprimées. Ajoutez ce qui suit juste avant que la fonction ImagePng () ne soit appelée.
<span>$word.=$letter; </span><span>$_SESSION['captcha_string'] = $word; </span>
Dans une application de production, assurez-vous simplement d'isoler le dossier où les images CAPTCHA sont stockées, sinon d'autres images utiles peuvent également être supprimées.
Téléchargez le code complet ici.
Faire différents types de captchas en PHP est très facile. Cet article couvrait les trois choses de base utilisées pour créer un captcha standard - forme, distorsion et texte. Cet article était une preuve de concept, et le code présenté ici ne devrait pas être utilisé dans la production - d'autant plus que d'excellentes alternatives telles que RecaptCha existent, ce qui prend également en charge la production solide pour aider les personnes ayant des troubles auditifs. Nous espérons que vous avez trouvé cet article intéressant. Laissez vos commentaires et commentaires ci-dessous!
La personnalisation de l'apparence de votre captcha peut être effectuée en modifiant le code PHP. Vous pouvez modifier la police, la couleur, la taille et même l'arrière-plan du captcha. Par exemple, pour modifier la police, vous pouvez utiliser la fonction ImageTtFText () et spécifier le fichier de police dans les paramètres. Pour modifier la couleur, vous pouvez utiliser la fonction ImageColorAllocate () et spécifier les valeurs RVB pour la couleur souhaitée. N'oubliez pas que la personnalisation rend non seulement votre captcha plus esthétique mais aussi plus sûr contre les bots.
Il existe plusieurs façons de rendre votre captcha plus sécurisé. Une façon consiste à utiliser un mélange de caractères alphanumériques, à la fois en haut et en minuscules. Cela augmente le nombre de combinaisons possibles, ce qui rend plus difficile pour les bots de deviner. Vous pouvez également augmenter la longueur du captcha. Une autre méthode consiste à ajouter du bruit, tel que des lignes ou des points, à l'image CAPTCHA. Cela peut être fait en utilisant les fonctions ImageLine () et ImageEllipse () dans Php.
Comment puis-je implémenter une fonctionnalité CAPTCHA de rafraîchissement?
Puis-je utiliser CAPTCHA sans bibliothèque GD?
L'ajout de captcha à votre formulaire de contact implique la modification du code HTML et PHP du formulaire. Dans le HTML, vous devrez ajouter une balise d'image pour le CAPTCHA et un champ de saisie pour que l'utilisateur puisse entrer le captcha. Dans le PHP, vous devrez générer le captcha et valider l'entrée de l'utilisateur.
Comment puis-je rendre mon captcha accessible aux utilisateurs visuellement malvoyants?
Les bots peuvent toujours contourner mon captcha?
captcha est une méthode courante pour empêcher le spam, mais ce n'est pas le seul moyen. D'autres méthodes incluent l'utilisation d'un pot de miel, qui est un champ de formulaire caché que les bots se rempliront, mais les humains ne le feront pas, vérifiant le comportement de l'utilisateur, comme le temps pris pour remplir le formulaire et l'utilisation d'un service comme Akismet, qui filtre Spam basé sur une base de données de spam connu.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!