MotionCAPTCHA, l’antispam geometrico

Autore:  Angelo Iasevoli

Lo spam è forse la cosa più fastidiosa presente su internet. Bot che navigano 24 ore su 24 alla ricerca di possibili siti da riempire di spazzatura pubblicitaria. Blog, piattaforme, sistemi wiki: nessuno è al sicuro.

Fortunatamente l’uomo ha trovato rimedio (o quasi) a questo problema inventando i CAPTCHA.

un captcha non convenzionale

I CAPTCHA più diffusi sono costituiti da caratteri quasi illeggibili che dovrebbero in teoria non essere compresi dai bot. Questo è il funzionamento: semplice ma – a quanto pare – efficace.

E se invece di usare i soliti CAPTCHA utilizzassimo qualcosa di molto meno convenzionale e sicuramente più divertente? Sto infatti per presentarvi uno plugin jQuery che vi consentirà di riconoscere gli esseri umani dai bot grazie a dei disegni tanto elementari quanto divertenti.

Chi ha detto che i CAPTCHA devono essere per forza noiosi?

Stiamo parlando di MotionCAPTCHA. Permetterà ai vostri utenti di dimostrare la loro “umanità” semplicemente disegnando con il mouse delle forme che il plugin stesso indicherà. Qui trovate una demo realizzata dallo stesso creatore del plugin e qui la repository su Github.

Cominciamo

Per integrare nel nostro sito questo sistema sarà necessario, ovviamente, richiamare tutti i file necessari:

<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>

Chiaramente bisognerà cambiare la directory in base alle proprie esigenze. Il file jquery.min.js è stato preso dai server di Google. I file richiesti nella seconda e terza riga li trovate andando nella repository su Github.

Il Form

Per creare il form ci serviremo del solito codice html:

<form action="#" id="MioForm" method="post">

A questo punto riempiamolo con tutti gli input che servono a noi (magari un email ed il commento per un post). Per aggiungere il CAPTCHA “speciale” bisogna inserire le seguenti righe di html:

<div id="mc">
    <p>Dimostra che sei umano, disegna la forma che vedi qui sotto:</p>
    <canvas id="mc-canvas"></canvas>
</div>

Ora aggiungiamo il pulsante disabilitato (che si attiverà al superamento della prova) e poi un input nascosto che contenga l’action del nostro form:

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

Il jQuery

Non ci rimane altro da fare che collegare il tutto e vedere il risultato. Per permettere al form di essere riconosciuto dal plugin usate le seguenti righe di codice javascript:

$('#MioForm').motioncaptcha({
    action: '#fairly-unique-id'
});

Questa qui sopra è la versione più semplice, con tutti i parametri lasciati di default. Ci sono però altre impostazioni con cui poter giocare, ecco un esempio alternativo:

$('#MioForm').motioncaptcha({
    // Basics:
    action: '#mc-action',        // L'ID dell'input contenente l'action
    divId: '#mc',                // L'ID del div contenente il CAPTCHA
    cssClass: '.mc-active',      // La classe CSS applicata quando #mc è attivo
    canvasId: '#mc-canvas',      // l'ID dell'elemento canvas MotionCAPTCHA

    // Un array contenente tutte le forme consentite:
    shapes: ['triangle', 'x', 'rectangle', 'circle', 'check', 'caret', 'zigzag', 'arrow', 'leftbracket', 'rightbracket', 'v', 'delete', 'star', 'pigtail'],

    // I messaggi mostrati:
    errorMsg: 'Prova ancora.',
    successMsg: 'Captcha superato!',

    // Messaggio mostrato se il browser non supporta il plugin:
    noCanvasMsg: "il tuo browser non supporta le canvas - prova Chrome, FF4, Safari o IE9."
});

Credo sia tutto, conoscete  altri metodi per provare che il vostro utente è costituito da materia organica?

Come sempre vi invito ad abbonarvi al feed della sezione Hi-Tech. Alla prossima! ;)