martes, 8 de noviembre de 2011

Captcha - Eres un humano o un robot? (se aceptan replicantes)

Vamos a explicar como adaptar un captcha.
Por un lado, utilizamos una librería que nos abastece de códigos captchas y por otro lado, vamos a explicar como insertarlo en nuestro formulario a validar (mediante AJAX).

Hace poco estuve buscando captchas para un proyecto y me dí cuenta que todo el mundo ponía a la disposición de los programadores código para generar captchas, pero no pude encontrar ninguna explicación sobre cómo realizar la implementación.

Se acabaron vuestras inquietudes, os ayudaré!


HTML:
<form action="" name="form0" method="post" >

<div>
<img src="/captcha.php" id="captcha" /><br/>
<!-- CHANGE TEXT LINK -->
<a href="#" onclick="document.getElementById('captcha').src='captcha.php?'+Math.random();" id="change-image">Recargar Captcha.</a>
<input type="text" name="captcha" id="captcha-form" />
</div>

<input type="button" value="Enviar" onclick="MM_validateForm('variable1','variable2');return document.MM_returnValue" />
</form>

PHP 1:
En la raíz del directorio debe añadirse el archivo: captcha.php
Podemos descargarlo en: captcha.php
Gentileza del programador José Rodríguez.

Hasta aquí muy sencillo, enviamos el formulario (post o get).

JAVASCRIPT:
<script type="text/javascript">

function MM_validateForm() { //v4.0

//Aquí validamos el formulario como queramos con JQuery.validate,  con Dreamweaver ... etc.
//Y llegamos al punto en que decimos: Si no hay errores llamamos a la función isCaptcha();

if (errors) { alert(''+errors); } else { isCaptcha(); }


}


En esta función hacemos una llamada Ajax a validacaptcha.php, pasándole el parámetro captcha.

function isCaptcha(){

var captcha=document.getElementById("captcha-form").value;
var validador="http://www.dominio.es/validacaptcha.php?captcha="+captcha;

var data = $.ajax({
url: validador,
async: false
}).responseText;

//ALERT width the white spaces!!!
data=data.trim();

//alert("data valor:"+data);
if (data=="true"){
document.form0.submit();
} else {
$("#result").remove();
$("#captcha-form").before("

El captcha es incorrecto!

");
$("#result").attr("style","background-color:#f46f6f;");
return false;
}

}
</script>



PHP 2:
Validacaptcha.php
Tamibén lo añadimos en la raíz del directorio debe añadirse el archivo.

<?php session_start(); ?>
<?php

/** Validate captcha */
if (!empty($_REQUEST['captcha'])) {

//echo "SES:".$_SESSION['captcha']."
";
//echo "REquest:".$_REQUEST['captcha']."
";

if (empty($_SESSION['captcha']) || trim(strtolower($_REQUEST['captcha'])) != $_SESSION['captcha']) { echo "false"; } else { echo "true"; }


unset($_SESSION['captcha']);

}?>


Todo este código se puede optimizar escribiendo llamadas JQuery etc... pero lo importante es quedarnos con el flujo de la llamada, para así entender la implementación.

Actualmente, existen librerias muy potentes para implementar un captcha como Recaptcha de Google, de esta manera la implementación es mucho más sencilla pero depende de un código externo y como siempre, si realizamos algún ejemplo manual aunque sólo sea uno en nuestra vida, entenderemos cómo funciona!

Espero que os sirva de ayuda.

No hay comentarios: