Hoe CAPTCHA's aan Android-apps toe te voegen

Als u een Android-toepassing ontwikkelt die moet communiceren met uw back-end-server, is het belangrijk dat u stappen onderneemt om deze te verdedigen tegen bots-geautomatiseerde scripts die proberen door te geven voor mensen. Anders heeft uw server een zeer reële kans om door hen te worden overrompeld.

CAPTCHAs, een afkorting voor Complete Automated Public Turing-tests voor het vertellen van computers en mensen apart, zijn momenteel de meest effectieve verdediging tegen bots. Zoals je misschien al weet, zijn dit meestal tests met beeld, stem of gezond verstand die gemakkelijk zijn voor mensen, maar extreem moeilijk voor computers.

In deze zelfstudie laat ik u zien hoe u de onlangs vrijgegeven SafetyNet reCAPTCHA API gebruikt om CAPTCHA's aan uw Android-apps toe te voegen.

voorwaarden

Als je deze zelfstudie wilt kunnen volgen, heb je het volgende nodig:

  • Android Studio 3.0 Canary 4 of hoger
  • een apparaat of emulator met Android 4.4 of hoger
  • Node.js 8.1.3 of hoger

1. Projectinstelling

Start Android Studio en maak een nieuw project met een lege activiteit. In de Configureer uw nieuwe project formulier, zorg ervoor dat u een zinvolle pakketnaam invoert - u zult het gebruiken tijdens het registreren van uw app met de reCAPTCHA-service.

Controleer bovendien de Neem Kotlin-ondersteuning op veld. Omdat Kotlin nu een officiële Android-taal is, zullen we het in plaats van Java in deze zelfstudie gebruiken.

SafetyNet-API's maken deel uit van Google Play-services. Om ze in uw project te kunnen gebruiken, voegt u het volgende toe implementatie afhankelijkheid van de build.gradle bestand van de app module:

implementatie 'com.google.android.gms: play-services-safetynet: 11.0.2'

Daarnaast zullen we voor het uitvoeren van netwerkgerelateerde bewerkingen de Fuel-bibliotheek gebruiken, die een zeer beknopte op Kotlin gebaseerde API heeft. Voeg het daarom toe als een ander implementatie afhankelijkheid.

implementatie 'com.github.kittinunf.fuel: brandstof-android: 1.8.0'

U kunt geen netwerkgerelateerde bewerkingen uitvoeren zonder de INTERNET toestemming, dus voeg de volgende regel toe aan het manifestbestand van uw project:

Druk ten slotte op Synchroniseer nu knop om de projectconfiguratie te voltooien.

2. ReCAPTCHA-sleutels verkrijgen

U hebt twee sleutels nodig voordat u de reCAPTCHA-service kunt gebruiken:

  • een sitesleutel die via uw Android-app aan de service moet worden doorgegeven
  • en een geheime sleutel die via uw back-end-server aan de service moet worden doorgegeven

Als u de sleutels wilt ophalen, gebruikt u uw Google-account en meldt u zich aan bij de reCAPTCHA-beheerdersconsole. Als u de console voor de eerste keer opent, krijgt u automatisch een kort registratieformulier waarop u de pakketnaam van uw app kunt typen..

Nadat je de reCAPTCHA-servicevoorwaarden hebt geaccepteerd, ga je gang en druk je op de Registreren om beide toetsen te genereren.

U kunt nu de sitesleutel toevoegen aan uw Android Studio-project door deze eenvoudig in de res / waarden / strings.xml het dossier:

ABCDEFGHIJKLMNOPQ1234567890

Tegen het einde van deze tutorial werken we met de geheime sleutel, dus noteer hem ergens nu veilig.

3. CAPTCHA's genereren

Wanneer we het woord CAPTCHA horen, denken we meestal aan rommelige afbeeldingen met moeilijk leesbare letters en cijfers. Dergelijke CAPTCHA's zijn echter dankzij de vooruitgang in computer vision-technologieën niet langer goed genoeg om alle bots te stoppen.

