Cum să integrați Nu CAPTCHA reCAPTCHA în site-ul dvs.

Intrările CAPTCHA sunt probabil cele mai frecvente dintre toate experiențele frustrant de pe web. Sunt suficient de dureroase pentru majoritatea utilizatorilor, să nu mai vorbim de persoanele cu deficiențe de vedere sau cu oricine se bazează pe tehnologii de asistență, cum ar fi cititoare de ecran, pentru a accesa webul. Cu toate acestea, din păcate, CAPTCHA-urile sunt absolut vitale în lupta împotriva spamului.

Un rău necesar (mulțumiri spammerilor)

În mod ironic, chiar dacă CAPTCHA-urile tradiționale "denaturate" sunt incomode pentru cititorii umani, tehnologia modernă de inteligență artificială le rezolvă mai puțin. Google utilizează tehnologia similară pentru a citi numerele de case și drumurile pentru a confirma locațiile Google Street View!

Roboții Google le pot citi cu exactitate

Este logic, prin urmare, că dezvoltatorii proprii Google au venit cu cea mai bună soluție CAPTCHA până acum, spre sfârșitul anului 2014. ReCAPTCHA CAPTCHA nu necesită nimic mai mult decât atingerea cu degetul, clicul mouse-ului sau focalizarea pe intrare cu tastatura și lovirea SPATIU.

În majoritatea cazurilor este așa de simplu, dar dacă analiza de risc a Google încă nu poate fi sigură că sunteți umană, va apărea oa doua promptare.

Puteți vedea acest lucru în acțiune pe tot cuprinsul webului, ca de exemplu pe pagina de trimitere a @materialup, de exemplu.

Nu primiți CAPTCHA reCAPTCHA

Hai să ne tăiem la urmărire și să ne stabilim cu nr CAPTCHA.

Pasul 1

În primul rând, avem nevoie de o cheie API, așa că continuați cu https://www.google.com/recaptcha/admin. Pentru a avea acces la această pagină, trebuie să fiți conectat (ă) la un cont Google. Vi se va solicita să vă înregistrați site-ul web, deci dați-i un nume adecvat, apoi listați domeniile (de exemplu tutsplus.com) unde va fi utilizat acest reCAPTCHA special. Subdomenii (cum ar fi webdesign.tutsplus.com și code.tutsplus.com) sunt luate automat în considerare.

Pasul 2

Cu asta ați primit o cheie de site și cheia secretă a partenerului dvs.:

Pasul 3

Sub cheile veți vedea câteva fragmente pentru includerea reCAPTCHA pe site-ul dvs. web. În primul rând există JavaScript-ul:

De asemenea, puteți defini care dintre cele 40 de limbi acceptate utilizați adăugând un parametru în șir. Aici adăugăm es care ne va da o reCAPTCHA în limba spaniolă:

Plasați această etichetă de script la poalele paginii dvs. (sau chiar sub formularul în care va apărea reCAPTCHA, în funcție de modul în care prioritizați încărcarea de materiale).

Pasul 4

Următorul pas este substituentul care va trebui să adăugați la formularul de formular oriunde doriți să apară reCAPTCHA:

Notă: Date-sitekey atributul va păstra valoarea lui ta cheie, nu acest exemplu fals.

Există și alte atribute pe care le puteți adăuga pentru a particulariza aspectul și funcționalitatea reCAPTCHA în acest moment. De exemplu, adăugând date temă = „dark“ la acest div vă va oferi o versiune întunecată, care ar putea fi mai potrivită pentru interfața dvs. utilizator:

Pentru mai multe detalii despre configurarea reCAPTCHA, aruncați o privire la developers.google.com.

Punând laolaltă

Acum avem ingredientele inițiale care trebuie să le punem într-un mediu de lucru.

Pasul 1

Să punem eticheta scriptului și substituentul într-o formă simplă:

   Cum să integrați Google "Nu CAPTCHA reCAPTCHA" pe site-ul dvs. Web   


Aici am folosit o structura de pagini barebone cu un formular care contine a Nume intrare, an e-mail intrare și un buton de trimitere. Nu există niciun stil aici pentru că nu este cu adevărat necesar pentru acest tutorial.

Ar trebui să aveți ceva care arată așa

