7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Form Design

Ako integrovať "No CAPTCHA reCAPTCHA" na vašej webovej stránke

Scroll to top
Read Time: 5 mins

Slovak (Slovenčina) translation by Zoli Rosa (you can also view the original English article)

CAPTCHA je dosť možno tá najviac frustrujúca vec na internete. Je dosť otravná pre väčšinu užívateľov, ktorí sú nevidiaci alebo závislí na asistenčných technológiách ako napríklad čítačka obrazu pre prístup na web. Bohužiaľ, CAPTCHA je úplne funkčná v boji proti spamu.

A necessary evil thanks spammersA necessary evil thanks spammersA necessary evil thanks spammers
Nutné zlo (vďaka spameri)

Iróniou je, že hoci tradičné CAPTCHA s "rozostreným textom" sa ľuďom zle číta, moderné umelá inteligenciu s tým má menší problém. Google dokonca používa podobnú technológiu pre čítanie čísiel domov a značiek, pre potvrdenie miest na Google Street View.

Roboti Googlu vedia toto presne prečítať

Je teda logické, že vývojári z Googlu prišli zaťial s najlepším riešením CAPTCHA koncom roku 2014. No CAPTCHA reCAPTCHA nepotrebuje nič viac než pohnúť prstom, kliknúť myšou alebo stlačiť medzerník.

Vo väčšine prípadov je to takto jednoduché, ak si ale Google nie je istý, že ste človek, objaví sa druhá výzva.

Môžete to už vidieť všade na webe, napríklad na podacej stránke @materialup.

Získajte No CAPTCHA reCAPTCHA

Poďme teda priamo k veci a nastavme No CAPTCHA.

Krok 1

Najskôr potrebujeme kľúč API, takže choďte na https://www.google.com/recaptcha/admin. Pre získanie prístupu musíte byť prihlásený na Google účet. Budete vyzvaní k registrácii vašej webovej stránky, takže jej dajte vhodné meno, potom vypíšte zoznam domén (napr. Tutsplus.com) kde bude táto reCAPTCHA použitá. Subdomény (ako webdesign.tutsplus.com a code.tutsplus.com) sú započítané automaticky.

Krok 2

S týmto dostanete kľúč stránky a jeho tajný partnerský kľúč:

Krok 3

Pod kľúči uvidíte snippety pre obsiahnutie reCAPTCHA na vašej stránke. Prvá je JavaScript:

Môžete tiež definovať, ktorá zo 40 podporovaných jazyku používate, pridaním parametra do stringu: Tu pridáme es, čo nám nastaví španielskou reCAPTCHA:

Umiestnite tento script tag v zápätí vašej stránky (alebo pod formulár kde bude reCECAPTCHA, záleží na prioritách nahrávanie vašich zdrojov).

Krok 4

Ďalšia na rade je zástupný objekt, ktorý musíte pridať do formulára, kde chcete, aby sa reCAPTCHA objavila:

Poznámka: data-sitekey atribút bude držať hodnotu vášho kľúča, nie tento príklad.

Existujú iné atribúty, ktoré môžete pridať pre upravenie vzhľadu a funkcionality vašej reCAPTCHA. Napríklad pridaním data-theme = "dark" do tohto div získate tmavšie verziu, ktorá sa môže lepšie hodiť na vaše užívateľské prostredie:

Viac detailu o nastavení vašej reCAPTCHA nájdete na developers.google.com

Dáme to dohromady

Teraz máme počiatočné prísady a je na čase ich vložiť do pracovného prostredia.

Krok 1

Vložme náš script tag a zástupný objekt do jednoduchého formulára:

Tu sme použili holú stránku s formulárom obsahujúcim vloženie name a email a tlačidlo submit. Nie je tu žiadne štýlovanie, pretože v rámci tutoriale nie je potreba.

our captcha formour captcha formour captcha form
Teraz by ste mali mať niečo podobné tomuto

Pre overenie, že reCAPTCHA test prešiel, budeme musieť urobiť nejaké kontroly na serveri. V tomto prípade, to urobíme pomocou PHP, takže uložte tento súbor ako nový projekt index.php.

Krok 2

Všimnite si metódy post, takže keď sú dáta odoslaná budú vrátená na túto stránku vnútri poľa premenných. Môžeme ich vypísať pomocou slučky, takže pridajte nasledujúci niekam na svoju stránku:

Toto vezme každý pár kľúč / hodnota v našom $ _POST poli a vypíše ich s trochou formátovania. Teraz, keď odošlete formulár, mali by ste vidieť niečo ako je toto:

Uvidíte vrátenú hodnotu name a email, ale aj hodnotu g-reCAPTCHA-response. Ak ste neprešli CAPTCHA testom, táto hodnota bude prázdna, ak ste ale zaškrtli "Im not a robot" checkbox, uvodíte obrovský reťazec znakov.

A je to práve táto hodnota, ktorú musíme odoslať Googlu, aby mohla byť overená, takže to náš ďalší úloha.

Krok 3

Našťastie, vývojársky tím u Googlu urobil tú ťažkú prácu za nás, takže choďte na Github, projekt reCAPTCHA a stany si kópiu knižnice recaptchalip.php. Umiestnite ju do roote vášho projektu a referencujte ju navrchu vášho súboru index.php:

Krok 4

Knižnica obsahuje kolekciu funkcií, ktoré odosielajú g-reCAPTCHA-response (spolu s našim tajným kľúčom) do Googlu cez HTTP žiadosť. Zhromažďujú odozvy a kontrolujú či bola alebo nebola CAPTCHA úspešná. Aby sme túto funkciu použili, je potrebné najprv nastaviť niekoľko premenných pred uzavretím PHP tagu:

ReCaptcha () kontroluje, či je prítomný náš tajný kľúč. Ak nie, ukončí proces a odporučí nám ho získať. Následne uvádzame naše detaily:

Krok 5

Za predpokladu, že všetko je v našom odoslanom formulári, bude sa premenná $ response hlásiť späť s "úspechom" a môžeme pokračovať v spracovaní údajov o formulároch. Tu je návod, ako by to mohlo vyzerať: odstráňte kúsok, v ktorom sme prechádzali údaje formulára, a pridajte nasledujúci kontrolu nad formulár:

Nakoniec pridajte za formulár uzatvárací PHP tag:

Formulár sa zobrazí, pokiaľ nebol úspešne predložený, v takomto prípade sa zobrazí malé upozornenie. Tu je konečné demo.

Záver

Toto bolo veľmi hrubá a hotová PHP implementácia No CAPTCHA reCAPTCHA. Je široko otvorená pre vylepšenie, ale dúfam, že vám ukáže základné pojmy. Kredit za knižnicu ide do tímu vývojárov Google a tiež by som rád poďakoval Mattovi Aussaguelovi za to, že mi to ukázal.

Užitočné zdroje

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.