martes, 9 de junio de 2009

Verificación con Captcha : Para saber si el usuario es humano o no

Captcha sirve para que si alguién desea petarte tu web o enviarte miles de correos lo tenga más difÍcil porque cada vez tendrá un código distinto.

Para ello primeramente teneis que crearon un fichero de imagen GIF , generalmente rectangular y del color que querais, en él se meteran cada vez los códigos a pedir.

A continuación crearemos mediante PHP una variable de sesión en el archivo donde se mostrará el captcha, en ella pondremos mediante una función letras y números aleatorios.

<?
function randomText($length)
{
$pattern = "1234567890abcdefghijklmnopqrstuvwxyz";
for($i=0;$i<$length;$i++) {
$key .= $pattern{rand(0,35)};
}
return $key;
}

session_start();
$_SESSION['temporal'] = randomText(5);
?>


Después en ese mismo archivo pondremos con HTML la imagen donde saldrá

<img src="codigos.php" width="80" height="23"/>

Como puedes ver la imagen la saca de un archivo codigo.php y eso es porque desde ahí se meteran los datos a la imagen anteriormente creada.

Este archivo será así:

<?
session_start();
$codigo=$_SESSION['temporal'];
$captcha = imagecreatefromgif("codigo.gif");
$colText = imagecolorallocate($captcha,120,120,120);
imagestring($captcha, 8, 10, 2, $codigo, $colText);
header("Content-type: image/gif");
imagegif($captcha);
?>


Por último solo quedará validar al dar al boton del formulario si lo escrito en el input es igual a la variable sesión 'temporal', para ellos crearemos un input oculto con la variable 'temporal' y el input donde el usuario escribirá el código:

<input type="text" id="codigo" name="codigo" size='10'/>
<input type="hidden" id="elbueno" value="<?=$_SESSION['temporal']?>"/><p/>


En la función de validación javascript pondremos:

var codigo=document.getElementById('codigo').value;
var capa=document.getElementById("error");
var elbueno=document.getElementById('elbueno').value;
if (elbueno!=codigo){
capa.innerHTML="El código no es el correcto.";
return false;
}else{
capa.innerHTML="";
return true;
}

2 comentarios:

  1. ¿y como se crea una imagen .gif facil y rápido?
    Un saludo, me encanta tu blog

    ResponderEliminar