Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Form Design
Webdesign

Come Integrare “No CAPTCHA reCAPTCHA” nel tuo sito web

by
Difficulty:BeginnerLength:LongLanguages:

Italian (Italiano) translation by Mariano Serafini (you can also view the original English article)

Gli input di CAPTCHA sono forse i più comuni di tutte le esperienze frustranti sul web. Sono abbastanza fastidiosi per la maggioranza degli utenti, per non parlare di chi ha problemi di vista o di chiunque si affida a tecnologie assistive come i lettori di schermo per accedere al web. Tuttavia, purtroppo, i CAPTCHA sono assolutamente vitali nella lotta contro lo spam. 

A necessary evil thanks spammers
Un male necessario (grazie agli spammer)

Ironia della sorte, anche se i CAPTCHA tradizionali con "testo distorto" sono complicati per gli utenti umani da leggere, le moderne tecnologie di intelligenza artificiale hanno meno problemi a risolverli. Google usa persino una tecnologia simile per leggere i numeri delle case e i segnali stradali per confermare le posizioni di Google Street View!

I robot di Google possono leggere accuratamente queste immagini

A questo punto è ovvio, quindi che gli sviluppatori di Google hanno creato la migliore soluzione CAPTCHA attualmente esistente, verso la fine del 2014. Il No CAPTCHA reCAPTCHA non richiede nient'altro che un tocco col dito, un clic del mouse o concentrarsi sull'input con la tastiera e colpendo la barra spaziatrice.

Nella maggior parte dei casi è così semplice, ma se l'analisi dei rischi di Google ancora non può essere sicura che tu sia Umano, apparirà un secondo prompt.

Puoi vederlo in azione su tutto il web già, come nella pagina di presentazione di @materialup per esempio.

Ottieni No CAPTCHA reCAPTCHA

Andiamo al sodo e prepariamo il No CAPTCHA.

Passo 1

Prima di tutto, abbiamo bisogno di una chiave API, quindi andiamo su https://www.google.com/recaptcha/admin. Per accedere a questa pagina devi essere registrato in un account Google. Ti verrà chiesto di registrare il tuo sito web, perciò dai un nome adatto, quindi elenca i domini (per esempio tutsplus.com) dove verrà utilizzato questo particolare reCAPTCHA. Sottodomini (ad esempio webdesign.tutsplus.com e code.tutsplus.com) vengono automaticamente presi in considerazione. 

Passo 2

In questo modo verrà fornito un codice del sito e la relativa chiave segreta:

Passo 3

Sotto le chiavi vedrai alcuni frammenti di codice per includere reCAPTCHA sul tuo sito web. Prima di tutto c'è JavaScript:

puoi anche definire quale delle 40 lingue supportate stai utilizzando aggiungendo un parametro alla stringa. Qui stiamo aggiungendo es che ci darà un reCAPTCHA per la lingua spagnola:

posiziona questo tag script in fondo alla tua pagina (o semplicemente sotto il modulo in cui apparirà la reCAPTCHA, a seconda di come gestisci la priorità di caricamento delle risorse).

Passo 4

Subito dopo c'è il segnaposto che devi aggiungere al markup del tuo modulo dove vuoi far apparire il reCAPTCHA.

Nota: l'attributo data-sitekey avrà il valore della tua chiave, non questo esempio fittizio.

Ci sono altri attributi che è possibile aggiungere per personalizzare l'aspetto e la funzionalità del tuo reCAPTCHA a questo punto. Ad esempio, aggiungendo data-theme="dark" a questo div avrai una versione scura, che potrebbe adattarsi meglio all'interfaccia utente:

Per ulteriori dettagli sulla configurazione del reCAPTCHA, cai su developers.google.com.

Ricapitolando

Ora che abbiamo gli ingredienti iniziali è il momento di metterli in un ambiente di lavoro.

Passo 1

Metti il nostro tag script e il segnaposto in un semplice modulo: 

Qui abbiamo usato una struttura di pagina di base con un modulo contenente un input nome, un input email e un pulsante di invio. Non c'è nessun tipo di stile qui perché non è veramente necessario per questo tutorial.

our captcha form
Dovresti avere qualcosa che assomiglia a questo.

Per dimostrare che il test reCAPTCHA è stato superato, dovremo eseguire alcuni controlli sul lato server. In questo caso useremo PHP, quindi salva questo file in un nuovo progetto come index.php.

Passo 2

Come puoi notare il metodo del modello è post, quindi quando inviamo i dati del form torneranno in questa pagina attraverso un array di variabili. Possiamo inviare queste variabili ruotando a turno su ognuna, quindi aggiungi quello che segue da qualche parte nella tua pagina:

Ciò richiede ogni coppia di chiave/valore presente nell'array $_POST e inviarli con un po 'di formattazione. Ora, quando invii il modulo, dovresti vedere qualcosa di simile:

Vedrai il valore restituito per nome e e-mail, ma anche un valore per g-recaptcha-response. Se non sei riuscito a completare il test CAPTCHA questo valore sarà vuoto, ma se hai verificato la casella "Non sono un robot", vedrai una grande serie di caratteri.

È questo valore che dobbiamo inviare a Google in modo che possa essere verificato, quindi ora facciamolo.

Passo 3

Fortunatamente, gli sviluppatori di Google hanno fatto la parte complicata del lavoro per noi, quindi vai sulla pagina del progetto ReCAPTCHA su Github e copia la libreria recaptchalib.php. Mettila nella cartella di origine del tuo progetto e fanne riferimento all'inizio del file index.php:

Passo 4

Questa libreria contiene una raccolta di funzioni che inviano a Google g-recaptcha-response (insieme alla nostra chiave segreta) tramite una richiesta HTTP. Quindi raccolgono la risposta, controllando se il CAPTCHA abbia avuto successo o meno. Per utilizzarlo, dobbiamo prima impostare un paio di variabili, prima del tag PHP di chiusura:

ReCaptcha() controlla se la nostra chiave segreta è presente. Se non c'è uccide il processo e ci avvisa di andare a procurarne una. Procediamo quindi verso i seguenti punti:

Passo 5

Se tutti i risultati sono corretti con l'invio del nostro modulo, la variabile $response ritornerà "success" e potremo continuare a elaborare i dati del modulo. Ecco come potrebbe sembrare: rimuovi il bit in cui abbiamo eseguito i loop su i dati del modello, quindi aggiungi il seguente controllo sopra il modulo: 

Infine, aggiungi un tag PHP di chiusura dopo il modulo:

Questo mostra il modulo, a meno che non sia stato inviato correttamente, in quel caso visualizza una piccola nota di ringraziamento. Ecco la demo finale.

Conclusioni

Questa è stata un'implementazione in PHP molto rudimentale e pronta del No CAPTCHA reCAPTCHA. È aperta a miglioramenti, ma speriamo di darti una comprensione delle basi. I crediti per la libreria vanno al team di sviluppatori di Google e devo anche dare un rapido ringraziamento a Matt Aussaguel per avermela indicata. 

Risorse utili

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.