Come aggiungere CAPTCHA alle app Android

Se stai sviluppando un'applicazione Android che deve interagire con il tuo server back-end, è importante che tu prenda misure per difenderlo da script automatizzati per i bot che cercano di passare per umani. Altrimenti, il tuo server ha una reale possibilità di essere sopraffatto da loro.

I CAPTCHA, abbreviazione di test di Automated Turing completamente automatizzati per comunicare a Computers and Humans Apart, sono attualmente la difesa più efficace contro i bot. Come forse già saprai, sono solitamente test basati su immagini, voce o senso comune che sono facili per l'uomo, ma estremamente difficili per i computer.

In questo tutorial, ti mostrerò come utilizzare l'API reCAPTCHA SafetyNet appena rilasciata per aggiungere CAPTCHA alle tue app Android.

Prerequisiti

Per poter seguire questo tutorial, avrai bisogno di quanto segue:

  • Android Studio 3.0 Canary 4 o versione successiva
  • un dispositivo o emulatore con Android 4.4 o versioni successive
  • Node.js 8.1.3 o versione successiva

1. Impostazione del progetto

Avvia Android Studio e crea un nuovo progetto con un'attività vuota. Nel Configura il tuo nuovo progetto form, assicurati di digitare un nome significativo per il pacchetto: lo utilizzerai mentre registri la tua app con il servizio reCAPTCHA.

Inoltre, controlla il Includi supporto Kotlin campo. Perché Kotlin è ora un linguaggio ufficiale di Android, lo useremo invece di Java in questo tutorial.

Le API SafetyNet fanno parte dei servizi di Google Play. Per poterli utilizzare nel progetto, aggiungere quanto segue implementazione dipendenza dal build.gradle file del App modulo:

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

Inoltre, per eseguire operazioni relative alla rete, utilizzeremo la libreria Fuel, che ha un'API Kotlin molto concisa. Pertanto, aggiungilo come un altro implementazione dipendenza.

implementazione 'com.github.kittinunf.fuel: fuel-android: 1.8.0'

Non è possibile eseguire operazioni relative alla rete senza il INTERNET permesso, quindi aggiungi la seguente riga al file manifest del tuo progetto:

Infine, premi il Sincronizza ora pulsante per completare la configurazione del progetto.

2. Acquisizione di chiavi reCAPTCHA

Avrai bisogno di due chiavi prima di poter utilizzare il servizio reCAPTCHA:

  • una chiave del sito, che deve essere passata al servizio dalla tua app Android
  • e una chiave segreta, che deve essere passata al servizio dal tuo server back-end

Per ottenere le chiavi, utilizza il tuo account Google e accedi alla console di amministrazione reCAPTCHA. Se apri la console per la prima volta, ti verrà automaticamente presentato un breve modulo di registrazione in cui puoi digitare il nome del pacchetto della tua app.

Dopo aver accettato i termini di servizio di reCAPTCHA, andare avanti e premere il tasto Registrare pulsante per generare entrambi i tasti.

Ora puoi aggiungere la chiave del sito al tuo progetto Android Studio semplicemente menzionandolo all'interno del res / valori / strings.xml file:

ABCDEFGHIJKLMNOPQ1234567890

Lavoreremo con la chiave segreta solo verso la fine di questo tutorial, quindi annotalo in un posto sicuro al momento.

3. Generazione di CAPTCHA

Quando ascoltiamo la parola CAPTCHA, solitamente pensiamo a immagini disordinate contenenti lettere e numeri difficili da leggere. Tali CAPTCHA, tuttavia, grazie ai progressi delle tecnologie di visione artificiale, non sono più sufficienti per fermare tutti i robot.

I CAPTCHA generati dal servizio reCAPTCHA sono molto avanzati e molto interattivi. In realtà, risolverli è come giocare a semplici giochi. Di conseguenza, non puoi incorporarli direttamente nel layout della tua attività. Invece, è necessario aggiungere un pulsante al layout, che, se premuto, dovrebbe portare l'utente a una nuova schermata o finestra di dialogo contenente i CAPTCHA.

Il codice seguente mostra come aggiungere un Pulsante widget per il file XML di layout della tua attività:

Prima di iniziare a generare CAPTCHA, sarà necessario inizializzare un client per l'API SafetyNet. Puoi farlo chiamando il getClient () metodo del Rete di sicurezza classe. Di conseguenza, aggiungi il seguente codice all'interno di onCreate () metodo del tuo Attività classe:

val myClient: SafetyNetClient = SafetyNet.getClient (this)

I CAPTCHA devono essere visualizzati quando l'utente preme il pulsante, quindi aggiungere un gestore eventi on-click ad esso utilizzando il setOnClickListener () metodo. All'interno del gestore, tutto ciò che devi fare è chiamare il verifyWithRecaptcha () metodo e passare la chiave del sito come argomento per aprire una finestra di dialogo contenente un CAPTCHA.

Il valore di ritorno del verifyWithRecaptcha () il metodo è a Compito oggetto. Associando un gestore di eventi in fase di successo ad esso, sarete in grado di acquisire un RecaptchaTokenResponse oggetto contenente un token che puoi usare per dire se l'utente ha superato o fallito il CAPTCHA. Ecco come:

are_you_human_button.setOnClickListener myClient .verifyWithRecaptcha (resources.getString (R.string.my_site_key)) .addOnSuccessListener successEvent -> val token: String = successE.tokenResult // Altro codice qui

4. Convalida dei token CAPTCHA

Il token che hai ottenuto nel passaggio precedente deve essere nuovamente passato al servizio reCAPTCHA per verificare se l'utente ha superato o meno il test. Tuttavia, questa volta, la chiamata al servizio reCAPTCHA deve essere effettuata dal server back-end.

