Clicky

MotionCAPTCHA - Stop al spam dibujando formas

MotionCAPTCHA

MotionCAPTCHA es un plugin de CAPTCHA con jQuery, basado en el HTML5 Canvas "Harmony procedural drawing tool" por Mr Doob y el algoritmo $1 Unistroke Gesture Regonizer (y la más reciente mejora del algoritmo Protractor), obligando a los usuarios a dibujar la forma que ven en el lienzo con el fin de enviar un formulario.

Si tienes prisa y estás interesado en utilizar esto en cualquier lugar con la versión más actual de MotionCAPTCHA y una completa guía de consejos/implementación, diríjete a la página de Github y pulsa 'watch', o suscribirse a las actualizaciones por RSS.

La versión 0.2 añade soporte para móviles, así que si programas para móvil ahora se puede probar la demo.
 
Por el momento, es sólo una prueba de concepto - que sólo utiliza el reconocimiento de gestos del lado del cliente, y realmente no es soportado por IE (a mi si me ha funcionado), pero las próximas versiones contarán con la mejora progresiva y la posibilidad de utilizarlo en entornos de producción como una buena alternativa de CAPTCHA.

Demostración •  Código en Github

¿Cómo funciona?

En la próxima versión, el plugin usará mejora progresiva para que el formulario utilice un script CAPTCHA estándar del lado del servidor (por ejemplo PHP), y luego al cargar la página el plugin que cambia el lienzo de Motion CAPTCHA, sólo si el navegador ha cargado lo suficiente.

Por ahora, aquí está cómo funciona (si necesitas una guía paso a paso, hay un  How-To abajo):

•  Se debe deshabilitar manualmente el formulario, vaciando la forma del atributo de acción y su valor colocando un <input> oculto con una identificación específica. También se debe poner disabled="disabled" en el botón de enviar, para puntos adicionales.

•  Agregar algunas líneas de HTML al formulario para inicializar el lienzo MotionCAPTCHA, y agregar secuencias de comandos del plugin a tu página.

•  El usuario dibuja la forma y, si va bien, el plugin inserta la forma de  acción en la etiqueta <form>. El usuario puede enviar el formulario.

Sé que esto va a ser impopular en su estado actual, porque usted está haciendo lo imposible para que la gente envíe el formulario sin JavaScript o soporte de lienzo - Pero es divertido. Y en el futuro, va a trabajar con gracia. 

Tecnología/Créditos

El plugin MotionCAPTCHA combina uno de los pinceles ("Ribbon" - y gran parte de la lógica) de  Mr Doob"™s Harmony canvas experiment, con algoritmos de reconocimiento de gestos y formas vectoriales basadas "‹"‹totalmente en el reconocedor de gestos  $1 Unistroke Gesture Recognizer de Jacob O. Wobbrock, Ph.D. and Andrew D. Wilson, Ph.D., y el posterior algoritmo de mejora Protractor de Yang Li, Ph.D.

Cómo utilizarlo

1. Añada los guiones del plugin: (se usará jQuery 1.6.x desde la API de google, pero se puede cargar a nivel local - y MotionCAPTCHA soporta jQuery 1.4):

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

2. Código del formulario como de costumbre, con un identificador único (por ejemplo, '#mycoolform') y establecer la acción de form para poner en blanco (o "#") - por ejemplo:

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

3. Añadir un marcador de posición con el elemento  <div> al formulario (Nota: se puede usar  <fieldset> si se necesita para validar) que contiene el lienzo en blanco:

<div id="mc">
    <p>Please draw the shape in the box to submit the form:</p>
    <canvas id="mc-canvas"></canvas>
</div>

4. Desactivar el botón de enviar, por ejemplo:

<input type="submit" disabled="disabled" value="Submit Form" />

5. Agregar un campo oculto en el formulario, con la acción form como su valor. Se da un ID único, o el id 'mc-acción', así:

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

6. Llamamos al plugin en el elemento del formulario. Si utiliza cualquier otro tipo de identificación que 'mc-acción' para la entrada oculta, sólo tendrás que pasar a la extensión, así:

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

Están disponibles otras opciones (se muestran las por defecto):

$('#form-id').motionCaptcha({
    // Basics:
    action: '#mc-action',        // the ID of the input containing the form action
    divId: '#mc',                // if you use an ID other than '#mc' for the placeholder, pass it in here
    cssClass: '.mc-active',      // this CSS class is applied to the 'mc' div when the plugin is active
    canvasId: '#mc-canvas',      // the ID of the MotionCAPTCHA canvas element

    // An array of shape names that you want MotionCAPTCHA to use:
    shapes: ['triangle', 'x', 'rectangle', 'circle', 'check', 'caret', 'zigzag', 'arrow', 'leftbracket', 'rightbracket', 'v', 'delete', 'star', 'pigtail'],

    // These messages are displayed inside the canvas after a user finishes drawing:
    errorMsg: 'Please try again.',
    successMsg: 'Captcha passed!',

    // This message is displayed if the user's browser doesn't support canvas:
    noCanvasMsg: "Your browser doesn't support <canvas> - try Chrome, FF4, Safari or IE9."

    // This could be any HTML string (eg. '<label>Draw this shit yo:</label>'):
    label: '<p>Please draw the shape in the box to submit the form:</p>'
});

Este sería un ejemplo completo:

<!-- The form that MC will act on: -->
            <form action="#" method="post" id="mc-form">
                <p><input class="placeholder" type="text" placeholder="your name &hellip;"></p>
                <p><input class="placeholder" type="email" placeholder="your email address &hellip;"></p>
                <p><textarea class="placeholder" placeholder="your message &hellip;" cols="" rows="3"></textarea></p>

                <div id="mc">
                    <p>Please draw the shape in the box to submit the form: (<a onclick="window.location.reload()" href="#" title="Click for a new shape">new shape</a>)</p>
                    <canvas id="mc-canvas">
                        Your browser doesn't support the canvas element - please visit in a modern browser.
                    </canvas>
                    <input type="hidden" id="mc-action" value="http://josscrowcroft.com/projects/motioncaptcha-jquery-plugin/" />
                </div>

                <p><input disabled="disabled" autocomplete="false" type="submit" value="Submit"></p>

<!-- Get them jqueries: -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
    
    <!-- HTML5 Placeholder fallback: -->
    <script src="/js/jquery.placeholder.1.1.1.min.js" type="text/javascript"></script>

<!-- MotionCAPTCHA local: -->
    <script src="/MotionCAPTCHA/jquery.motionCaptcha.0.2.js" ></script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            
            // Do the biznizz:
            $('#mc-form').motionCaptcha({
                shapes: ['triangle', 'x', 'rectangle', 'circle', 'check', 'zigzag', 'arrow', 'delete', 'pigtail', 'star']
            });
            
            // Yep:
            $("input.placeholder").placeholder();
        });
    </script>

    <!-- end of demo! -->

Jesus_Caceres