Validación de formularios PHP (imagenes)


Sistema de seguridad por medio de imágenes, cada vez mas usado por diferentes sitios, como en la imagen inferior.Captcha de Hotmail

Se requiren conocimientos básicos de manejo de sesiones en php y de la librería gráfica GD.

1 – El script imageValidation.php que genera el captcha:

<?php function createImage($path, $imageName, $imageText){
define (”HEIGHT”, 30);
define (”CELL”, 20);
define (”WIDTH”, (CELL * strlen($imageText)));
define (”FILENAME”, $path.$imageName.”.png”);
define (”FONTNAME”, “AcidDreamer.ttf”);
define (”FONTSIZE”, 18);

$img = imagecreate(WIDTH, HEIGHT) or die(”Can not create image”);
imagecolorallocate($img, 200, 200, 200);

//colors
$black = imagecolorallocate($img, 0, 0, 0);

imagerectangle($img, 0, 0, WIDTH-1, HEIGHT-1, $black);

//print letters of rand string
for ($i=0; $i < strlen($imageText); $i++){
imagettftext($img, FONTSIZE, 10, $i*CELL + 2, 26, $black, FONTNAME, $imageText[$i]);
}

imagepng($img, FILENAME);
imagedestroy($img);
}
function createRandString($numChars){
$letters = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;
$numLetters = strlen($letters);
$randString = “”;

for ($c=0; $c<$numChars; $c++){
$num = rand(0, $numLetters-1);
$randString .= $letters[$num];
}

return $randString;
}

function imageValidation($path){
if (!isset($_SESSION[’image’])){
$_SESSION[’image’][’name’] = createRandString(6);
$_SESSION[’image’][’text’] = createRandString(6);
createImage($path, $_SESSION[’image’][’name’], $_SESSION[’image’][’text’]);
}

return $_SESSION[’image’][’name’];
}
function removeImage($path, $imageName){
$file = $path.$imageName.”.png”;
if (file_exists($file)){
unlink($file);
}
}
?>

Se crea una cadena aleatoria para el nombre de la imagen y otra cadena aleatoria para el texto que se mostrará. Ambas cadenas se guardan el la variable de sesión “image” para evitar crear más imágenes de las necesarias y para llevar el seguimiento en la página de validación. La variable de sesión y su contenido es invisible para el cliente.

2 – El formulario que llama al script anterior:

<?php
session_start(); //iniciamos la sesión
include_once(’imageValidation.php’); //cargamos el script
?>
<html>
<head></head>
<body>
<form action=”procesar.php” method=”post”>
<!– … aquí los campos del formulario … –>
<?php imageValidation(’./’); ?>
<img src=”<?php echo $_SESSION[’image’][’name’] ?>.png”>
<input type=”text” name=”imageText” />
<input type=”submit” name=”action” value=”Submit” />
</form>
</body>
</html>

3 – La página de validación final:

<?php
session_start(); //iniciamos la sesión
include_once(’imageValidation.php’); //cargamos el script
?>
<html>
<body>
<?php
if ($_SESSION[’image’][’text’] == $_POST[’imageText’]){
//validacion correcta
removeImage(”./”, $_SESSION[’image’][’name’]);
unset($_SESSION[’image’]);
echo “Bien”;
}else{
//ERROR
//devolver al usuario al formulario
echo “error”;
}
?>
</body>
</html>

Finalmente, se compara la entrada del usuario con la información guardada en la variable de sesión. Si coincide, se borra la variable de sesión y la imagen y se continúa con la ejecución del script. En caso contrario, se muestra el error y se pide al usuario que vuelva a revisar el formulario.

Acerca de silvercorp

Blog personal de Ye§i creado el 18/Ag/06 enfocado al diseño gráfico, tecnología y programación.

Publicado el septiembre 29, 2006 en Código Fuente. Añade a favoritos el enlace permanente. 6 comentarios.

  1. el comentario emitido es totalmente erroneo

  2. ku7yrilyjdfklsbnhuwrihlk´

  3. hola, edu5 tiene razon, explico:
    1º en tu pagina aparecen caracteres irreconocibles por Dreamweaver o para cualquier editor,
    como: “” y ’ ’.
    cambialos a: “” y ‘.
    2º tampoco dejas claro que la pagina de validacion final se debe guardar con el nombre procesar.php
    3º la fuente que has utilizado para la creacion de la cadena de letras aleatorias, no existe o no se puede abrir, podrias dar mas obciones para los que no tenemos esta fuente.

    Apesar de los problemas que he solucionado, todavia no me funciona. un saludo y felicidades por el esfuerzo que haceis por enseñar a los demas.

  4. Muy buen aporte !!!!!!

  5. Muy buen aporte !!!!!!!1!!!

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: