Inicio > AntiSpam, PHP, Tutoriales, Uncategorized > Tutorial: Sistema Captcha con PHP

Tutorial: Sistema Captcha con PHP

Cómo hemos ido comentando desde hace buen tiempo atrás, existen varios métodos para bloquear el spam de nuestras páginas web; por ejemplo, uno de los métodos que más agrada es utilizando Akismet, un servicio web anti spam, transparente al usuario.

Sin embargo, hay veces que Akismet no cubre las expectativas ó simplemente, hay aplicaciones en que no puede utilizarse. Por ello, vamos comentar otro método para impedir el acceso de los robots a nuestro sistema, esta vez, con la creación de un Captcha con PHP.

Esta es la traducción de un artículo recientemente publicado en fuzzyopinions, del cual, su simpleza y funcionamiento y diseño final me han agradado bastante. El resultado final del Captcha lo pueden observar en la siguiente imagen:

Sistema Captcha con PHP

Cómo sabrán un captcha es solicitar al usuario que escriba los caracteres que aparecen en una imagen dentro de un campo de texto. Si lo hace correctamente tendrá acceso, de lo contrario, se le pedirá que vuelva a escribir el código, indicándole que lo que ha escrito esta errado.
7 pasos para crear un captcha

Estos son los siete pasos básicos para generar un sistema Captcha:

1. Generar un código aleatorio
2. Añadir el código a una cookie, variable de sesión ó base de datos que será recuperada desde la siguente página
3. Escribir el texto dentro de una imagen
4. Mostrar la imagen al usuario que quiera acceder al recurso
5. Proveer de un formulario, donde el usuario ingrese el código y lo envíe
6. Verificar el código de la clave enviada (en el paso 2)
7. Si el código es correcto, se permite el acceso

A continuación veremos el código necesario para crear nuestro captcha.

Generando y almacenando el código

Cómo mencionamos en el primer paso, el texto del código debe ser aleatorio. Hay varias maneras de conseguir esto, por lo que en este paso podemos sentirnos libres de experimentar, pero eso si, lo que hagamos debe de cumplir dos cosas: 1) Recuperar un valor que cambie constantemente y 2) Cifrar ese valor.

Un valor que cambia constantemente puede ser, por ejemplo, la fecha y hora del servidor, para ello, nos serviremos de las funciones microtime( ) y mktime( ) de PHP. Una vez con el valor totalmente aleatorio en nuestras manos, lo cifraremos con la función md5() de PHP. Finalmente (fíjense en la última línea del código), almacenaremos el valor en una variable de sesión.

<?php

// Start the session so we can store our generated key inside it for later retrieval

session_start( );

// Set to whatever size you want, or randomize for more security

$captchaTextSize = 7;

do {

// Generate a random string and encrypt it with md5

$md5Hash = md5( microtime( ) * mktime( ) );

// Remove any hard to distinguish characters from our hash

preg_replace( ‘([1aeilou0])’, “”, $md5Hash );

} while( strlen( $md5Hash ) < $captchaTextSize );

// we need only 7 characters for this captcha

$key = substr( $md5Hash, 0, $captchaTextSize );

// Add the newly generated key to the session. Note, it is encrypted.

$_SESSION[’key’] = md5( $key );

?>

Mostrando el código aleatorio en la imagen Captcha

Una vez generado el código captcha y almacenado correctamente, procederemos a recuperarlo y mostrarlo al usuario. Para el manejo dela imagen utilizaremos la librería GD.

<?php

// grab the base image from our pre-generated captcha image background

$captchaImage = imagecreatefrompng( “images/captcha.png” );

/*

Select a color for the text. Since our background is an aqua/greenish color, we choose a text color that will stand out, but not completely. A slightly darker green in our case.

*/

$textColor = imagecolorallocate( $captchaImage, 31, 118, 92 );

/*

Select a color for the random lines we want to draw on top of the image, in this case, we are going to use another shade of green/blue

*/

$lineColor = imagecolorallocate( $captchaImage, 15, 103, 103 );

?>

Ya hemos seleccionado los colores, ahora queremos mostrar algunas líneas que incrementen la dificultad, para que los robots (spam) no lean nuestro código (texto aleatorio).

<?php

// get the size parameters of our image

