SummArg | Cursos y recursos para webmasters

25/06/2011

MotionCaptcha, un anti-spam para dibujar

La idea de MotionCaptcha es simple y apunta a mantener la efectividad de los Captchas pero disminuir el tedio por parte del usuario a la hora de demostrar que es humano.

Consiste en un recuadro en donde aparecerá una figura aleatoria, en uno de sus extremos veremos un círculo que es en donde debemos comenzar el trazado. Dibujamos con el mouse por encima de la figura en cuestión y habremos resuelto el captcha.

Para instalarlo en nuestro formulario primero debemos descargar sus archivos e incluir entre etiquetas <head>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="jquery.motionCaptcha.0.1.min.js"></script>
<link href="jquery.motionCaptcha.0.1.css"></script>

Comenzamos el formulario como de costumbre, con su ID y dejamos el campo action en blanco.

<form action="#" id="mycoolform" method="[get/post]">

Añadimos el siguiente código en donde se mostrará nuestra figura:

<div id="mc">
    <p>Por favor dibujá la figura para validar:</p>
    <canvas id="mc-canvas"></canvas>
</div>

Deshabilitamos el botón enviar:

<input type="submit" disabled="disabled" value="Enviar" />

Añadimos un input oculto al formulario que tendrá la action del form (en este caso, enviar a submitform.php):

<input type="hidden" id="fairly-unique-id" value="submitform.php" />

Finalmente añadimos la configuración del script seteando las acciones para cada ID:

<script>
$('#form-id').motioncaptcha({
    action: '#fairly-unique-id'
});
// Or, if you just used 'mc-action' as the hidden input's ID:
$('#form-id').motioncaptcha();
</script>

Acepta varias opciones de configuración, es simple y bastante bien documentado.

Descarga y documentación | Demo

Visto en Kabytes

Dejar un comentario