Personalizzazione dell'aspetto di reCAPTCHA

Importante: la versione 1.0 dell'API reCAPTCHA non è più supportata. Esegui l'upgrade alla versione 2.0. Scopri di più

Una volta installato reCAPTCHA sul tuo sito, potresti volerne modificare l'aspetto. Questa pagina spiega: (1) come scegliere uno dei temi reCAPTCHA standard; (2) come personalizzare completamente l'aspetto di reCAPTCHA; e (3) come internazionalizzare reCAPTCHA cambiando la lingua del widget.

Temi standard

Per fare in modo che il widget reCAPTCHA mostri un tema diverso, devi prima aggiungere il seguente codice nella pagina HTML principale in un punto prima dell'elemento <form> in cui viene visualizzato reCAPTCHA (questo non funzionerà se inserito dopo lo script principale in cui viene invocato per la prima volta reCAPTCHA):

 <script type="text/javascript">
 var RecaptchaOptions = {
    theme : 'theme_name'
 };
 </script>

Per utilizzare un tema standard, devi sostituire 'theme_name' con uno dei seguenti quattro temi nomi:

"red" (tema predefinito)	'white'
"blackglass"	"pulizia"

Temi personalizzati

La personalizzazione dei temi ti consente di controllare esattamente l'aspetto dell'immagine reCAPTCHA. Qui puoi trovare una demo dei temi personalizzati. Per utilizzare dei temi personalizzati, devi prima impostare la proprietà del tema di RecaptchaOptions su "personalizzato". Questo indica a reCAPTCHA che non deve creare un'interfaccia utente personale. reCAPTCHA si baserà sulla presenza di Elementi HTML con i seguenti ID per visualizzare il CAPTCHA all'utente:

• Un div vuoto con ID recaptcha_image. È qui che entrano in gioco verrà posizionata l'immagine effettiva. Il div avrà dimensioni di 300 x 57 pixel.
• Un input di testo con ID e nome impostati entrambi su recaptcha_response_field. È qui che l'utente può inserisci la risposta.
• Facoltativamente, un div che contiene l'intero reCAPTCHA widget. Questo div ID deve essere inserito in custom_theme_widget e lo stile del tag div dovrebbero essere impostato su display:none. Dopo il codice a tema reCAPTCHA è stato caricato completamente, il div sarà visibile. Questo elemento evita far sfarfallare la pagina durante il caricamento.

Per implementare tutte queste funzioni, per prima cosa inserisci il seguente codice nella pagina HTML principale in qualsiasi punto prima del <form> in cui compare reCAPTCHA:

 <script type="text/javascript">
 var RecaptchaOptions = {
    theme : 'custom',
    custom_theme_widget: 'recaptcha_widget'
 };
 

Poi, nel modulo <form> in cui vuoi che appaia reCAPTCHA, inserisci:

 <div id="recaptcha_widget" style="display:none">

   <div id="recaptcha_image"></div>
   <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>

   <span class="recaptcha_only_if_image">Enter the words above:</span>
   <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

   <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />

   <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
   <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
   <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>

   <div><a href="javascript:Recaptcha.showhelp()">Help</a></div>

 </div>

 <script type="text/javascript"
    src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
 </script>
 <noscript>
   <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"
        height="300" width="500" frameborder="0"></iframe><br>
   <textarea name="recaptcha_challenge_field" rows="3" cols="40">
   </textarea>
   <input type="hidden" name="recaptcha_response_field"
        value="manual_challenge">
 </noscript>

Nota che le ultime righe sono semplicemente il modo standard per visualizzare reCAPTCHA, come spiegato nell'introduzione di questa guida.

Ecco cosa sta succedendo nel codice riportato sopra. L'oggetto JavaScript reCAPTCHA fornisce metodi che ti consentono di modificare lo stato del CAPTCHA. Il metodo di ricaricamento mostra un nuovo test CAPTCHA, mentre il metodo switch_type consente di passare dai CAPTCHA di immagini a quelli audio. Per creare una UI completa per reCAPTCHA, visualizzare informazioni diverse quando il CAPTCHA è in stati diversi. Ad esempio, quando l'utente sta visualizzando immagine CAPTCHA, link "Ricevi un CAPTCHA audio" dell'immagine. Sono disponibili quattro classi CSS per creare UI stateful:

Classe CSS	Visibile quando…
recaptcha_only_if_image	viene visualizzata un'immagine CAPTCHA
recaptcha_only_if_audio	viene visualizzato un CAPTCHA audio
recaptcha_only_if_incorrect_sol	la soluzione precedente non era corretta
recaptcha_only_if_no_incorrect_sol	la soluzione precedente non era errata

Sebbene i temi offrano molte opzioni, devi seguire alcune regole di coerenza dell'interfaccia utente:

• Devi dichiarare di utilizzare reCAPTCHA vicino al widget CAPTCHA.
• Devi fornire un pulsante visibile che chiami la funzione di ricarica.
• Devi fornire agli utenti con disabilità visiva un modo per accedere a un CAPTCHA audio.
• Devi fornire un testo alternativo per tutte le immagini utilizzate come pulsanti nel widget reCAPTCHA.

Internazionalizzazione: modifica della lingua del widget

Esistono due modi per internazionalizzare il widget reCAPTCHA:

Traduzioni integrate

reCAPTCHA ha una serie di traduzioni integrate. Puoi utilizzarle impostando il parametro lang della RecaptchaOptions:

<script type="text/javascript">
var RecaptchaOptions = {
   lang : 'fr',
};
</script>

Traduzioni personalizzate

Se non è disponibile una traduzione per la tua lingua, puoi crearne una. Devi tradurre tutte le stringhe in il codice JavaScript reCAPTCHA e imposta il valore "custom_translations" di RecaptchaOptions. Tutte le stringhe che non imposti verranno recuperate dalla traduzione predefinita lingua. Puoi utilizzarlo per sostituire solo parte di una traduzione predefinita (ad es. se la traduzione che abbiamo scelto non è adatta alla tua regione). Ad esempio:

<script type= "text/javascript">
var RecaptchaOptions = {
   custom_translations : { instructions_visual : "This is my text:" }
};
</script>

Ecco un esempio funzionante di traduzione italiana personalizzata (inserisci questo codice prima di chiamare reCAPTCHA):

<script type="text/javascript">
        var RecaptchaOptions = {
                custom_translations : {
                        instructions_visual : "Scrivi le due parole:",
                        instructions_audio : "Trascrivi ci\u00f2 che senti:",
                        play_again : "Riascolta la traccia audio",
                        cant_hear_this : "Scarica la traccia in formato MP3",
                        visual_challenge : "Modalit\u00e0 visiva",
                        audio_challenge : "Modalit\u00e0 auditiva",
                        refresh_btn : "Chiedi due nuove parole",
                        help_btn : "Aiuto",
                        incorrect_try_again : "Scorretto. Riprova.",
                },
                lang : 'it', // Unavailable while writing this code (just for audio challenge)
                theme : 'red' // Make sure there is no trailing ',' at the end of the RecaptchaOptions dictionary
        };
</script>

Riferimento a RecaptchaOptions

Nel dizionario reCAPTCHAOptions possono essere impostati i seguenti campi:

Chiave	Valori possibili	Valore predefinito	Significato
tema	"red" | 'white' (bianco) | "blackglass" | "pulizia" | 'personalizzato'	"rosso"	Definisce il tema da utilizzare per reCAPTCHA. I temi rosso, bianco, vetro nero e chiari sono temi predefiniti in cui reCAPTCHA fornisce l'interfaccia utente. Nel tema personalizzato, il tuo sito ha il pieno controllo sull'aspetto di reCAPTCHA.
lingua	Qualsiasi codice lingua supportato.	"it"	La lingua utilizzata nell'interfaccia per i temi predefiniti. Sono supportate le seguenti lingue: Lingua Codice Inglese it Olandese nl Francese fr Tedesco de Portoghese pt Russo ru Spagnolo es Turco tr Se la lingua del tuo sito non è supportata, puoi sempre utilizzare temi personalizzati per inserire reCAPTCHA nella tua lingua.
custom_translations	Un dizionario di traduzioni	null	Utilizzalo per specificare traduzioni personalizzate delle stringhe reCAPTCHA.
custom_theme_widget	Una stringa con l'ID di un elemento DOM	null	Se utilizzi i temi personalizzati, si tratta di un elemento div che contiene il widget. Per informazioni su come utilizzare questa funzionalità, consulta la sezione dedicata ai temi personalizzati.
tabindex	qualsiasi numero intero	0	Imposta un valore tabindex per la casella di testo reCAPTCHA. Se altri elementi del modulo utilizzano un oggetto tabindex, deve essere impostato in modo da facilitare la navigazione per l'utente

Ad esempio, questo tag script imposta il tema bianco e l'indice tabulazione 2 per reCAPTCHA:

<script>
var RecaptchaOptions = {
   theme : 'white',
   tabindex : 2
};
</script>