Share
Gli input CAPTCHA sono forse la più comune di tutte le frustranti esperienze sul web. Sono abbastanza dolorosi per la maggior parte degli utenti, per non parlare dei non vedenti o di chiunque faccia affidamento su tecnologie assistive come gli screen reader per accedere al web. Tuttavia, purtroppo, i CAPTCHA sono assolutamente vitali nella lotta allo spam.
Un male necessario (grazie spammer)Ironia della sorte, anche se i tradizionali CAPTCHA "testo distorto" sono scomodi da leggere per gli utenti umani, la moderna tecnologia di intelligenza artificiale ha meno problemi a risolverli. Google utilizza persino una tecnologia simile per leggere i numeri civici e i cartelli stradali per confermare le posizioni di Google Street View!
I robot di Google possono leggerli accuratamenteÈ logico quindi che gli sviluppatori di Google abbiano inventato la migliore soluzione CAPTCHA finora, verso la fine del 2014. Il no CAPTCHA reCAPTCHA non richiede altro che un semplice tocco, un clic del mouse o la messa a fuoco sull'ingresso con la tastiera e il colpire il barra spaziatrice.
Nella maggior parte dei casi è così semplice, ma se l'analisi dei rischi di Google continua a non essere sicuro di essere umano, verrà visualizzato un secondo prompt.
Puoi vederlo già in azione su tutto il Web, ad esempio sulla pagina di invio di @materialup.
Andiamo al sodo e mettiamoci a punto con No CAPTCHA.
Innanzitutto, abbiamo bisogno di una chiave API, quindi vai su https://www.google.com/recaptcha/admin. Per accedere a questa pagina devi accedere a un account Google. Ti verrà chiesto di registrare il tuo sito Web, quindi dargli un nome adatto, quindi elencare i domini (ad esempio tutsplus.com) in cui verrà utilizzato questo particolare reCAPTCHA. I sottodomini (come webdesign.tutsplus.com e code.tutsplus.com) vengono automaticamente presi in considerazione.
A tal fine ti verranno fornite una chiave del sito e la chiave segreta del partner:
Sotto le chiavi vedrai alcuni snippet per includere reCAPTCHA sul tuo sito web. Innanzitutto c'è il JavaScript:
Puoi anche definire quale delle 40 lingue supportate stai usando aggiungendo un parametro alla stringa. Qui stiamo aggiungendo es che ci darà una lingua spagnola reCAPTCHA:
Metti questo tag script ai piedi della tua pagina (o appena sotto il modulo in cui apparirà il reCAPTCHA, a seconda di come priorizzi il caricamento degli asset).
Il prossimo è il segnaposto che dovrai aggiungere al markup del modulo ovunque desideri che compaia reCAPTCHA:
Nota: il Dati-sitekey attributo conterrà il valore di il tuo chiave, non questo esempio fittizio.
Ci sono altri attributi che puoi aggiungere per personalizzare l'aspetto e la funzionalità del tuo reCAPTCHA a questo punto. Ad esempio, aggiungendo Dati-theme = "dark" a questo div ti darò una versione dark, che potrebbe adattarsi meglio alla tua interfaccia utente:
Per maggiori dettagli sulla configurazione del tuo reCAPTCHA dai un'occhiata a developers.google.com.
Ora abbiamo gli ingredienti iniziali è il momento di metterli in un ambiente di lavoro.
Mettiamo il nostro tag script e segnaposto in una forma semplice:
Come integrare Google "No CAPTCHA reCAPTCHA" sul tuo sito web
Qui abbiamo usato una struttura di pagina barebone con un modulo contenente a nome input, a e-mail input e un pulsante di invio. Non c'è stile qui perché non è davvero necessario per questo tutorial.
Dovresti avere qualcosa che assomigli a questoPer dimostrare che il test reCAPTCHA è stato superato, è necessario eseguire alcuni controlli sul lato server. In questo caso lo faremo con PHP, quindi salva questo file in un nuovo progetto come index.php.
Noterai che il metodo del modulo è inviare, quindi, quando inviamo i dati del modulo, questo verrà restituito a questa pagina all'interno di una serie di variabili. Siamo in grado di emettere tali variabili eseguendoci il looping, quindi aggiungi il seguente alla tua pagina da qualche parte:
$ valore) echo ''. $ Chiave '.: 'Valore di $.'
'; ?>
Questo prende ogni coppia chiave / valore presente nel nostro $ _POST array e li stampa con un po 'di formattazione. Ora quando invii il modulo dovresti vedere qualcosa di simile al seguente:
Vedrai il valore restituito per nome e e-mail, ma anche un valore per g-Recaptcha-risposta. Se non hai completato il test CAPTCHA questo valore sarà vuoto, ma se hai controllato la casella "I'm not a robot" vedrai una grande stringa di caratteri.
È questo il valore che dobbiamo inviare a Google in modo che possa essere verificato, quindi facciamolo dopo.
Fortunatamente, il team di sviluppatori di Google ha svolto il duro lavoro per noi qui, quindi vai al progetto ReCAPTCHA su Github e prendi una copia della libreria recaptchalib.php. Inseriscilo nella radice del tuo progetto e poi rimandalo nella parte superiore del tuo index.php file:
Questa libreria contiene una raccolta di funzioni che inviano il g-Recaptcha-risposta (insieme alla nostra chiave segreta) a Google tramite una richiesta HTTP. Quindi raccolgono la risposta, controllando se il CAPTCHA ha avuto o meno successo. Per utilizzare questo, dobbiamo prima impostare un paio di variabili, prima del tag PHP di chiusura:
// la tua chiave segreta $ secret = "6LcePAATAAAAABjXaTsy7gwcbnbaF5XgJKwjSNwT"; // empty response $ response = null; // controlla la chiave segreta $ reCaptcha = new ReCaptcha ($ secret);
ReCAPTCHA () controlla se la nostra chiave segreta è presente. Se no uccide il processo e ci consiglia di andare a prenderne uno. Quindi eseguiamo i nostri dettagli attraverso il seguente:
// se inviato verifica risposta ($ _POST ["g-recaptcha-response"]) $ response = $ reCaptcha-> verifyResponse ($ _SERVER ["REMOTE_ADDR"], $ _POST ["g-recaptcha-response"])) ;
Supponendo che tutto vada bene con il nostro modulo inviato, il $ risposta la variabile riporterà con "successo" e possiamo continuare a elaborare i dati del modulo. Ecco come potrebbe apparire: rimuovere il bit su cui abbiamo eseguito il looping dei dati del modulo, quindi aggiungere il seguente controllo sopra il modulo:
Accentsconagua
successo) echo "Ciao". $ _POST ["nome"]. "(". $ _POST ["email"]. "), Grazie per aver inviato il modulo!"; else ?>Infine, aggiungi un tag PHP di chiusura dopo il modulo:
Questo visualizza il modulo, a meno che non sia stato inviato correttamente, nel qual caso visualizza un piccolo avviso di ringraziamento.
Si trattava di un'implementazione PHP molto approssimativa e pronta del no CAPTCHA reCAPTCHA. È aperto a miglioramenti, ma si spera che vi fornisca una comprensione delle nozioni di base. Il credito per la biblioteca va al team di sviluppatori di Google e dovrei anche ringraziare Matt Aussaguel per avermelo fatto notare.