Pentru a demonstra că testul reCAPTCHA a fost trecut, va trebui să executați niște verificări de la server. În acest caz, vom face acest lucru cu PHP, deci salvați acest fișier într-un nou proiect ca index.php.

Pasul 2

Veți observa că metoda formei este post, astfel încât atunci când trimitem datele formularului, vom fi returnate acestei pagini într-o serie de variabile. Putem afișa aceste variabile prin looping peste ele, deci adăugați următoarele în pagina dvs. undeva:

  $ value) echo '

". cheie $ '.: '$ Valoare.'

„; ?>

Aceasta ia fiecare pereche cheie / valoare prezentă în lista noastră $ _POST array și le transmite cu un pic de formatare. Acum, când trimiteți formularul, ar trebui să vedeți ceva de genul:

Veți vedea valoarea returnată pentru Nume și e-mail, dar și o valoare pentru g-reCAPTCHA-răspuns. Dacă nu ați reușit să finalizați testul CAPTCHA, această valoare va fi goală, dar dacă ați bifat caseta "Nu sunt robot", veți vedea un șir de caractere uriașe.

Este o valoare pe care trebuie să o trimitem companiei Google pentru ca aceasta să poată fi verificată, deci hai să facem acest lucru în continuare.

Pasul 3

Din fericire, echipa de dezvoltatori Google a făcut munca grea pentru noi aici, deci mergeți la proiectul ReCAPTCHA pe Github și luați o copie a bibliotecii recaptchalib.php. Plasați-o în rădăcina proiectului dvs. și apoi trimiteți-o în partea de sus a paginii dvs. index.php fişier:

Pasul 4

Această bibliotecă conține o colecție de funcții care trimit g-reCAPTCHA-răspuns (împreună cu cheia noastră secretă) către Google printr-o solicitare HTTP. Apoi colectează răspunsul, verificând dacă CAPTCHA a reușit sau nu. Pentru a utiliza acest lucru trebuie să setăm mai întâi câteva variabile, înainte de închiderea etichetei PHP:

// cheia secretă $ secret = "6LcePAATAAAAABjXaTsy7gwcbnbaF5XgJKwjSNwT"; // răspunsul gol $ response = null; // verificați cheia secretă $ reCaptcha = noua ReCaptcha ($ secret);

ReCaptcha () verifică dacă cheia secretă este prezentă. Dacă nu omoară procesul și ne sfătuiește să mergem și să luăm una. Apoi ne conducem detaliile prin următoarele:

// dacă răspunsul la verificare a fost trimis dacă ($ _POST ["g-recaptcha-response"]) $ response = $ reCaptcha-> verifyResponse ($ _SERVER ["REMOTE_ADDR" ; 

Pasul 5

Presupunând că totul este bine în forma noastră trimisă, răspuns $ variabila va raporta cu "succes" și putem continua să procesăm datele formularului. Iată cum ar putea arăta acest lucru: eliminați bitul în care am dat buclă peste datele formularului, apoi adăugați următoarea verificare deasupra formularului:

 succes) echo "Hi". $ _POST ["nume"]. "(". $ _POST ["e-mail"].)), Vă mulțumim că ați trimis formularul! ";  altfel ?>

În final, adăugați o etichetă PHP de închidere după formular:

Aceasta afișează formularul, cu excepția cazului în care a fost trimis cu succes, caz în care acesta afișează o mică notă de mulțumire.

Concluzie

Aceasta a fost o implementare foarte grea și gata de implementare a programului PHP CAPTCHA reCAPTCHA. Este larg deschis pentru îmbunătățiri, dar, sperăm, vă va da o înțelegere a principiilor de bază. Creditul pentru bibliotecă merge la echipa de dezvoltatori Google și ar trebui, de asemenea, să-i mulțumesc rapid lui Matt Aussaguel pentru că mi-a arătat-o.

Resurse utile

  • ReCAPTCHA 1.0.0 pe Github
  • Documentația ReCAPTCHA
  • Ești un robot? Introducerea Blogului de securitate Google "Nu CAPTCHA reCAPTCHA"
  • WordPress ReCaptcha Integrare plugin reCaptcha pentru autentificare, înscriere, formulare de comentarii, formularele ninja și formularul de contact 7