Estudios PHP: Crear un sistema captcha con PHP

Bienvenid@s, hoy veremos como crear nuestro propio sistema captcha para aplicar mayor seguridad a nuestra aplicación web, agregar un captcha a nuestros formularios puede ser una gran idea, de este modo podemos evitar de que robots maliciosos pueden enviar nuestros formularios de modo automático.

El captcha es básicamente una imagen que contiene un código que deberá ser ingresado por el usuario para que el formulario pueda ser enviado, nosotros crearemos la imagen que será del tipo PNG a través de la librería de funciones GD.

La imagen tendrá un código aleatorio, este código aleatorio será guardado encriptado con sha1 en una cookie, posteriormente al validar el formulario podremos acceder al valor de esa cookie y comprobar si el código captcha ingresado por el usuario es correcto.

Para el ejemplo, crearemos la imagen en un archivo llamado captcha.php, luego probaremos su funcionamiento creando un archivo llamado index.php donde incluiremos un formulario de prueba con un campo email y el campo captcha, este formulario lo validaremos a través de una petición AJAX a un archivo llamado ajax.php. A continuación puedes ver el código de cada uno de los archivos para que puedas probarlo en tu servidor, al final de este post puedes ver el vídeo explicativo.

captcha.php

<?php 
header("Content-Type: image/png");
$im = imagecreate(45, 23) or die("Ha ocurrido un error, librería de funciones GD no disponible");
$color_fondo = imagecolorallocate($im, 0, 0, 0);
$color_texto = imagecolorallocate($im, 255, 255, 255);
function generate_captcha($chars, $length)
{
$captcha = null;
for ($x = 0; $x < $length; $x++)
{
$rand = rand(0, count($chars)-1);
$captcha .= $chars[$rand];
}
return $captcha;
}
$captcha = generate_captcha(array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'), 4); /* 4 es la longitud del capcha */
setcookie('captcha', sha1($captcha), time()+60*3);
imagestring($im, 5, 5, 5,  $captcha, $color_texto);
imagepng($im);

index.php

<!DOCTYPE HTML>
<html>
 <head>
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
       <script>
     $(function(){
        $("#btn").on("click", function(){
            var formData = $("#formulario").serialize();
            var ruta = "ajax.php";
            $.ajax({
                url: ruta,
                type: "POST",
                data: formData,
                success: function(datos)
                {
                    $("#respuesta").html(datos);
                }
            });
        });
  
  $("#actualizar_captcha").on("click", function(){
           document.location.reload();
    });
     });
    </script>
 </head>
 <body>
<div id="respuesta"></div>
<form method="POST" id="formulario">
<table>
<tr>
<td>Email:</td><td><input type="email" id="email" name="email"></td>
</tr>
<tr>
<td>Captcha:</td><td><input type="text" id="captcha" name="captcha"></td>
</tr>
<tr><td></td><td><img src="captcha.php"><button id="actualizar_captcha" type="button">Actualizar</button></td></tr>
</table>
<button id="btn" type="button">Enviar</button>
</form>
 </body>
</html>

ajax.php

<?php 
if (isset($_POST))
{
$email = $_POST["email"];
$captcha = sha1($_POST["captcha"]);
$numero_captcha = $_COOKIE["captcha"];
if (!preg_match("/^[a-zA-Z0-9\._-]+@[a-zA-Z0-9-]{2,}[.][a-zA-Z]{2,4}$/", $email))
{
echo "<p style='color: red'>El formato de email es incorrecto</p>";
}
else if ($captcha != $numero_captcha)
{
echo "<p style='color: red'>El Captcha no coincide</p>";
}
else
{
//LAS ACCIONES CORRECTAS
echo "<p style='color: blue'>Acción llevada a cabo correctamente</p>";
/*Eliminamos la cookie*/
setcookie("captcha", "", -1);
?>
<script>
/*Restauramos el formulario y el captcha*/
document.getElementById("formulario").reset();
document.location.reload();
</script>
<?php
}
}
?>

Estudios PHP

jueves, 5 de junio de 2014

Crear un sistema captcha con PHP

No hay comentarios: