Skip to main content

Joomla3 e Recaptcha: la rotella gira all'infinito?

| Gianluca Gabella | Tips & Tricks
share on facebook share on twitter share on linkedin

Indice:


Negli ultimi mesi alcuni siti fatti con Joomla3 e con il componente Google ReCaptcha installato e configurato hanno smesso di funzionare: capiamo come risolvere il problema!

E' tutta colpa di Mootools!

Ma andiamo con ordine.

Che cos'è Mootools?

Si tratta di una libreria javascript gratuita, nata nel lontano 2006 con lo scopo di semplificare la vita ai programmatori javascript nello svolgere task di gestione del DOM. E' stata sviluppata fino al 2016, arrivando alla versione 1.6
Questa libreria è sempre stata integrata nel core di Joomla! fino alla versione 3, dalla versione 4 in avanti questa libreria è stata rimossa.

Cosa c'entra Mootools con Google ReCaptcha?

In teoria nulla, ma visto che si tratta di codice frontend è saltato fuori un problema di incompatibilità tra i due. Molto semplicemente il check "non sono un robot" (che è presente con la versione 2 di ReCaptcha, quindi non stiamo parlando della versione invisibile) ha smesso di funzionare e come unico output abbiamo una rotellina che gira all'infinito. Stiamo parlando di questa casella di controllo:

gif recaptcha di google

Come risolvo il problema del ReCaptcha con Joomla3?

Se questo descritto è il tuo caso, quindi hai:

  • Sito Joomla 2.5 o Joomla 3
  • Un template che usa mootools
  • ReCaptcha abilitato

hai due modi semplici e veloci per risolvere:

Installare un'estensione esterna

Puoi installare un'estensione di terze parti gratuita che ancora si trova sulla JED: https://extensions.joomla.org/extension/mootools-enabler-disabler/

Ti basterà installare questo plugin come tutti gli altri:

  1. Menu in alto -> Estensioni
  2. Gestione -> Installa
  3. Seleziona e carica il pacchetto ZIP che hai scaricato dalla JED

Una volta completata l'installazione dovrai andare ad abilitare il plugin. I passaggi sono i seguenti:

  1. Menu in alto -> Estensioni
  2. Plugin
  3. cerca "moo"

Dovrebbe saltarti fuori il plugin appena installato:

plugin mootools enabler disabler

Se è disabilitato basta cliccare sulla X rossa per abilitarlo. Se è abilitato puoi cliccare sul titolo per entrare nella sua schermata di configurazione.

La schermata di configurazione è composta da due tab principali:

  • Plugin, dove sono presenti i seguenti paramentri
    • Mootools (on/off): puoi selezionare se abilitare o disabilitare mootools
    • Mootools-more (on/off): puoi selezionare se abilitare o disabilitare mootools-more che è un set aggiuntivo di funzioni per mootools
    • Disabled Scripts e Disabled Stylesheets per aggiungere manualmente altri script che vuoi rimuovere dal tuo sito Joomla
  • Autoenable
    • Enable for article edition: segnala al plugin di caricare mootools automaticamente quando si fa editing di articoli da frontend
    • Enable frontend com_users: segnala al plugin di caricare mootools automaticamente quando siamo nell'area utenti del sito da frontend
    • Autoenabled components: qui si può scrivere una lista di componenti (in formato codice, tipo com_content, com_k2, com_users, ecc...) dove mootools sarà caricato in automatico

Una volta disabilitato mootools nella pagina con il captcha questo tornerà a funzionare correttamente. Evviva!

Modificare il codice di mootools manualmente

C'è però un problema: se il mio template fa ampio uso di mootools e io lo disabilito è facile che molti script javascript smettano di funzionare, compromettendo il corretto workflow del mio sito web.

Come possiamo risolvere quindi senza andare a disabilitare completamente questo framework?

Ci viene in aiuto un utente di github dove segnala esattamente quali righe di codice andare a modificare. Potete leggere il suo commento qui.

La parte di codice che dobbiamo modificare è questa:

Array.from = function(item){
	if (item == null) return [];
	return (Type.isEnumerable(item) && typeof item != 'string') ? (typeOf(item) == 'array') ? item : slice.call(item) : [item];
};

e dobbiamo sostituirla con questa:

Array.from = function(item){
	if(new Error().stack.indexOf('recaptcha') >= 0) return [].slice.call(item); // Single line added for reCaptcha fix
	if (item == null) return [];
	return (Type.isEnumerable(item) && typeof item != 'string') ? (typeOf(item) == 'array') ? item : slice.call(item) : [item];
};

Come si fa? Ecco gli step passo passo:

  1. Con un client FTP tipo FileZilla entrate nel vostro spazio hosting dove è installato il sito (in genere è la cartella public_html)
  2. Navigate dentro la cartella /media/system/js
  3. All'interno, tra i vari file, ce ne sono due che si chiamano:
    1. mootools-core.js
    2. mootools-core-uncompressed.js
  4. Scaricateli sul vostro PC
  5. Apriteli con un editor di testo (tipo notepad o notepad++)
  6. Cercate il primo blocco di codice e sostituitelo con il secondo
  7. Salvate il file e ricaricatelo online via FTP

Se tutto è andato a buon fine ora il vostro ReCaptcha dovrebbe funzionare. Ricordatevi di cancellare la cache del browser perché potrebbe aver salvato lo script "vecchio".

Nel caso in cui non riusciate a fare questa modifica è possibile scaricare i due file aggiornati direttamente da GitHub, cliccando qui.

Fine! Buon ReCaptcha a tutti!


Se questo articolo ti è stato utile lascia un feedback!

Ti è stato utile questo articolo?

Come mai?

Ogni feedback è assolutamente benvenuto!

E se vuoi farlo leggere anche ai tuoi amici e colleghi, condividilo!

share on facebook share on twitter share on linkedin
condividi su Facebookcondividi su Twittercondividi su LinkedIncondividi su WhatsAppcondividi su Telegram