Actualmente los captchas son un problema para los usuarios de Internet y aunque cada vez es más normal ver este sistema como control de SPAM de nuestras aplicaciones, cada vez hay más problemas con ellos. Quizas la solución a nuestros problemas la haya traido Apple a nuestras puertas con el iPhone y su sistema de unlock.
Alex Boone ha desarrollado Slider, una versión de este sistema en Javascript usando jQuery. La verdad es que está muy conseguido y el resultado es bastante sorprendente, solo nos falta adaptarlos a nuestras aplicaciones web.
Como una aproximación, he montado un pequeño script que nos convertirá todos los elementos <input class=»slider» /> de nuestra aplicación en un Slide. Algo que nos permitirá mejorar la usabilidad de nuestro captcha.
¿Que necesito?
- jQuery 1.2.3+
- IPhone Lock Slider
Implementación
Para hacerlo más o menos bien, tendremos que utilizar 3 lenguajes de programación.
1) PHP
En PHP generaremos el secureKey y lo alojaremos en sessión para ser comprobado posteriormente.
<?php
session_start();
function randomText($length) {
$pattern = "1234567890abcdefghijklmnopqrstuvwxyz";
for($i=0;$i<$length;$i++) {
$key .= $pattern{rand(0,35)};
}
return $key;
}
$_SESSION["secureKey"] = randomText(6);
?>2) Javascript
Ahora ya tenemos la secureKey en sessión, hemos de relacionarla con nuestro captcha, para ello usaremos un poco de javascript.
//Javascript
$(document).ready(function(){
var secureKey = '<?=$_SESSION["secureKey"]?>';
$('input.slider').each(function(x,el){
// Recipiente
$(el).before('<div id="slider_'+$(el).attr("id")+'"></div>');
//Slider
new Slider('slider_'+$(el).attr("id"),{
message: $(el).val(),
color: "green",
handler: function(){
$(el).val(secureKey);
}
}).init();
//Ocultamos el input
$(el).css("display", "none");
});
});Como podemos ver, montamos la secureKey de Javascript a partir de los datos almacenados en $_SESSION, así mostraremos el valor que se ha de contrastar en siguientes pasos.
3) HTML
Para que el Javascript detecte el input que deseamos convertir en Slider, tendremos que declarar el elemento de una forma concreta.
//HTML
<input name="slide_captcha" type="text" class="slider" value="BOT" title="Deslizame para activar" />Recepción de datos
Al igual que cualquier otro elemento de un formulario, el Slide será tratado en el servidor de la misma forma, salvo que este será comprobado con el valor almacenado previamente en sessión.
<?php
session_start();
if ($_SESSION["secureKey"] != $_POST["slide_captcha"]) {
die("Eres un bot");
} else {
die("NO eres un bot");
}
?>Aclaración
He cambiado el post, por que el anterior era erroneo y no funcionaba, oldlastman tenía razón y me he visto obligado a reescribirlo. Siento las molestias.
Actualización
Visto la repercusión que está teniendo este sistema de «captcha», tanto por mail como comentarios, he decidido crear un pequeño plugin para sustituir el botón de submit de nuestros formularios de comentarios. El sistema en sí, es muy simple incluso me planteé 2 veces si hacer un plugin o simplemente explicar como añadir el código, pero por comodidad para todos vosotros, aqui lo teneis 😀
Este sistema no es apto para sustituir a los captchas actuales (por desgracia), ya que este sistema expone al usuario la secureKey a los bots encargados de llenarme de SPAM. Habrá que buscar alguna otra forma si queremos deshacernos del sistema actual.
