Share
CAPTCHA-innganger er kanskje den vanligste av alle frustrerende opplevelser på nettet. De er smertefulle nok til flertallet av brukere, ikke minst synshandicappede eller alle som er avhengige av hjelpende teknologier som skjermlesere for å få tilgang til nettet. Men dessverre er CAPTCHAer helt avgjørende i kampen mot spam.
Et nødvendig onde (takkspammere)Ironisk nok, selv om tradisjonelle "forvrengt tekst" CAPTCHAer er vanskelig for menneskelige brukere å lese, har moderne kunstig intelligens teknologi mindre problemer med å løse dem. Google bruker til og med lignende teknologi til å lese husnummer og veibeskrivelser for å bekrefte Google Street View-steder!
Google-roboter kan nøyaktig lese disseDet er bare logisk derfor at Googles egne utviklere oppnådde den beste CAPTCHA-løsningen så langt, mot slutten av 2014. No CAPTCHA reCAPTCHA krever noe mer enn en fingerpinne, et museklikk eller fokus på inngangen med tastaturet og treffer de mellomromstasten.
I de fleste tilfeller er det så enkelt, men hvis Googles risikanalyse fortsatt ikke kan være sikker på at du er menneskelig, vil det oppstå en annen ledetekst.
Du kan se det i aksjon over hele nettet allerede, som for eksempel på innleveringssiden til @materialup.
La oss kutte til jakten og få oss til å sette opp med No CAPTCHA.
Først trenger vi en API-nøkkel, så gå videre til https://www.google.com/recaptcha/admin. For å få tilgang til denne siden må du være logget inn på en Google-konto. Du vil bli bedt om å registrere ditt nettsted, så gi det et passende navn, og velg deretter domener (for eksempel tutsplus.com) der denne spesielle reCAPTCHA vil bli brukt. Underdomener (for eksempel webdesign.tutsplus.com og code.tutsplus.com) tas automatisk i betraktning.
Med det gjort vil du bli gitt en nettside nøkkel og sin partner hemmelige nøkkel:
Under nøklene ser du noen utdrag for å inkludere reCAPTCHA på nettstedet ditt. Først oppe der er JavaScript:
Du kan også definere hvilket av de 40 støttede språkene du bruker ved å legge til en parameter i strengen. Her legger vi til es som vil gi oss et spansk språk reCAPTCHA:
Plasser denne skriptetiketten ved foten av siden din (eller bare under skjemaet der reCAPTCHA vil vises, avhengig av hvordan du prioriterer at aktivet lastes inn).
Neste opp er plassholderen som du må legge til i skjemaet ditt hvor du vil at reCAPTCHA skal vises:
Merk: data-sitekey attributtet vil holde verdien av din nøkkel, ikke dette dummy eksempelet.
Det er andre attributter som du kan legge til for å tilpasse utseendet og funksjonaliteten til reCAPTCHA på dette tidspunktet. For eksempel legger du til data-tema = "mørke" til dette div vil gi deg en mørk versjon, som kanskje bedre passer til brukergrensesnittet ditt:
For flere detaljer om konfigurering av reCAPTCHA, ta en titt på developers.google.com.
Nå har vi de første ingrediensene, det er på tide å sette dem i et arbeidsmiljø.
La oss sette skriptet og plassholderen i en enkel form:
Slik integrerer du Google "Ingen CAPTCHA reCAPTCHA" på nettstedet ditt
Her har vi brukt en barebones sidestruktur med et skjema som inneholder a Navn input, an e-post Inndata og Send-knappen. Det er ingen styling overhodet her fordi det ikke er virkelig nødvendig for denne opplæringen.
Du bør ha noe som ser slik utFor å demonstrere at reCAPTCHA-testen er bestått, må vi kjøre noen server-side sjekker. I så fall gjør vi det med PHP, så lagre denne filen i et nytt prosjekt som index.php.
Du vil legge merke til at skjemaets metode er post, så når vi sender skjemeldataene, vil det bli returnert til denne siden innenfor en rekke variabler. Vi kan skrive ut disse variablene ved å løse over dem, så legg til følgende på siden din et sted:
$ verdi) echo ''. $ Key '.: '. $ Verdi.
'; ?>
Dette tar hvert nøkkel / verdi par til stede i vår $ _POST array og outputs dem med litt formatering. Nå når du sender inn skjemaet, bør du se noe som følger:
Du får se verdien returnert til Navn og e-post, men også en verdi for g-recaptcha-respons. Hvis du ikke klarte å fullføre CAPTCHA-testen, vil denne verdien være tom, men hvis du sjekket "Jeg er ikke en robot" -boks vil du se en stor streng med tegn.
Det er denne verdien vi må sende til Google, slik at den kan bekreftes, så la oss gjøre det neste.
Heldigvis har Googles utviklerteam gjort det harde arbeidet for oss her, så gå videre til ReCAPTCHA-prosjektet på Github og ta en kopi av biblioteket recaptchalib.php. Plasser den i roten til prosjektet ditt og referer det til øverst på ditt index.php fil:
Dette biblioteket inneholder en samling funksjoner som sender g-recaptcha-respons (sammen med vår hemmelige nøkkel) til Google via en HTTP-forespørsel. De samler deretter svaret og kontrollerer om CAPTCHA var vellykket. For å bruke dette må vi først sette opp et par variabler, før den avsluttende PHP-taggen:
// din hemmelige nøkkel $ secret = "6LcePAATAAAAABjXaTsy7gwcbnbaF5XgJKwjSNwT"; // tom svar $ respons = null; // sjekk hemmelig nøkkel $ reCaptcha = ny ReCaptcha ($ hemmelig);
ReCAPTCHA () sjekker for å se om vår hemmelige nøkkel er til stede. Hvis ikke, dreper det prosessen og anbefaler oss å gå og få en. Vi kjører deretter våre detaljer gjennom følgende:
// hvis innsendt kontrollrespons hvis ($ _POST ["g-recaptcha-respons"]) $ response = $ reCaptcha-> verifyResponse ($ _SERVER ["REMOTE_ADDR"], $ _POST ["g-recaptcha-respons"]) ;
Forutsatt at alt er bra med vårt innleverte skjema, er $ svar variabel vil rapportere tilbake med "suksess" og vi kan fortsette å behandle skjemadataene. Slik ser det ut: Fjern biten der vi slenget over skjemadataene, og legg deretter til følgende sjekk over skjemaet:
Accentsconagua
suksess) echo "Hei". $ _POST ["navn"]. "(". $ _POST ["email"]. "), Takk for at du sendte skjemaet!"; annet ?>Til slutt legger du til en avsluttende PHP-tag etter skjemaet:
Dette viser skjemaet, med mindre det har blitt sendt inn, i så fall viser det en liten takknemlighet.
Dette var en veldig grov og klar PHP-implementering av No CAPTCHA reCAPTCHA. Den er åpen for forbedringer, men vil forhåpentligvis gi deg en forståelse av det grunnleggende. Kreditt for biblioteket går til Googles utviklerteam, og jeg bør også gi en rask takk til Matt Aussaguel for å peke ut det til meg.
