2008-12-13

Crear un captcha o Imagenes con textos deformados para formularios

Quién hoy en día no ha utilizado algún captcha ó Completely Automated Public Turing test to tell Computers and Humans Apart (Prueba de Turing pública y automática para diferenciar a máquinas y humanos), vaya una pequeña prueba con la que demostramos al sistema que somos una persona... el que siempre nos encontramos es aquel en el que a un usuario se le pide que introduzca un conjunto de caracteres que se muestran en una imagen distorsionada generada por un pequeño script.

Esto evitará a nuestro sitio sufrir ataques de spam ya que la solución debe unicamente ser capaz de proporcionarla un humano.

Cómo dato anecdótico decir que se utilizaron en primera instancia en Yahoo! para validar a sus usuarios a la hora de solicitar una nueva cuenta de correo electrónico y poco a poco se fueron haciendo populares hasta llegar a convertirse casi imprescindibles.

Crear un captcha

Esta es la manera rápida de crear un captcha y no es otra que descargando uno ya hecho... en el siguiente punto explicaremos paso a paso cómo crear un captcha desde 0.

En esta página puedes encontrar dos buenos ejemplos de captchas unos de ellos el clásico en el cuál el usuario debe introducir un número y el otro uno un tanto alternativo en el cuál el usuario deberá buscar un cuadrado dentro de la imagen y clickear en él.

Ejemplo 1 (clickear el cuadrado)

Ejemplo 2 (introducir el código)

Descarga (ZIP, 12 KB)
Ver Código Fuente

Ya la elección es aquel que creas tú que mantiene una mejor relación seguridad-usabilidad.

Crear un captcha paso a paso (PHP)

Bueno los que hayais seguido leyendo hasta aquí es que quereis crear o aprender cómo funciona un captcha.

El funcionamiento es sencillo, se crea una cadena aleatoria que es escrita en una imagen y almacenada en una variable de sesión o cookie, el usuario la introducide en el formulario y esta es chequeada por el script.

6 pasos

1. Texto aleatorio
2. El texto se imprime en la imagen
3. Se almacena en alguna variable
4. Se muestra la imagen
5. El usuario introduce el código
6. Se valida los códigos (Usuario y almacenado)

Crear un texto aleatorio

//Inicio de sesión
session_start();

//Creación de cadena aleatoria
$md5 = md5(microtime() * mktime());

/*
No necesitamos 32 caracteres (generados anteriormente) y por lo tanto reducimos a 5
*/
$string = substr($md5,0,5);
?>

Creamos una imagen

/*
Creamos una imagen partiendo de una de fondo (debemos subir una imagen de fondo al servidor)
*/

$captcha = imagecreatefrompng("./captcha.png");

/*
Configuramos los colores usados para generan las lineas (formato RGB)
*/

$black = imagecolorallocate($captcha, 0, 0, 0);
$line = imagecolorallocate($captcha,233,239,239);

/*
Añadimos algunas lineas a nuestra imagen para dificultar la tarea a los robots
*/
imageline($captcha,0,0,39,29,$line);
imageline($captcha,40,0,64,29,$line);
?>

Insertamos texto en la imagen

/*
Ahora escribimos la cadena generada aleatoriamente en la imagen
*/
imagestring($captcha, 5, 20, 10, $string, $black);

/*
Encriptamos y almacenamos el valor en una variable de sesion
*/

$_SESSION['key'] = md5($string);

/*
Devolvemos la imagen para mostrarla
*/
header("Content-type: image/png");
imagepng($captcha);
?>

Chequeamos el valor dado por el usuario en el formulario

session_start();

if(md5($_POST['code']) != $_SESSION['key'])
{
die("Error: Nos has introducido el codigo correcto");
}else{
echo 'Codigo Correcto, no eres una maquina ó al menos no lo pareces';
}
?>

Bueno me he saltado algunos pasos cómo la creación del formulario... unicamente explico el código Php necesario para la creación del captcha los adornos HTML son cosa vuestra.

Estos son tres de los captchas más famosos que circulan por Internet:

Google



Windows Live



Paypal



OTRO MUY POTENTE Y ANIMADO:
http://www.icaptcha.com/icaptcha/examples.html

No hay comentarios: