Mis proyectos: Creación de un captcha usando PHP y JQuery

Tal y como lo prometí en el artículo anterior en esta ocasión vamos a ver el código fuente completo de un captcha muy sencillo, pero atractivo hecho completamente en PHP y actuando en conjunto con JQuery para mejorar su desempeño. Del mismo modo con este artículo concluimos el tema de los captchas esperando poder haber aclarado sus dudas.

Cuando redacté el artículo anterior, estuve buscando un script de captcha que permitiera elegir una imagen desde una lista y si era la correcta el captcha se resolviera correctamente, pero por desgracia no entré nada.

El captcha que vamos a implementar está inspirado en el captcha de EhtereumClix, este captcha tiene la siguiente apariencia.

Solo hay que hacer clic en la imagen que se encuentre invertida y el captcha se resuelve, ¿simple no?. bueno, el detalle es que no encontré ningún captcha gratis que hiciera lo mismo. Es por ello que vamos a implementar un clon del mismo o que por lo menos imite algo de su funcionalidad, espero les sea de interés este proyecto.

El script a implementar lleva por nombre Tchaptcha (no es muy original pero es simple de recordar), consiste en 6 archivos con la extensión PHP y dos carpetas: una de gráficos para generar las imágenes sobre las cuales habrá que hacer clic (solo una en realidad, la que se encuentre invertida). y la carpeta de JQuery, que nos va a permitir mediante AJAX validar el clic que hagamos sobre una imagen.

Estructura del proyecto tchaptcha:

Pues manos a la obra entonces:

Nuestro script comienza con un archivo PHP donde deseemos mostrar nuestro captcha (test.php), previamente debemos tenerlo instalado y configurado correctamente. Para ver como se hace esto por favor vean el contenido del archivo "instrucciones.txt" que acompaña a este proyecto (hay que bajar el proyecto en formato zip, descomprimirlo, leer el contenido de instrucciones.txt y llevarlas a la práctica. Al final del artículo se muestra de donde descargar tchaptcha).

En el archivo PHP donde deseemos instalar tchaptcha debemos en primer lugar colocar la siguiente línea de texto:

<?php session_start(); ?>

¿Porqué es necesario esto?, porque el sistema de captcha a implementar funciona haciendo uso de sesiones. Una sesión es instancia entre el visitante y el servidor, de manera que en el servidor pueden almacenarse temporalmente datos que luego pueden ser recuperados. PHP no puede crear una sesión a no ser que se haga en la primera sección del documento, de lo contrario veremos un mensaje de error siempre.

Veamos ahora el código fuente completo del archivo donde queremos montar nuestro captcha para explicarlo paso a paso.

<?php session_start(); ?>
<html>
<head>
<title>Ejemplo de captcha</title>
<script language="JavaScript">

</script>
</head>
<body>



<?php include("tcapcha.php"); ?>



</body>
</html>

Como mencionamos anteriormente, la primer línea nos permite que nuestro sistema pueda crear sesiones en PHP sin problemas. Dentro de la sección HEAD vemos lo siguiente:

<script language="JavaScript">

</script>

Si abrimos nuestro archivo configuration.php que forma parte del sistema tcaptcha veremos un par de líneas de la siguiente manera:

//validation functions name
$okfunction = "okfunction()";
$errorfunction = "errfunction()";

Hay una concordancia: las funciones okfunction() y errfunction() son las mismas que están definidas en las variables $okfunction y $errfunction. Esto quiere decir que en este archivo podemos definir que funciones van a ser llamadas si la validación del captcha es cierta, o en caso de error a que función llamaremos; que de hecho lo hacemos, en el archivo test.php desde donde estamos probando nuestro captcha encontramos estas funciones y ya queda en nosotros personalizar el aviso para cada caso y decidir que hacer si la validación es correcta o no.

Hay otras variables dentro de configuration.php que podemos personalizar:

//sizes to images to draw in the captcha
$individualimageswidth = 51;
$individualimagesheight = 51;

Esta sección (arriba) controla el ancho y alto de las imágenes a mostrar en el captcha. Tcaptcha consiste en cinco imágenes que se muestran en secuencia. Podemos definir el ancho y alto de una de dichas imágenes y así hacer más grande o más pequeña la imagen final de captcha.

Se recomienda que todas las imágenes midan las mismas dimensiones para evitar distorsiones y que se optimicen tanto como sea posible, de lo contrario puede consumir muchos recursos del servidor el script al momento de crear la imagen final. Si lo desean pueden optimizar las imágenes (en caso de querer usar otras) con Optimizilla (servicio en la red) o bien con una aplicación instalada, como bien podría ser File Optimizer.

//font configuration
$fontfamily = "Arial";
$fontsize = 14;
$fontcolor = "red";

Desde esta sección podemos configurar el tipo, tamaño y color de la fuente en nuestro captcha, para que de esa manera nos muestre las instrucciones de su uso.

Donde queramos mostrar nuestro captcha insertaremos la siguiente línea de código:
<?php include("tcapcha.php"); ?>

Esto procede a incluir el archivo tcaptcha.php, el cual genera toda la parte gráfica del script. Si todo ha salido bien ahora debemos estar viendo ya nuestro captcha insertado en nuestro documento de la siguiente manera:

Como podemos ver ya tenemos nuestro captcha funcional insertado en nuestra web. Si hacemos clic sobre la imagen invertida nuestro captcha es validado correctamente (ya dependerá de nuestra función okfunction y de lo que hallamos definido en ella que hacer si la verificación del captcha es correcta). En caso contrario se invoca la función errfunction. Es todo, ahora lo estudiaremos en detalle.

tchaptcha.php

Este es el contenido del archivo:

<?php

//Set random image, thanks to http://php.net/manual/es/function.mt-rand.php
$rand = mt_rand(1, 5);
$_SESSION["rand"] = $rand;

if($rand < 1)
$rand = 1;

if($rand > 5)
$rand = 5;

include("configuration.php");

global $individualimageswidth, $individualimagesheight;
global $fontfamily, $fontsize, $fontcolor;

//Set user language, thanks to https://paulund.co.uk/auto-detect-browser-language-in-php
if(!isset($_SERVER["HTTP_ACCEPT_LANGUAGE"]))
$lang = "us";
elseif(strpos(".".strtolower(trim($_SERVER["HTTP_ACCEPT_LANGUAGE"])), "es") > 0)
$lang = "es";
else
$lang = "us";

if(strtolower(trim($lang)) == "es")
{

$option = "Opción";
$caption = "Haga clic sobre la imagen invertida para verificar";

}
else
{

$option = "Option";
$caption = "Click on the inverted image to verify";

}

//Draw image map, thanks to https://desarrolloweb.com/articulos/753.php
echo "<table border='0'>"."\n";
echo "<tr>"."\n";
echo "<td valign='top' align='center'>"."\n\n";
echo "<map name='map'>"."\n";
echo "<area alt='".trim($option)."1' shape='RECTANGLE' coords='0, 0, ".trim($individualimageswidth).", ".trim($individualimagesheight)."' href='javascript:verify_captcha(".chr(34)."1".chr(34).");'>"."\n";
echo "<area alt='".trim($option)."2' shape='RECTANGLE' coords='".((int)$individualimageswidth * 2 + 2).", 0, ".trim($individualimageswidth).", ".trim($individualimagesheight)."' href='javascript:verify_captcha(".chr(34)."2".chr(34).");'>"."\n";
echo "<area alt='".trim($option)."3' shape='RECTANGLE' coords='".((int)$individualimageswidth * 3 + 4).", 0, ".trim($individualimageswidth).", ".trim($individualimagesheight)."' href='javascript:verify_captcha(".chr(34)."3".chr(34).");'>"."\n";
echo "<area alt='".trim($option)."4' shape='RECTANGLE' coords='".((int)$individualimageswidth * 4 + 6).", 0, ".trim($individualimageswidth).", ".trim($individualimagesheight)."' href='javascript:verify_captcha(".chr(34)."4".chr(34).");'>"."\n";
echo "<area alt='".trim($option)."5' shape='RECTANGLE' coords='".((int)$individualimageswidth * 5 + 6).", 0, ".trim($individualimageswidth).", ".trim($individualimagesheight)."' href='javascript:verify_captcha(".chr(34)."5".chr(34).");'>"."\n";
echo "</map>"."\n";
echo "<img src='createimage.php?time=".time()."' border='0' usemap='#map'>"."\n\n";
echo "</td>"."\n";
echo "</tr>"."\n";
echo "<tr>"."\n";
echo "<td valign='middle' align='center'>"."\n";
echo "<font style='font-family: ".trim($fontfamily)."; font-size:".trim($fontsize)."; color: ".trim($fontcolor).";'>".trim($caption)."</font>"."\n";
echo "</td>"."\n";
echo "</tr>"."\n";
echo "</table>"."\n\n";

echo "<script language='JavaScript' src='jquery/jquery.js'>"."\n";
echo "</script>"."\n\n";
echo "<script language='JavaScript'>"."\n\n";
include("js.php");
echo "\n\n</script>"."\n";

?>

Este archivo crea la parte gráfica de nuestro captcha. En primer lugar tenemos las siguientes líneas dentro del mismo:

//Set random image, thanks to http://php.net/manual/es/function.mt-rand.php
$rand = mt_rand(1, 5);
$_SESSION["rand"] = $rand;

if($rand < 1)
$rand = 1;

if($rand > 5)
$rand = 5;

La imagen invertida nunca es la misma, eso aumenta la dificultad de adivinar que imagen se encuentra invertida y aumenta la seguridad del script del mismo modo. De manera que se elige una posición al azar dentro de las cinco imágenes de las que dispone el script. Guardaremos ese valor dentro de una variable de sesión ("rand"). Importaremos el archivo de configuración y acorde al idioma del visitante prepararemos el aviso en su idioma base para que pinche la imagen invertida.

Ahora procedemos a crear el área del captcha que consiste en un mapa de imagen y una imagen creada automáticamente con todas las imágenes que dispone el script.

include("configuration.php");

global $individualimageswidth, $individualimagesheight;
global $fontfamily, $fontsize, $fontcolor;

//Set user language, thanks to https://paulund.co.uk/auto-detect-browser-language-in-php
if(!isset($_SERVER["HTTP_ACCEPT_LANGUAGE"]))
$lang = "us";
elseif(strpos(".".strtolower(trim($_SERVER["HTTP_ACCEPT_LANGUAGE"])), "es") > 0)
$lang = "es";
else
$lang = "us";

if(strtolower(trim($lang)) == "es")
{

$option = "Opción";
$caption = "Haga clic sobre la imagen invertida para verificar";

}
else
{

$option = "Option";
$caption = "Click on the inverted image to verify";

}

//Draw image map, thanks to https://desarrolloweb.com/articulos/753.php
echo "<table border='0'>"."\n";
echo "<tr>"."\n";
echo "<td valign='top' align='center'>"."\n\n";
echo "<map name='map'>"."\n";
echo "<area alt='".trim($option)."1' shape='RECTANGLE' coords='0, 0, ".trim($individualimageswidth).", ".trim($individualimagesheight)."' href='javascript:verify_captcha(".chr(34)."1".chr(34).");'>"."\n";
echo "<area alt='".trim($option)."2' shape='RECTANGLE' coords='".((int)$individualimageswidth * 2 + 2).", 0, ".trim($individualimageswidth).", ".trim($individualimagesheight)."' href='javascript:verify_captcha(".chr(34)."2".chr(34).");'>"."\n";
echo "<area alt='".trim($option)."3' shape='RECTANGLE' coords='".((int)$individualimageswidth * 3 + 4).", 0, ".trim($individualimageswidth).", ".trim($individualimagesheight)."' href='javascript:verify_captcha(".chr(34)."3".chr(34).");'>"."\n";
echo "<area alt='".trim($option)."4' shape='RECTANGLE' coords='".((int)$individualimageswidth * 4 + 6).", 0, ".trim($individualimageswidth).", ".trim($individualimagesheight)."' href='javascript:verify_captcha(".chr(34)."4".chr(34).");'>"."\n";
echo "<area alt='".trim($option)."5' shape='RECTANGLE' coords='".((int)$individualimageswidth * 5 + 6).", 0, ".trim($individualimageswidth).", ".trim($individualimagesheight)."' href='javascript:verify_captcha(".chr(34)."5".chr(34).");'>"."\n";
echo "</map>"."\n";
echo "<img src='createimage.php?time=".time()."' border='0' usemap='#map'>"."\n\n";
echo "</td>"."\n";
echo "</tr>"."\n";
echo "<tr>"."\n";
echo "<td valign='middle' align='center'>"."\n";
echo "<font style='font-family: ".trim($fontfamily)."; font-size:".trim($fontsize)."; color: ".trim($fontcolor).";'>".trim($caption)."</font>"."\n";
echo "</td>"."\n";
echo "</tr>"."\n";
echo "</table>"."\n\n";

Y finalmente debemos incluir JQuery (y algunas otras rutinas extras) dentro de nuestro script para poder usar AJAX y hacer la validación al momento de hacer clic sobre alguna sección de la imagen.

echo "<script language='JavaScript' src='jquery/jquery.js'>"."\n";
echo "</script>"."\n\n";
echo "<script language='JavaScript'>"."\n\n";
include("js.php");
echo "\n\n</script>"."\n";

createimage.php

Este es el contenido del archivo:

<?php

//Get random image, thanks to http://php.net/manual/es/session.examples.basic.php
session_start();
$rand = $_SESSION["rand"];

//thanks to http://www.forosdelweb.com/f18/juntar-imagenes-con-php-jpg-png-530993/
header("Content-type: image/png");

include("configuration.php");

ini_set('memory_limit', '256M' );
set_time_limit(0);

global $individualimageswidth, $individualimagesheight;

//create background transparent to output
//thanks to https://www.codepunker.com/blog/how-to-merge-png-files-with-php-and-GD-Library?lang=es
//thanks to https://stackoverflow.com/questions/8437665/how-to-create-an-image-with-transparent-background
$thumbimg1 = imagecreatetruecolor($individualimageswidth * 5, $individualimagesheight);
$thumbimg2 = imagecreatetruecolor($individualimageswidth * 5, $individualimagesheight);
$thumbimg3 = imagecreatetruecolor($individualimageswidth * 5, $individualimagesheight);
$thumbimg4 = imagecreatetruecolor($individualimageswidth * 5, $individualimagesheight);
$thumbimg5 = imagecreatetruecolor($individualimageswidth, $individualimagesheight);

$trans_background = imagecolorallocatealpha($thumbimg1, 255, 255, 255, 127);

imagefill($thumbimg1, 0, 0, $trans_background);
imagefill($thumbimg2, 0, 0, $trans_background);
imagefill($thumbimg3, 0, 0, $trans_background);
imagefill($thumbimg4, 0, 0, $trans_background);
imagefill($thumbimg5, 0, 0, $trans_background);

//thanks to https://x10hosting.com/community/threads/help-generating-a-transparent-png-image-using-php.93108/
imagecolortransparent ($thumbimg1, $trans_background);

//load images
if(file_exists("images/1.png"))
$img1 = imagecreatefrompng("images/1.png");
else
$img1 = null;

if(file_exists("images/2.png"))
$img2 = imagecreatefrompng("images/2.png");
else
$img2 = null;

if(file_exists("images/3.png"))
$img3 = imagecreatefrompng("images/3.png");
else
$img3 = null;

if(file_exists("images/4.png"))
$img4 = imagecreatefrompng("images/4.png");
else
$img4 = null;

if(file_exists("images/5.png"))
$img5 = imagecreatefrompng("images/5.png");
else
$img5 = null;

//rotate random image, thanks to https://manuales.guebs.com/php/function.imagerotate.html
if($rand == 1)
$img1 = imagerotate($img1, 180, 0);
elseif($rand == 2)
$img2 = imagerotate($img2, 180, 0);
elseif($rand == 3)
$img3 = imagerotate($img3, 180, 0);
elseif($rand == 4)
$img4 = imagerotate($img4, 180, 0);
elseif($rand == 5)
$img5 = imagerotate($img5, 180, 0);
else
$img1 = imagerotate($img1, 180, 0);

//resize images to new sizes
$imgsize = getimagesize("images/1.png");
imagecopyresized($thumbimg1, $img1, 0, 0, 0, 0, $individualimageswidth, $individualimagesheight, $imgsize[0], $imgsize[1]);

$imgsize = getimagesize("images/2.png");
imagecopyresized($thumbimg2, $img2, 0, 0, 0, 0, $individualimageswidth, $individualimagesheight, $imgsize[0], $imgsize[1]);

$imgsize = getimagesize("images/3.png");
imagecopyresized($thumbimg3, $img3, 0, 0, 0, 0, $individualimageswidth, $individualimagesheight, $imgsize[0], $imgsize[1]);

$imgsize = getimagesize("images/4.png");
imagecopyresized($thumbimg4, $img4, 0, 0, 0, 0, $individualimageswidth, $individualimagesheight, $imgsize[0], $imgsize[1]);

$imgsize = getimagesize("images/5.png");
imagecopyresized($thumbimg5, $img5, 0, 0, 0, 0, $individualimageswidth, $individualimagesheight, $imgsize[0], $imgsize[1]);

//create captcha images
imagecopy($thumbimg1, $thumbimg2, $individualimageswidth + 2, 0, 0, 0, $imgsize[0], $imgsize[1]);
imagecopy($thumbimg1, $thumbimg3, ($individualimageswidth * 2) + 4, 0, 0, 0, $imgsize[0], $imgsize[1]);
imagecopy($thumbimg1, $thumbimg4, ($individualimageswidth * 3) + 6, 0, 0, 0, $imgsize[0], $imgsize[1]);
imagecopy($thumbimg1, $thumbimg5, ($individualimageswidth * 4) + 8, 0, 0, 0, $imgsize[0], $imgsize[1]);

//output final image
imagepng($thumbimg1);

//destroy images
imagedestroy($img1);
imagedestroy($img2);
imagedestroy($img3);
imagedestroy($img4);
imagedestroy($img5);

imagedestroy($thumbimg1);
imagedestroy($thumbimg2);
imagedestroy($thumbimg3);
imagedestroy($thumbimg4);
imagedestroy($thumbimg5);

?>

Comenzamos leyendo el contenido almacenado en la variable de sesión "rand". Recordemos que en el paso anterior generamos la interfaz gráfica de tchaptcha, se eligió una posición al azar de las cinco posibles imágenes y ahora vamos a invertir esa imagen (cuyo número se encuentra almacenado en la variable de sesión).

Antes de ello, vamos a cargar a memoria las cinco imágenes que se encuentran en nuestra carpeta "images" y en secuencia las vamos a ir subiendo a nuestra memoria y procederemos a invertir la que corresponda a la posición de nuestra variable de sesión.

//rotate random image, thanks to https://manuales.guebs.com/php/function.imagerotate.html
if($rand == 1)
$img1 = imagerotate($img1, 180, 0);
elseif($rand == 2)
$img2 = imagerotate($img2, 180, 0);
elseif($rand == 3)
$img3 = imagerotate($img3, 180, 0);
elseif($rand == 4)
$img4 = imagerotate($img4, 180, 0);
elseif($rand == 5)
$img5 = imagerotate($img5, 180, 0);
else
$img1 = imagerotate($img1, 180, 0);

Todas las imágenes forman parte del proyecto Crystal Clear de Everaldo Coelho, las imágenes pueden descargarse desde http://www.iconarchive.com/show/crystal-clear-icons-by-everaldo.1.html y usarse libremente bajo licencia LGPL.

Una vez tengamos todas las imágenes cargadas ahora vamos a mostrarlas en secuencia y generar la salida final (liberando todos los recursos en el proceso).

//resize images to new sizes
$imgsize = getimagesize("images/1.png");
imagecopyresized($thumbimg1, $img1, 0, 0, 0, 0, $individualimageswidth, $individualimagesheight, $imgsize[0], $imgsize[1]);

$imgsize = getimagesize("images/2.png");
imagecopyresized($thumbimg2, $img2, 0, 0, 0, 0, $individualimageswidth, $individualimagesheight, $imgsize[0], $imgsize[1]);

$imgsize = getimagesize("images/3.png");
imagecopyresized($thumbimg3, $img3, 0, 0, 0, 0, $individualimageswidth, $individualimagesheight, $imgsize[0], $imgsize[1]);

$imgsize = getimagesize("images/4.png");
imagecopyresized($thumbimg4, $img4, 0, 0, 0, 0, $individualimageswidth, $individualimagesheight, $imgsize[0], $imgsize[1]);

$imgsize = getimagesize("images/5.png");
imagecopyresized($thumbimg5, $img5, 0, 0, 0, 0, $individualimageswidth, $individualimagesheight, $imgsize[0], $imgsize[1]);

//create captcha images
imagecopy($thumbimg1, $thumbimg2, $individualimageswidth + 2, 0, 0, 0, $imgsize[0], $imgsize[1]);
imagecopy($thumbimg1, $thumbimg3, ($individualimageswidth * 2) + 4, 0, 0, 0, $imgsize[0], $imgsize[1]);
imagecopy($thumbimg1, $thumbimg4, ($individualimageswidth * 3) + 6, 0, 0, 0, $imgsize[0], $imgsize[1]);
imagecopy($thumbimg1, $thumbimg5, ($individualimageswidth * 4) + 8, 0, 0, 0, $imgsize[0], $imgsize[1]);

//output final image
imagepng($thumbimg1);

//destroy images
imagedestroy($img1);
imagedestroy($img2);
imagedestroy($img3);
imagedestroy($img4);
imagedestroy($img5);

imagedestroy($thumbimg1);
imagedestroy($thumbimg2);
imagedestroy($thumbimg3);
imagedestroy($thumbimg4);
imagedestroy($thumbimg5);

Si todo ha salido bien el archivo createimage.php devolverá una imagen creada a partir de todas las imágenes contenidas en la carpeta images, siendo una de ellas invertida y que corresponde a la imagen sobre la cual se deba de hacer clic para validar el captcha.

js.php

Cuando el visitante hace clic sobre una posición del captcha, este mediante AJAX verifica si es correcta o no la posición que el usuario ha seleccionado. La función verify_captcha recibe un parámetro: la posición de la imagen que el usuario esta presionando y es esta posición la que se validará mediante el uso de AJAX.

Este es el contenido del archivo:

<?php include("configuration.php"); ?>

//thanks to http://stackoverflow.com/questions/18082/validate-decimal-numbers-in-javascript-isnumeric
function isNumeric(str)
{

var RE = /^-{0,1}\d*\.{0,1}\d+$/;
return (RE.test(str));

}

//thanks to http://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-re
//thanks to https://www.christianheilmann.com/2010/01/10/loading-external-content-with-ajax-using-jquery-and-yql/
function getFileFromAJAXGETMethod(url, timeout)
{

var html = "";

jQuery.ajax({

url: url,
type: "get",
success: function(data) {
html = data;
},
async: false,
timeout: timeout
});

return html;

}

//thanks to http://hayageek.com/jquery-ajax-post/
function getFileFromAJAXPOSTMethod(url, valuepairstr, timeout)
{

var html = "";

jQuery.ajax({

url: url,
type: "post",
data: valuepairstr,
success: function(data, textStatus, jqXHR) {
html = data;
},
async: false,
timeout: timeout

});

return html;

}

function verify_captcha(option)
{

var status = "";

status = getFileFromAJAXGETMethod("verify.php?id=" + Math.random() + "&captcha_code=" + option, 10000);

if(status == "")
<?php global $errorfunction; echo trim($errorfunction).";\n"; ?>
else
{

try
{

if(isNumeric(String(status)) == false)
<?php global $errorfunction; echo trim($errorfunction).";\n"; ?>
else
{

switch(parseInt(status))
{

case 0:

<?php global $errorfunction; echo trim($errorfunction).";\n"; ?>
break;

case 200: //OK

<?php global $okfunction; echo trim($okfunction).";\n"; ?>
break;

case 400: //Incomplete message to send

<?php global $errorfunction; echo trim($errorfunction).";\n"; ?>
break;

case 403: //Denied access

<?php global $errorfunction; echo trim($errorfunction).";\n"; ?>
break;

default:

<?php global $errorfunction; echo trim($errorfunction).";\n"; ?>
break;

}

}

}
catch(e)
{
<?php global $errorfunction; echo trim($errorfunction).";\n"; ?>
}

}

}

No voy a entrar en muchos detalles ya que en el artículo anterior (Como implementar captchas en tu sitio web usando PHP) se mostró como funciona AJAX y como se hace la validación. Aquí es la misma idea: si la validación es correcta obtendremos de vuelta el valor 200, 403 en cualquier otro caso y esto a su vez disparará las funciones okfunction y errfunction que hallamos definido en nuestro archivo configuration.php.

verify.php

Este es el contenido del archivo:

<?php

//Get random image, thanks to http://php.net/manual/es/session.examples.basic.php
session_start();

if(isset($_GET["captcha_code"]))
$captcha_code = trim($_GET["captcha_code"]);
else
$captcha_code = "";

$rand = $_SESSION["rand"];

if(trim($captcha_code) == "")
echo "400";
else
{

if(trim($rand) == trim($captcha_code))
$captcha_status = true;
else
$captcha_status = false;

if($captcha_status == true)
echo "200";
else
echo "403";

}

?>

Del mismo modo que el punto anterior ya se ha explicado como se hace la validación. Leemos el contenido de la variable de sesión, lo comparamos contra el valor del captcha (que lo estamos pasando mediante AJAX para su validación), si coinciden se devuelve un valor 200, 403 en caso de no ser así.

Pues es todo, ya tenemos nuestro captcha funcional, pueden descargarlo desde aquí para probarlo y usarlo libremente de acuerdo con los términos de la licencia del mismo. El cual por cierto se libera con doble licenciamiento GPL/BSD.

¿Te gustó este post?, entonces si lo deseas puedes apoyarnos para continuar con nuestra labor, gracias.