Are you human or are you bot? Ce lo dice CAPTCHA! CAPTCHA è un sistema che permette di capire se un utente è umano o un semplice bot. Visto il proliferare di bot gestiti da spammers, è sempre più facile trovare, all’atto della registrazione o dell’immissione di un commento su un sito, una piccola immagine rettangolare contenente un testo che bisognerà scrivere in uno spazio apposito prima di inviare una richiesta al sito stesso.

Bene, oggi voglio cercare di spiegare a chi ha un minimo di familiarità col linguaggio PHP, come procedere per la realizzazione di uno script in grado di generare un’immagine con un testo casuale da inserire in un modulo a prova di lettura automatica. Come implementare il modulo lo vedremo la prossima volta.

Iniziamo col primo passo:

<?php
session_start();
header ("Content-type: image/png");
$x = 150;
$y = 80;
$code = ' ';
$chars = explode(' ', 'a b c d e f g h i j k l m n o p q r s t u v w x y z');
for($i = 0; $i < 5; $i++, shuffle($chars))
$code .= $chars[0];
$space = $x / (strlen($code)+1);
$_SESSION['code'] = $code;

Credo che questa prima parte sia abbastanza semplice da capire;

  • Prima di tutti apriamo una sessione (ci servirà in futuro quando avremo il form);
  • con la funzione header() indichiamo al browser che dovrà aspettarsi un’immagine di tipo png;
  • assegnamo i valori di larghezza e altezza del riquadro che andremo a produrre;
  • decidiamo quali caratteri verranno utilizzati dallo script per generare il codice memorizzandoli nella variabile $chars. Io ho inserito solo le lettere minuscole ma è possibile inserire lettere maiuscole e numeri;
  • facciamo in modo che il codice che vogliamo generare abbia una lunghezza massima di 5 caratteri;
  • calcoliamo lo spazio che deve esserci tra un carattere e il successivo;
  • assegniamo il valore di $code ad una variabile di sessione.
Passo due:

$img = imagecreatetruecolor($x,$y);

Usiamo la funzione imagecreatetruecolor() per creare il riquadro con 256 toni di rosso, verde e blu (da 0 a 255).

Passo tre:

$bg = imagecolorallocate($img,255,255,255);
$border = imagecolorallocate($img,0,0,0);
$colors[] = imagecolorallocate($img,192,64,192);
$colors[] = imagecolorallocate($img,192,108,64);
$colors[] = imagecolorallocate($img,64,64,192);

Con questo, invece provvediamo a definire i colori dello sfondo (bianco), del bordo (nero) e un array di 3 colori che useremo per la renderizzazione del testo.

Passo quattro:

imagefilledrectangle($img,1,1,$x-2,$y-2,$bg);
imagerectangle($img,0,0,$x-1,$y-2,$border);

Tramite queste funzioni andiamo a definire il background e il bordo del riquadro rettangolare.

Passo cinque:

for ($i=0; $i< strlen ( $code ); $i++)
{
$color = $colors[$i % count($colors)];
imagettftext($img,28+rand(0,8),-20+rand(0,40),($i+0.3)*$space,50+rand(0,10),$color,'riverave.ttf',$code{$i});
}

Con questo ciclo provvediamo a scrivere il testo nel riquadro. Ho usato il font riverave.ttf ma si può usare qualsiasi font, l’importante è inserire il file nella stessa directory in cui inseriamo questo script.

Passo sei:

for($i=0;$i<400;$i++)
{
$x1 = rand(3,$x-3);
$y1 = rand(3,$y-3);
$x2 = $x1-2-rand(0,8);
$y2 = $y1-2-rand(0,8);
imageline($img,$x1,$y1,$x2,$y2,$colors[rand(0,count($colors)-1)]);
}

Quest’altro ciclo for ci serve per disegnare 400 linee di coordinate casuali che serviranno a confondere le idee ai bot nel caso volessero cercare di decifrare la nostra scritta. Infine non ci resta che chiamare la funzione imagepng() per visualizzare i dati dell’immagine nel browser:

imagepng($img);
?>

È finito così il nostro tutorial, ora per vedere il risultato finale non ci resta che inserire lo script in un file (che magari chiamiamo captcha.php), fare l’upload di quest’ultimo sul nostro spazio web e richiamarlo inserendo nella barra indirizzi del browser http://www.miosito.it/captcha.php

La prossima volta vedremo come sfruttare questo sistema con un semplice form implementato in HTML.

Alla prossima :D