Share
CAPTCHA-ingångar är kanske de vanligaste av alla frustrerande upplevelser på webben. De är smärtsamma nog för majoriteten av användarna, än mindre de synskadade eller någon som är beroende av hjälpteknik som skärmsläsare för att komma åt webben. Men tyvärr är CAPTCHAs absolut nödvändiga i kampen mot spam.
En nödvändig ondska (tack spammare)Ironiskt nog, även om traditionella "förvrängda text" CAPTCHAer är besvärliga för mänskliga användare att läsa, har modern teknik för artificiell intelligens mindre problem att lösa dem. Google brukar använda liknande teknik för att läsa husnummer och vägmärken för att bekräfta Google Street View-platser!
Google-robotar kan noggrant läsa dessaDet är bara logiskt därför att Googles egna utvecklare hittills uppnådde den bästa CAPTCHA-lösningen hittills i slutet av 2014. No CAPTCHA reCAPTCHA kräver bara mer än en fingertopp, ett musklick eller fokuserar på inmatningen med ditt tangentbord och slår de mellanslagstangenten.
I de flesta fall är det så enkelt, men om Googles riskanalys fortfarande inte kan vara säker på att du är mänsklig, kommer en andra prompt att visas.
Du kan se den i aktion över hela webben redan, som på inläggssidan för @materialup till exempel.
Låt oss skära till jakten och få oss att konfigurera med No CAPTCHA.
Först behöver vi en API-nyckel, så gå vidare till https://www.google.com/recaptcha/admin. För att få tillgång till den här sidan måste du vara inloggad på ett Google-konto. Du kommer att bli ombedd att registrera din webbplats, så ge den ett lämpligt namn, och ange domäner (till exempel tutsplus.com) där den här reCAPTCHA ska användas. Underdomäner (till exempel webdesign.tutsplus.com och code.tutsplus.com) tas automatiskt med i beräkningen.
Med det gjort får du en webbplatsnyckel och dess hemliga nyckel nyckel:
Under nycklarna ser du några utdrag för att inkludera reCAPTCHA på din webbplats. Först där uppe är JavaScript:
Du kan också definiera vilket av de 40 stödda språken du använder genom att lägga till en parameter i strängen. Här lägger vi till es vilket kommer att ge oss ett spanskt språk reCAPTCHA:
Placera den här skripttaggen vid foten av din sida (eller precis under formuläret där reCAPTCHA kommer att visas, beroende på hur du prioriterar din laddning av tillgång).
Nästa upp är platshållaren som du måste lägga till i din formulärmarkering var du än vill att reCAPTCHA ska visas:
Notera: data SiteKey attributet håller värdet på din nyckel, inte detta exempel på dummy.
Det finns andra attribut som du kan lägga till för att anpassa utseendet och funktionaliteten för din reCAPTCHA vid denna tidpunkt. Till exempel lägger till uppgifter-theme = "mörka" till detta div kommer att ge dig en mörk version, vilket kanske passar ditt användargränssnitt:
För mer information om hur du konfigurerar din reCAPTCHA, ta en titt på developers.google.com.
Nu har vi de ursprungliga ingredienserna är det dags att sätta dem i en arbetsmiljö.
Låt oss placera vår skriptmärke och platshållare i en enkel form:
Hur man integrerar Google "No CAPTCHA reCAPTCHA" på din webbplats
Här har vi använt en barebones sidstruktur med ett formulär som innehåller en namn inmatning, an e-post inmatning och en inlämningsknapp. Det finns ingen styling alls här eftersom det inte är verkligen nödvändigt för denna handledning.
Du borde ha något som ser ut så härFör att visa att reCAPTCHA-testet har passerat måste vi köra några kontroller på serverns sida. I så fall gör vi det med PHP, så spara den här filen i ett nytt projekt som index.php.
Du kommer märka att formulärets metod är posta, så när vi skickar formuläruppgifterna kommer den att returneras till den här sidan inom en rad variabler. Vi kan mata ut dessa variabler genom att loopa över dem, så lägg till följande på din sida någonstans:
$ värde) echo ''. $ Key '.: '$ Värde.'
'; ?>
Detta tar varje nyckel / värdepar som finns i vår $ _POST array och matar ut dem med lite formatering. Nu när du skickar formuläret ska du se något som följande:
Du får se värdet returnerat för namn och e-post, men också ett värde för g-recaptcha-respons. Om du misslyckades med att slutföra CAPTCHA-testet kommer detta värde att vara tomt, men om du kollade rutan "Jag är inte en robot" ser du en stor mängd tecken.
Det är detta värde vi behöver skicka till Google så att det kan verifieras, så låt oss göra det nästa.
Lyckligtvis har Googles utvecklarteam gjort det hårda arbetet för oss här, så fortsätt vidare till ReCAPTCHA-projektet på Github och ta en kopia av recaptchalib.php-biblioteket. Placera den i roten till ditt projekt och hänvisa sedan den till toppen av din index.php fil:
Detta bibliotek innehåller en samling funktioner som skickar g-recaptcha-respons (tillsammans med vår hemliga nyckel) till Google via en HTTP-begäran. De samlar sedan in svaret och kontrollerar om CAPTCHA lyckades. För att kunna använda detta måste vi först konfigurera ett par variabler innan den slutgiltiga PHP-taggen:
// din hemliga nyckel $ secret = "6LcePAATAAAAABJXaTsy7gwcbnbaF5XgJKwjSNwT"; // tom svar $ response = null; // kolla hemlig nyckel $ reCaptcha = ny ReCaptcha ($ hemlig);
ReCAPTCHA () kontrollerar för att se om vår hemliga nyckel är närvarande. Om inte det dödar processen och råder oss att gå och få en. Vi kör sedan våra uppgifter genom följande:
// om inlämnat kontrollrespons om ($ _POST ["g-recaptcha-response"]) $ response = $ reCaptcha-> verifyResponse ($ _SERVER ["REMOTE_ADDR"], $ _POST ["g-recaptcha-svar"]) ;
Antag att allt är bra med vår inlämnade formulär, den $ svar variabel kommer att rapportera tillbaka med "framgång" och vi kan fortsätta bearbeta formulärdata. Så här kan det se ut: Ta bort biten där vi loopade över formulärdata och lägg till följande kontroll ovanför formuläret:
Accentsconagua
framgång) echo "Hi". $ _POST ["namn"]. "(". $ _POST ["email"]. "), Tack för att du skickade formuläret!"; annars ?>Slutligen lägg till en avslutande PHP-tagg efter formuläret:
Detta visar formuläret, om inte det har skickats in, i vilket fall det visar ett litet tackmeddelande.
Detta var en väldigt grov och klar PHP-implementering av No CAPTCHA reCAPTCHA. Den är öppen för förbättringar, men kommer förhoppningsvis att ge dig grepp om grunderna. Kredit för biblioteket går till Googles utvecklarteam och jag bör också tacka Matt Aussaguel snabbt för att peka ut det till mig.
