Per prevenire i nostri siti da attacchi di spam sui commenti o nei form da robot automatici una delle best practice è quella di implementare il famoso “captcha“.
Il captcha altro non è che un codice generato sul momento non “leggibile” dai robot automatici di spam e che, per questo, consente di limitare l’uso dei form ai soli umani verificati.
Tra i vari codici captcha disponibili quello più utilizzato è, tanto per cambiare, di Google e si chiama ReCaptcha. L’avrete sicuramente incontrato migliaia di volte più volte al giorno durante il vostro peregrinare nel web. Eccovi un classico template del ReCaptcha di Google:
Da qualche tempo, anche in ottica di ottimizzare la gestione/visualizzazione dei captcha da Mobile il ReCaptcha è stato aggiornato e ora si chiama “No Captcha ReCaptcha” ed appare così:
Tra le novità introdotte c’è che la verifica avviene tramite il click sulla casella “I’m not a robot” e successivamente o verrà mostrato un captcha (testuale o numerico) o uno visuale in cui bisognerà scegliere tra alcune immagini. Ecco un video che spiega in 50 secondi il nuovo No Captcha ReCaptcha:
Inserire il No Captcha ReCaptcha nel tuo sito
L’implementazione del No Captcha ReCaptcha sul proprio sito è abbastanza facile e sono disponibili librerie e plugin per i più diffusi Cms, WordPress compreso, che consentono di automatizzare la procedura.
Maggiori informazioni potete trovarle sulla documentazione ufficiale ReCaptcha.
In maniera schematica gli step da seguire sono:
- Registrare il proprio sito a questo link. Otterrete così il codice secret necessario in seguito per configurare eventuali plugin per WordPress.
- Inserire nel template, prima della chiusura del tag <head> il Javascript che verrà fornito
- Inserire il codice html, anch’esso fornito da ReCaptcha, dove si vuole far comparire captcha
- Implementare la verifica via Http POST per la verifica del Captcha
- Ricezione della verifica captcha con relativo esito
Questo è lo schema dal punto di vista di un programmatore e, come già detto, ci sono tanti plugin e librerie che automatizzano l’implementazione evitando di dovervi scontrare con il codice. Eccovi alcuni link utili:
- Libreria ufficiale di Google ReCaptcha su GitHub – Sfruttando i metodi di questa classe con basilari nozioni di programmazione Php sarà possibile implementare correttamente il No Captcha ReCaptcha.
Se invece volete automatizzare tutto eccovi 2 plugin per WordPress:
Dopo questa presentazione del tool andiamo a vedere e spiegare come mai abbiamo dedicato un articolo al reset del No Captcha ReCaptcha Javascript.
No Captcha ReCaptcha Javascript
Non vi avevamo ancora detto che il No Captcha ReCaptcha è disponibile anche in versione Javascript, oltre che Php, e quindi alcuni programmatori amanti di questo linguaggio e dei framework ajax come jQuery o Prototype potrebbero preferire questa versione.
A questo link trovate la Documentazione Ufficiale per le API Javascript di Recaptcha.
Per esigenze tecniche può capitare (e capiterà) di avere la necessità di gestire l’intero processo del ReCaptcha via ajax in modo da non dover far ricaricare la pagina per la verifica all’utente.
Gli sviluppatori di ReCaptcha hanno pensato anche a questo e nell’API Javascript è disponibile il metodo: gerecaptcha.reset() che consente proprio di resettare il captcha.
Il metodo funziona egregiamente ma un ulteriore problema sorge quando si gestisce tutto il processo da jQuery (o altre librerie javascript) dove pur chiamando il comando:
gerecaptcha.reset()
nulla accade.
Cercando come resettare No Captcha Recaptcha via jQuery in rete si trovano varie discussioni su StackOverflow o blog personali di programmatori ma nessuno, di quelli da me verificati, ha risolto il problema.
Tale problematica sorge poiché il codice jQuery che andiamo ad eseguire non può riesce ad usare i metodi del ReCaptcha caricati nella DOM, in particolare il metodo reset() che a noi serve.
Dopo qualche nottata di tentativi siamo riusciti a trovare una soluzione funzionale che permette di gestire il reset di ReCaptcha da jQuery. Più che di soluzione è corretto precisare che si tratta di un banale trucco non molto elegante ma funzionale!
Come Resettare il No Captcha ReCaptcha via jQuery (Soluzione)
Per prima cosa va utilizzata l’implementazione dell’Api Js conla modalità Esplicita nel seguente modo:
<script src=”https://www.google.com/recaptcha/api.js?onload=onloadCallback&hl=it&render=explicit” async defer></script>
Tale modalità ci consente di gestire via Javascript il rendering in autonomia inserendo il seguente codice dove vogliamo che appaia il No Captcha ReCaptcha:
<script type=’text/javascript’>
var captchaContainer = null;
var onloadCallback = function() {
captchaContainer = grecaptcha.render(‘captcha_container’, {
‘sitekey’ : ‘XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX’,
‘callback’ : function(response) {
//Something to do
}});
};
</script>
Qui arriva il punto focale del nostro trucco per risolvere il problema. All’interno della stessa pagina dove utilizziamo e mostriamo il ReCaptcha inseriamo un botton nascosto. Non sarò visibile nella pagina ma essendo all’interno dello stesso codice e quindi della stessa DOM potrà utilizzare e richiamare i metodi del ReCaptcha tra cui il grecaptcha.reset().
Inseriamo quindi il bottone con l’evento “onclick” che richiama “grecaptcha.reset()” con il seguente codice:
<input type=”hidden” name=”resetRC” value=”reset” onclick=”javascript:grecaptcha.reset()”>
A questo punto anche se utilizziamo jQuery o similari potremo sempre e comunque resettare il ReCaptcha utilizzando il metodo “.click()” sul bottone nascosto nella DOM. Ecco un esempio:
$(“input[name=resetRC]”).click();
Come anticipato prima non è un metodo elegante per risolvere il problema ma ha funzionato e probabilmente potrà essere d’aiuto ad altri che, come me, hanno cercato in lungo e in largo senza trovare la soluzione.
Vi è piaciuta la nostra soluzione al reset del No Captcha ReCaptcha da jQuery? Per suggerimenti o supporto scriveteci nei commenti!
Buona Pasqua a tutti!