CAPTCHA's die door de reCAPTCHA-service worden gegenereerd, zijn zeer geavanceerd en ook erg interactief. In feite is het oplossen ervan vergelijkbaar met het spelen van eenvoudige spellen. Daarom kunt u ze niet rechtstreeks in de lay-out van uw activiteit insluiten. In plaats daarvan moet u een knop aan de lay-out toevoegen die, wanneer ingedrukt, de gebruiker naar een nieuw scherm of dialoogvenster met de CAPTCHA's moet leiden.

De volgende code laat zien hoe u een toevoegt Knop widget naar het XML-bestand van uw activiteit:

Voordat u CAPTCHA's gaat genereren, moet u een client voor de SafetyNet-API initialiseren. U kunt dit doen door de getClient () methode van de Vangnet klasse. Voeg daarom de volgende code toe binnen de onCreate () methode van uw Activiteit klasse:

val myClient: SafetyNetClient = SafetyNet.getClient (this)

De CAPTCHA's moeten worden weergegeven wanneer de gebruiker op de knop drukt, dus voeg een gebeurtenishandler op de click toe met behulp van de setOnClickListener () methode. In de handler hoeft u alleen het te bellen verifyWithRecaptcha () methode en geef uw sitesleutel door als argument om een ​​dialoogvenster met een CAPTCHA te openen.

De retourwaarde van de verifyWithRecaptcha () methode is een Taak voorwerp. Door er een on-succes gebeurtenishandler aan te koppelen, kunt u een RecaptchaTokenResponse object dat een token bevat dat u kunt gebruiken om aan te geven of de gebruiker de CAPTCHA heeft doorstaan ​​of niet. Hier is hoe:

are_you_human_button.setOnClickListener myClient .verifyWithRecaptcha (resources.getString (R.string.my_site_key)) .addOnSuccessListener successEvent -> val-token: String = successEvent.tokenResult // Meer code hier

4. Validatie van CAPTCHA-tokens

Het token dat u in de vorige stap hebt gekregen, moet opnieuw worden doorgegeven aan de reCAPTCHA-service om te controleren of de gebruiker slaagde of niet slaagde voor de test. Deze keer moet de oproep naar de reCAPTCHA-service echter worden gedaan vanaf uw back-end-server.

De server heeft het token natuurlijk niet, tenzij uw Android-app dit naar de server stuurt. Daarom moeten we nu code schrijven om tokens van de Android-app naar de server te verzenden.

Laten we voor nu aannemen dat onze server een eindpunt heeft genoemd bevestigen, die het token kan accepteren als een query-stringparameter. Ik zal gebruiken 10.0.2.2 als het IP-adres van de server en 8000 als zijn poort. Als u van plan bent de server op uw eigen computer uit te voeren en de app op een emulator op dezelfde computer draait, kunt u ook hetzelfde IP-adres gebruiken.

val serverURL: String = "http://10.0.2.2:8000/validate"

Je kunt nu de httpGet () methode aangeboden door de Brandstofbibliotheek om het token naar de server te verzenden. De methode verwacht een lijst met queryreeksparameters als het enige argument, dus ik raad aan om de parameter te gebruiken lijst van() utility-methode om een ​​lijst te maken die één item bevat: het token dat is toegewezen aan een queryparameter genaamd user_token.

Omdat het httpGet () methode werkt asynchroon, u moet de responseString () methode om de retourwaarde te verwerken. De volgende code laat zien hoe:

serverURL.httpGet (listOf ("user_token" to to)) .responseString request, response, result -> // Meer code hier

U kunt zien dat we nu toegang hebben tot een resultaat voorwerp. Als er geen fouten zijn, zal deze de reactie van onze server als een string bevatten.

Laten we aannemen dat onze server de tekenreeks "PASS" retourneert als de gebruiker slaagt voor de test en anders "FAIL". Wat u daadwerkelijk doet wanneer de gebruiker slaagt of de test niet doorstaat, is uiteraard aan u. Voor nu, stel ik voor dat je gewoon passend weergeeft Geroosterd brood berichten. De volgende code laat u zien hoe u dit zo bondig doet:

result.fold (data -> if (data.contains ("PASS")) Toast.makeText (baseContext, "U lijkt een mens te zijn.", Toast.LENGTH_LONG) .show () else Toast.makeText (baseContext, "U lijkt een bot te zijn!", Toast.LENGTH_LONG) .show (), error -> Log.d ("ERROR", "Fout bij verbinden met de server"))

Op dit moment is de app klaar. U kunt doorgaan en het implementeren op uw emulator of apparaat.

5. De server maken

We hebben in eerdere stappen veel aannames gedaan over onze webserver. Het is nu tijd om het te creëren en ervoor te zorgen dat het niet afwijkt van die aannames.

Een snelle en gemakkelijke manier om een ​​volledig functionele webserver te maken, is door het Node.js-platform en het Express.js-framework te gebruiken. Als u een nieuw Node.js-project wilt maken, maakt u een nieuwe map op uw computer en voert u de npm init commando erin.

mkdir my_web_server cd my_web_server; npm init -y

Om het Express-raamwerk aan het project toe te voegen, kunt u de npm installeren commando.

npm install --save express

Daarnaast hebben we het aanvraagpakket nodig om te communiceren met de reCAPTCHA-service. Installeer het daarom als een andere afhankelijkheid.

npm install - bewaar verzoek

U kunt nu uw favoriete codebewerker gebruiken om een ​​nieuw bestand aan te maken met de naam index.js en begin met het schrijven van alle vereiste server-side code.

Begin met het laden van beide uitdrukken en verzoek modules met behulp van de vereisen() functioneren en een nieuwe Express-toepassing maken door de uitdrukken() functie.

const express = vereisen ('express'); const request = require ('request'); const myApp = express ();

Onze Express-applicatie moet een eindpunt hebben bevestigen, die toegankelijk is via de HTTP GET-methode. Maak daarom een ​​nieuwe route hiervoor met behulp van de krijgen() methode:

myApp.get ('/ validate', function (req, resp) // Meer code hier);

Om het token te valideren dat door de Android-app is gegenereerd, moet u nu een POST-aanvraag indienen bij de reCAPTCHA-service. Het verzoek moet uw geheime sleutel en het token zelf bevatten. In de volgende code ziet u hoe u de hoofdtekst van het POST-verzoek opbouwt door het token uit de queryreeks te extraheren:

const postData = geheim: '1234567890-abcdefghijklmnopqr', antwoord: req.query.user_token;

Om het POST-verzoek daadwerkelijk te maken, kunt u bellen met post() methode van de verzoek module. Het antwoord is een kort JSON-document met de naam van een sleutel succes. Zoals je zou verwachten, is de waarde ervan waar alleen als de gebruiker de test met goed gevolg heeft afgelegd.

In de volgende code ziet u hoe u het JSON-document analyseert, extraheer de succes sleutel en genereer de antwoorden "PASS" en "FAIL" die onze Android-app nodig heeft:

request.post (url: 'https://www.google.com/recaptcha/api/siteverify', form: postData, function (error, response, body) jsonData = JSON.parse (body); // Ontleed het JSON-document als (jsonData.success) // Gebruiker slaagde voor de test resp.send ('PASS'); else // De gebruiker slaagde niet voor de test resp.send ('FAIL');) ;

Ten slotte moet u de luister() methode van het Express-toepassingsobject om te kunnen luisteren naar verbindingen.

myApp.listen (8000);

Op dit moment is onze webserver klaar. Om het te starten, keert u terug naar de terminal en voert u de volgende opdracht uit:

node index.js

Als u uw Android-app nu uitvoert, drukt u op de knop en lost u met succes een CAPTCHA op. U zou a moeten zien Geroosterd brood bericht dat je zegt dat je een mens bent.

Conclusie

U weet nu hoe u de SafetyNet reCAPTCHA API moet gebruiken om uw Android-app en back-end-infrastructuur te beveiligen tegen bots. U hoeft zich geen zorgen meer te maken over geautomatiseerde aanmeldingen, schermschrapers of bot-gegenereerde spam.

Voor meer informatie over de reCAPTCHA API, kunt u de officiële documentatie raadplegen.

Bekijk in de tussentijd enkele van onze andere geweldige berichten over de ontwikkeling van Android-apps!