Share
CAPTCHA-inputs zijn misschien wel de meest voorkomende frustrerende ervaringen op internet. Ze zijn pijnlijk genoeg voor de meerderheid van de gebruikers, laat staan voor slechtzienden of voor iedereen die vertrouwt op ondersteunende technologieën zoals schermlezers voor toegang tot internet. Helaas zijn CAPTCHA's echter absoluut noodzakelijk in de strijd tegen spam.
Een noodzakelijk kwaad (bedankt spammers)Ironisch genoeg, hoewel traditionele "vervormde tekst" CAPTCHA's lastig zijn voor menselijke gebruikers om te lezen, heeft moderne kunstmatige intelligentie technologie minder problemen om ze op te lossen. Google gebruikt zelfs vergelijkbare technologie om huisnummers en borden te lezen om Google Street View-locaties te bevestigen!
Google-robots kunnen deze nauwkeurig lezenLogisch dus dat de eigen ontwikkelaars van Google tot eind 2014 met de beste CAPTCHA-oplossing kwamen. De No CAPTCHA reCAPTCHA vereist niets anders dan een vingerbeweging, een muisklik of focussen op de invoer met je toetsenbord en slaan de spatiebalk.
In de meeste gevallen is het zo eenvoudig, maar als de risicoanalyse van Google nog steeds niet zeker kan zijn dat u een mens bent, verschijnt er een tweede prompt.
Je kunt het al op internet zien, bijvoorbeeld op de aanmeldingspagina van @materialup.
Laten we doorgaan met de achtervolging en onszelf instellen met No CAPTCHA.
Ten eerste hebben we een API-sleutel nodig, dus ga door naar https://www.google.com/recaptcha/admin. Om toegang tot deze pagina te krijgen, moet je ingelogd zijn op een Google-account. U wordt gevraagd om uw website te registreren, geef deze een geschikte naam en geef vervolgens een overzicht van domeinen (bijvoorbeeld tutsplus.com) waar deze bepaalde reCAPTCHA wordt gebruikt. Subdomeinen (zoals webdesign.tutsplus.com en code.tutsplus.com) worden automatisch in rekening gebracht.
Als dat klaar is, krijgt u een sitesleutel en de geheime sleutel van de partner:
Onder de toetsen ziet u enkele fragmenten voor het opnemen van reCAPTCHA op uw website. Als eerste is er JavaScript:
U kunt ook bepalen welke van de 40 ondersteunde talen u gebruikt door een parameter toe te voegen aan de tekenreeks. Hier voegen we toe es die ons een Spaanse taal reCAPTCHA zal geven:
Plaats deze scripttag aan de voet van uw pagina (of net onder het formulier waar de reCAPTCHA wordt weergegeven, afhankelijk van hoe u prioriteit geeft aan het laden van uw item).
De volgende is de tijdelijke aanduiding die u aan uw formuliermarkering moet toevoegen waar u de reCAPTCHA wilt laten verschijnen:
Notitie: de data-sitekey attribuut behoudt de waarde van jouw sleutel, niet dit dummy-voorbeeld.
Er zijn nog andere kenmerken die u kunt toevoegen om het uiterlijk en de functionaliteit van uw reCAPTCHA op dit punt aan te passen. Bijvoorbeeld toevoegen data-theme = "donkere" hieraan div geeft je een donkere versie, die beter bij je gebruikersinterface past:
Raadpleeg developers.google.com voor meer informatie over het configureren van uw reCAPTCHA.
Nu hebben we de eerste ingrediënten, het is tijd om ze in een werkomgeving te plaatsen.
Laten we onze scripttag en tijdelijke aanduiding in een eenvoudige vorm plaatsen:
Hoe Google "Geen CAPTCHA reCAPTCHA" op uw website te integreren
Hier hebben we een barebones-paginastructuur gebruikt met een formulier dat een bevat naam invoer, een e-mail invoer en een verzendknop. Er is helemaal geen styling hier omdat het niet echt nodig is voor deze tutorial.
Je zou iets moeten hebben dat er zo uitzietOm aan te tonen dat de reCAPTCHA-test is geslaagd, moeten we wat server-side-controles uitvoeren. In dit geval doen we dit met PHP, dus sla dit bestand in een nieuw project op als index.php.
Je zult zien dat de methode van het formulier is post, dus wanneer we de formuliergegevens indienen, wordt deze binnen een reeks variabelen naar deze pagina geretourneerd. We kunnen deze variabelen uitvoeren door ze te herhalen, dus voeg het volgende ergens toe aan uw pagina:
$ waarde) echo ''. $ Key '.: '$ Value.'
'; ?>
Dit neemt elk sleutel / waardepaar dat aanwezig is in onze $ _POST array en voert ze uit met een beetje opmaak. Wanneer u nu het formulier verzendt, ziet u ongeveer het volgende:
U ziet de waarde waarvoor wordt geretourneerd naam en e-mail, maar ook een waarde voor g recaptcha-respons. Als u de CAPTCHA-test niet hebt voltooid, is deze waarde leeg, maar als u het vakje "Ik ben geen robot" aanvinkt, ziet u een enorme reeks tekens.
Het is deze waarde die we naar Google moeten verzenden, zodat deze kan worden geverifieerd. Laten we dat vervolgens doen.
Gelukkig heeft het Google-ontwikkelteam hier het harde werk gedaan, dus ga naar het ReCAPTCHA-project op Github en pak een kopie van de bibliotheek recaptchalib.php. Plaats het in de hoofdmap van uw project en verwijs het vervolgens naar de bovenkant van uw index.php het dossier:
Deze bibliotheek bevat een verzameling functies die de g recaptcha-respons (samen met onze geheime sleutel) naar Google via een HTTP-verzoek. Vervolgens verzamelen ze het antwoord en controleren of de CAPTCHA al dan niet succesvol was. Om dit te gebruiken, moeten we eerst een aantal variabelen instellen, vóór de afsluitende PHP-tag:
// uw geheime sleutel $ secret = "6LcePAATAAAAABjXaTsy7gwcbnbaF5XgJKwjSNwT"; // lege reactie $ response = null; // check geheime sleutel $ reCaptcha = nieuwe ReCaptcha ($ secret);
ReCaptcha () controleert of onze geheime sleutel aanwezig is. Als dit niet gebeurt, wordt het proces gedood en wordt ons aangeraden er een te kopen. Vervolgens voeren we onze gegevens door het volgende:
// indien ingediend controleer reactie als ($ _POST ["g-recaptcha-respons"]) $ response = $ reCaptcha-> verifyResponse ($ _SERVER ["REMOTE_ADDR"], $ _POST ["g-recaptcha-response"]) ;
Ervan uitgaande dat alles goed gaat met ons ingediende formulier, de $ response variabele rapporteert terug met "succes" en we kunnen doorgaan met het verwerken van de formuliergegevens. Hier ziet u hoe dat eruit zou kunnen zien: verwijder het bit waar we de formuliergegevens doorlussen en voeg vervolgens de volgende controle toe boven het formulier:
Accentsconagua
succes) echo "Hallo". $ _POST ["naam"]. "(". $ _POST ["email"]. "), Bedankt voor het verzenden van het formulier!"; else ?>Voeg ten slotte een afsluitende PHP-tag toe na het formulier:
Dit geeft het formulier weer, tenzij het met succes is ingediend, in welk geval het een klein bedankje laat zien.
Dit was een zeer ruwe en klaargemaakte PHP-implementatie van de No CAPTCHA reCAPTCHA. Het staat open voor verbeteringen, maar zal je hopelijk een idee geven van de basis. Krediet voor de bibliotheek gaat naar het Google-ontwikkelaarsteam en ik wil Matt Aussaguel ook snel bedanken voor het aan mij wijzen.