Il server, ovviamente, non avrà il token a meno che non venga inviato dall'app Android. Pertanto, ora dobbiamo scrivere il codice per inviare token dall'app Android al server.

Per ora, supponiamo che il nostro server abbia un endpoint chiamato convalidare, che può accettare il token come parametro della stringa di query. Userò 10.0.2.2 come indirizzo IP del server e 8000 come il suo porto. Se intendi eseguire il server sul tuo computer e l'app su un emulatore in esecuzione sullo stesso computer, puoi utilizzare lo stesso indirizzo IP anche tu.

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

Ora puoi chiamare il HttpGet () metodo offerto dalla libreria Carburante per inviare il token al server. Il metodo prevede che un elenco di parametri della stringa di query sia l'unico argomento, quindi ti suggerisco di utilizzare lista di() metodo di utilità per creare un elenco contenente un singolo elemento: il token assegnato a un parametro di query denominato user_token.

Perché il HttpGet () metodo viene eseguito in modo asincrono, è necessario chiamare il responseString () metodo per gestire il suo valore di ritorno. Il seguente codice mostra come:

serverURL.httpGet (listOf ("user_token" to token)) .responseString richiesta, risposta, risultato -> // altro codice qui

Puoi vedere che ora abbiamo accesso a a risultato oggetto. In caso di errori, conterrà la risposta del nostro server come una stringa.

Supponiamo che il nostro server restituisca la stringa "PASS" se l'utente supera il test e "FAIL" in caso contrario. Quello che fai quando l'utente passa o fallisce il test è, naturalmente, a te. Per ora, ti suggerisco di mostrare semplicemente appropriato Crostini messaggi. Il seguente codice mostra come farlo in modo conciso:

result.fold (data -> if (data.contains ("PASS")) Toast.makeText (baseContext, "Sembri essere un umano.", Toast.LENGTH_LONG) .show () else Toast.makeText (baseContext, "Sembra che tu sia un bot!", Toast.LENGTH_LONG) .show (), error -> Log.d ("ERROR", "Errore di connessione al server"))

A questo punto, l'app è pronta. Puoi andare avanti e distribuirlo sul tuo emulatore o dispositivo.

5. Creazione del server

Abbiamo fatto molte ipotesi sul nostro server web nei passaggi precedenti. È giunto il momento di crearlo, assicurandosi che non si discosti da questi presupposti.

Un modo rapido e semplice per creare un server web completamente funzionale consiste nell'utilizzare la piattaforma Node.js e il framework Express.js. Per creare un nuovo progetto Node.js, crea una nuova directory sul tuo computer ed esegui il npm init comando al suo interno.

mkdir my_web_server cd my_web_server; npm init -y

Per aggiungere il framework Express al progetto, è possibile utilizzare il installazione di npm comando.

installazione npm --save express

Inoltre, avremo bisogno del pacchetto di richiesta per comunicare con il servizio reCAPTCHA. Pertanto, installalo come un'altra dipendenza.

installazione di npm - richiesta di salvataggio

Ora puoi utilizzare il tuo editor di codice preferito per creare un nuovo file chiamato index.js e inizia a scrivere tutto il codice lato server richiesto.

Inizia caricando entrambi i esprimere e richiesta moduli che utilizzano il richiedere() funzione e creazione di una nuova applicazione Express chiamando il esprimere() funzione.

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

La nostra applicazione Express deve avere un endpoint chiamato convalidare, a cui è possibile accedere utilizzando il metodo HTTP GET. Pertanto, creare una nuova rotta usando il ottenere() metodo:

myApp.get ('/ validate', function (req, resp) // Altro codice qui);

Per convalidare il token generato dall'app Android, è necessario effettuare una richiesta POST al servizio reCAPTCHA. La richiesta deve contenere la chiave segreta e il token stesso. Il seguente codice mostra come costruire il corpo della richiesta POST estraendo il token dalla stringa di query:

const postData = secret: '1234567890-abcdefghijklmnopqr', risposta: req.query.user_token;

Per effettuare effettivamente la richiesta POST, puoi chiamare il inviare() metodo del richiesta modulo. La sua risposta è un breve documento JSON contenente una chiave chiamata successo. Come puoi immaginare, il suo valore è vero solo se l'utente ha superato il test.

Il seguente codice mostra come analizzare il documento JSON, estrarre il file successo chiave e genera le risposte "PASS" e "FAIL" richieste dall'app per Android:

request.post (url: 'https://www.google.com/recaptcha/api/siteverify', modulo: postData, funzione (errore, risposta, corpo) jsonData = JSON.parse (corpo); // Analizzare il documento JSON se (jsonData.success) // L'utente ha superato il test resp.send ('PASS'); else // L'utente non ha superato il test resp.send ('FAIL');) ;

Infine, devi chiamare il ascolta() metodo dell'oggetto dell'applicazione Express per consentirgli di ascoltare le connessioni.

myApp.listen (8000);

A questo punto il nostro server web è pronto. Per avviarlo, torna al terminale ed esegui il seguente comando:

nodo index.js

Se esegui la tua app Android ora, premi il pulsante e, con successo, risolvi un CAPTCHA, dovresti vedere a Crostini messaggio che ti dice che sei umano.

Conclusione

Ora sai come utilizzare l'API reCAPTCHA di SafetyNet per proteggere la tua app Android e l'infrastruttura di back-end dai bot. Non devi più preoccuparti di registrazioni automatiche, screen scrapers o spam generati da bot.

Per ulteriori informazioni sull'API reCAPTCHA, puoi fare riferimento alla documentazione ufficiale.

Nel frattempo, controlla alcuni dei nostri altri fantastici post sullo sviluppo di app per Android!