$imageInfo = getimagesize( “images/captcha.png” );

// decide how many lines you want to draw

$linesToDraw = 10;

// Add the lines randomly to the image

for( $i = 0; $i < $linesToDraw; $i++ )  {

// generate random start spots and end spots

$xStart = mt_rand( 0, $imageInfo[ 0 ] );

$xEnd = mt_rand( 0, $imageInfo[ 0 ] );

// Draw the line to the captcha

imageline( $captchaImage, $xStart, 0, $xEnd, $imageInfo[1], $lineColor );

}

?>

Finalmente, escribimos nuestro código en la imagen y la mostramos en la pantalla. Comenzaremos con una imagen de fondo pre generada. Este método, puede fácilmente permitirnos incluir docenas de fondos adicionales, seleccionados al azar, o aún, para hacerlo más complejo, podríamos generarlo nosotros mismos, dentro del captcha.

Para escribir nuestro captcha usaremos la función imagettftext(), la cual se caracteriza por escribir un texto sobre una imagen usando fuentes TrueType. En este caso, utilizaremos la fuente BitStream Vera Sans Bold, que es una fuente Open Source que podemos copiar y redistribuir libremente. Ahora bien, si queremos podemos utilizar cualquier otra fuente, ó aún mejor, mezclar fuentes al azar para hacer más difícil que losrobots lean nuestra imagen.

<?php

/*

Draw our randomly generated string to our captcha using the given true type font. In this case, I am using BitStream Vera Sans Bold, but you could modify it to any other font you wanted to use.

*/

imagettftext( $captchaImage, 20, 0, 35, 35, $textColor, “fonts/VeraBd.ttf”, $key );

// Output the image to the browser, header settings prevent caching

header ( “Content-type: image/png” );

header(”Cache-Control: no-cache, must-revalidate”);
header(”Expires: Fri, 19 Jan 1994 05:00:00 GMT”);
header(”Pragma: no-cache”);

imagepng( $captchaImage );

?>

Ahora que ya tenemos nuestro captcha elaborado, el paso final es crear el formulario que interactúe con el usuario.

Incluyendo el Captcha en la página web

Para verificar el correcto funcionamiento de nuestro captcha, necesitamos crear un formulario que permita al usuario ver el código, escribirlo en un campo de texto y enviarlo pulsando un botón. Esto ya todos lo debemos de conocer, por lo que no nos explayamos en este punto.

<img src=”captcha.php” border=”0″ />

<form name=”captcha-form” method=”POST” action=”captcha-verify.php”>

<input type=”text” name=”code” width=”25″ />

<input type=”submit” name=”submit” value=”submit” />

</form>

Ahora bien, asumiendo que el formulario ha sido enviado, deberemos ser capaces de verificar el código enviado. Por ejemplo podemos utilizar un script PHP similar a este.

<?php

session_start( ); // allows us to retrieve our key form the session

/*

First encrypt the key passed by the form, then compare it to the already encrypted key we have stored inside our session variable

*/

if( md5( $_POST[ ‘code’ ] ) != $_SESSION[ ‘key’ ] ) {

echo “You ented the wrong code, please try again!”;

} else {

echo “Success, you ented the correct code, rock and roll…”;

}

?>

Eso es todo. Desde luego, hay mucho que se podría hacer para personalizar un Sistema Captcha, hacerlo más complejo e incluirlo en nuestros sitios web. Estas son algunas ideas:

* Combinar palabras para hacerlo semilegible y dificultar a los robots que lean la imagen. Esto se podría hacer utilizando dos archivos de donde se recuperen los textos.
* Girar el texto al azar y jugar con el espacio entre las letras. Aunque hay que tener cuidado de no hacerlo muy enrevesado, tanto que nuestros propios usuarios no puedan entenderlo.
* Cambie la ubicación del texto en la pantalla. En nuestro caso, el texto siempre aparece en un mismo punto, pero podríamos cambiar su ubicación al azar.

Espero que este mini tutorial sobre la creación de un Sistema Captcha con PHP les haya sido de ayuda, aunque sea mostrando los conceptos básicos de su creación.

Fuente: http://www.baluart.net/articulo/tutorial-sistema-captcha-con-php

  1. Aún no hay comentarios.
  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: