Imágenes antispam

CAPTCHA son las siglas de Completely Automated Public Turing test to tell Computers and Humans Apart. Consiste en un desafío para determinar si el usuario es una maquina o una persona. Sus inventores son  Luis von Ahn, Manuel Blum, Nicholas J. Hopper y John Langford, este último de la IBM, el término se empezó a utilizar en el año 2000.

recapcha

Es utilizado comúnmente en la web para evitar scripts malintencionados que tienen como fin enviar mensajes a través de formularios web, en el cual el usuario deberá de enviar el código mostrado en una imagen como complemento para poder enviar la información.

A partir de CAPTCHA surgió reCAPTCHA que consiste en utilizar dos imágenes para que el usuario realice la prueba si es un boot o no. Una de estas imágenes es desconocida para el sistema, en cambio la otra es la que en realidad el cliente necesita ingresar, del por qué de esto es simplemente para ayudar al sistema OCR que consiste en el reconocimiento de texto en las imágenes, con esto se logra que las imágenes que no pueden ser reconocidas por este software, lo hagan a través de la ayuda de las personas.

El fundador de reCAPTCHA la cual fue comprada por Google en el año 2009, fue el guatemalteco, informático, empresario y profesor de la universidad de Carnegie Mellon Luis von Ahn.

El código

Bien, después de esta pequeña reseña acerca de CAPCHA o imágenes antispam,  explicare el código para implementar una de estas imágenes en nuestro sitio con código PHP simple.

1.    Establecer el tipo de fichero que será el documento PHP, en este caso se tiene que indicar al navegador que será una imagen png.

header( "Content-type: image/png" );

2.    La creación de la imagen, la cual será de 100X30px, estos parámetros son indicados en la primera línea, en la segunda línea observamos el color que utilizaremos indicado con parametros RGB.

$im = imagecreate( 100, 30 );
$negro = imagecolorallocate($im, 0, 0, 0);

3.    Indicamos que el fondo será transparente. La variable $negro no es importante en el comando.

imagecolortransparent($im, $negro);

4.    Dado que utilizaremos distintos tipos de tipos de letra, estableceremos un array con tres valores, más adelante se creara una variable con un número aleatorio de 0 a 2, para seleccionar al azar el tipo de letra a utilizar en cada letra de la imagen.

$letra = array ("css/Hero.ttf","css/HVD_Bodedo.ttf","css/Days.ttf");

5.    El siguiente ciclo for es para mostrar solo tres letras en la imagen aleatoria. La variable $addText acumula la cadena de texto final.

$addText="";
for($i=0;$i<3;$i++){

6.    También queremos que cada letra de la imagen tenga una inclinación de 10 o -10 grados, para agregarle una pequeña dificultad a la lectura de las mismas. El codigo consiste en que si el numero es menor a 49 será el grado de inclinación -10, si no de 10.

$aleator=rand(0,1);
$w=23*$i+10;
if($aleator==1)
$aleator=-10;
else
$aleator=10;

7.    La variable aleatoria $font obtiene al azar el tipo de fuente a utilizar para la letra.

$font=rand(0,2);

8.    La función getNext() al final del documento devuelve una letra o numero de manera aleatoria del conjunto indicado en la misma función.

$showText=getNext();

9.    Concatenamos la letra aleatoria a la palabra final.

$addText.=$showText;

10.    Con el siguiente comando, agregamos las letras a la variable imagen. Los datos para la función  imagettftext son los siguientes: imagettftext ($image, $size, $angle, $x, $y, $color, $fontfile, $text) $image es la variable imagen creada, en este ejemplo es $im. $size es el tamaño del tipo de letra a utilizar. $angle indica el ángulo de inclinación del texto de la imagen. $x y $y son las coordenadas dentro de la imagen en donde se colocara el texto. $color es el color del texto. $fontfile es el tipo de letra a utilizar. $showText es el texto que se mostrara en la imagen.

imagettftext($im, 20, $aleator, $w, 24, $negro, $letra[$font], $showText);
}

11.    Finalmente, imprime la imagen en el documento php.

imagepng( $im );

function getNext(){
$letras="Ab2c3d4E5F6g7kM8n9QRsT";
$number=rand(0,strlen($letras)-1);
return substr($letras,$number,1);
}

Para observar la imagen, únicamente se escribe la dirección url en el navegador o a través de la etiqueta img utilizando el atributo src con HTML.

El código completo es el siguiente:

header( "Content-type: image/png" );
$im = imagecreate( 100, 30 );
$negro = imagecolorallocate($im, 0, 0, 0);
imagecolortransparent($im, $negro);
$letra = array ("css/Hero.ttf","css/HVD_Bodedo.ttf","css/Days.ttf");
$addText="";
for($i=0;$i<3;$i++){
$aleator=rand(0,1);
$w=23*$i+10;
if($aleator==1)
$aleator=-10;
else
$aleator=10;
$font=rand(0,2);
$showText=getNext();
$addText.=$showText;
imagettftext($im, 20, $aleator, $w, 24, $negro, $letra[$font], $showText);
}
imagepng( $im );
function getNext(){
$letras="Ab2c3d4E5F6g7kM8n9QRsT";
$number=rand(0,strlen($letras)-1);
return substr($letras,$number,1);
}

Adjuntos

A un nivel de software más pesado, como una empresa de software de algún país industrializado, se podría implementar el mismo sistema OCR para leer estas simples imágenes antispam. Para solucionar esto, se debe utilizar el mismo software que provee reCAPTCHA en nuestros sitios web o bien, lograr aumentar el nivel de dificultad en el diseño de cada imagen de forma aleatoria. El fin de esta noticia es únicamente informativo para proveer el código PHP junto con un ejemplo sencillo del funcionamiento de estas imágenes.

Referencias

[http://www.desarrolloweb.com/articulos/numeros-aleatorios-php.html]
[http://php.net/manual/es/function.strlen.php]
[http://php.net/manual/es/function.substr.php]
[http://totaki.com/poesiabinaria/2012/02/generar-texto-e-implantarlo-en-una-imagen-desde-php/]
[http://php.net/manual/es/function.imagecolortransparent.php]
[http://www.thesitewizard.com/php/create-image.shtml]
[http://php.net/manual/en/function.imagettftext.php]
[http://php.net/manual/es/function.strtolower.php]
[http://es.wikipedia.org/wiki/Captcha]
[http://es.wikipedia.org/wiki/ReCAPTCHA]
[http://es.wikipedia.org/wiki/Luis_von_Ahn]
[http://alt1040.com/2009/09/google-compra-recaptcha]
[http://en.wikipedia.org/wiki/Optical_character_recognition]


Para recibir boletines de información, por favor escribe tu correo electrónico:

Por favor ingrese un correo electrónico valido.
Registrado correctamente!