Comment ajouter des CAPTCHAs aux applications Android

Si vous développez une application Android devant interagir avec votre serveur principal, il est important que vous preniez des mesures pour la défendre contre les scripts automatisés par des robots qui tentent de passer pour un humain. Sinon, votre serveur a une chance bien réelle d'être envahi par eux.

Les CAPTCHA, abréviations de tests de turing public entièrement automatisés pour différencier ordinateurs et humains, sont actuellement la défense la plus efficace contre les robots. Comme vous le savez peut-être déjà, il s’agit généralement de tests d’image, de tests de voix ou de tests basés sur le bon sens, faciles pour l’homme mais extrêmement difficiles pour l’ordinateur..

Dans ce tutoriel, je vais vous montrer comment utiliser la nouvelle API SafetyNet reCAPTCHA pour ajouter des CAPTCHA à vos applications Android..

Conditions préalables

Pour pouvoir suivre ce tutoriel, vous aurez besoin des éléments suivants:

  • Android Studio 3.0 Canary 4 ou supérieur
  • un appareil ou un émulateur fonctionnant sous Android 4.4 ou supérieur
  • Node.js 8.1.3 ou supérieur

1. Configuration du projet

Lancez Android Studio et créez un nouveau projet avec une activité vide. dans le Configurez votre nouveau projet forme, assurez-vous de taper un nom de paquet significatif - vous l'utiliserez lors de l'enregistrement de votre application avec le service reCAPTCHA.

En outre, vérifiez la Inclure le support Kotlin champ. Comme Kotlin est maintenant un langage Android officiel, nous l'utilisons à la place de Java dans ce tutoriel..

Les API SafetyNet font partie des services Google Play. Pour pouvoir les utiliser dans votre projet, ajoutez les éléments suivants la mise en oeuvre dépendance à la build.gradle fichier du app module:

mise en oeuvre 'com.google.android.gms: play-services-safetynet: 11.0.2'

De plus, pour effectuer des opérations liées au réseau, nous utiliserons la bibliothèque Fuel, qui possède une API très concise basée sur Kotlin. Par conséquent, ajoutez-le comme un autre la mise en oeuvre dépendance.

mise en oeuvre 'com.github.kittinunf.fuel: fuel-android: 1.8.0'

Vous ne pouvez pas effectuer d’opérations liées au réseau sans le L'INTERNET permission, ajoutez donc la ligne suivante au fichier manifeste de votre projet:

Enfin, appuyez sur le Synchroniser maintenant bouton pour terminer la configuration du projet.

2. Acquisition des clés reCAPTCHA

Vous aurez besoin de deux clés avant de pouvoir utiliser le service reCAPTCHA:

  • une clé de site, qui doit être transmise au service à partir de votre application Android
  • et une clé secrète, qui doit être transmise au service par votre serveur principal

Pour obtenir les clés, utilisez votre compte Google et connectez-vous à la console d'administration reCAPTCHA. Si vous ouvrez la console pour la première fois, vous recevrez automatiquement un court formulaire d'inscription dans lequel vous pourrez saisir le nom du package de votre application..

Après avoir accepté les conditions d'utilisation de reCAPTCHA, appuyez sur le bouton registre bouton pour générer les deux clés.

Vous pouvez maintenant ajouter la clé de site à votre projet Android Studio en le mentionnant simplement dans le res / values ​​/ strings.xml fichier:

ABCDEFGHIJKLMNOPQ1234567890

Nous n'utiliserons la clé secrète que vers la fin de ce didacticiel, alors notez-le dans un endroit sûr pour l'instant..

3. Génération de CAPTCHA

Lorsque nous entendons le mot CAPTCHA, nous pensons généralement à des images en désordre contenant des lettres et des chiffres difficiles à lire. Cependant, grâce aux progrès des technologies de vision par ordinateur, ces CAPTCHA ne suffisent plus pour arrêter tous les robots.

Les CAPTCHA générés par le service reCAPTCHA sont très avancés et très interactifs. En fait, les résoudre revient à jouer à des jeux simples. Par conséquent, vous ne pouvez pas les intégrer directement dans la présentation de votre activité. Au lieu de cela, vous devez ajouter un bouton à la mise en page, qui, lorsque vous appuyez dessus, devrait amener l'utilisateur vers un nouvel écran ou une nouvelle boîte de dialogue contenant les CAPTCHA..

Le code suivant vous montre comment ajouter un Bouton vers le fichier XML de présentation de votre activité:

Avant de commencer à générer des CAPTCHA, vous devez initialiser un client pour l’API SafetyNet. Vous pouvez le faire en appelant le getClient () méthode du Filet de sécurité classe. En conséquence, ajoutez le code suivant dans le répertoire onCreate () méthode de votre Activité classe:

val myClient: SafetyNetClient = SafetyNet.getClient (this)

Les CAPTCHA doivent être affichés lorsque l’utilisateur appuie sur le bouton. Vous devez donc lui ajouter un gestionnaire d’événements sur clic à l’aide de la touche setOnClickListener () méthode. Dans le gestionnaire, tout ce que vous avez à faire est d’appeler le verifyWithRecaptcha () méthode et passez votre clé de site comme argument pour ouvrir une boîte de dialogue contenant un CAPTCHA.

La valeur de retour de la verifyWithRecaptcha () la méthode est un Tâche objet. En y attachant un gestionnaire d’événements en cas de succès, vous pourrez acquérir un RecaptchaTokenResponse objet contenant un jeton que vous pouvez utiliser pour indiquer si l'utilisateur a réussi ou échoué le CAPTCHA. Voici comment:

are_you_human_button.setOnClickListener monClient .verifyWithRecaptcha (resources.getString (R.string.my_site_key)).

4. Validation des jetons CAPTCHA

Le jeton obtenu à l'étape précédente doit à nouveau être transmis au service reCAPTCHA pour vérifier si l'utilisateur a réussi ou échoué le test. Toutefois, cette fois, l’appel au service reCAPTCHA doit être effectué à partir de votre serveur principal..

Le serveur, bien sûr, n'aura pas le jeton à moins que votre application Android ne le lui envoie. Par conséquent, nous devons maintenant écrire du code pour envoyer des jetons de l'application Android au serveur.

Pour l'instant, supposons que notre serveur dispose d'un terminal appelé valider, qui peut accepter le jeton en tant que paramètre de chaîne de requête. Je vais utiliser 10.0.2.2 comme adresse IP du serveur et 8000 comme son port. Si vous avez l'intention d'exécuter le serveur sur votre propre ordinateur et l'application sur un émulateur s'exécutant sur le même ordinateur, vous pouvez également utiliser la même adresse IP..

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

Vous pouvez maintenant appeler le httpGet () Méthode proposée par la bibliothèque Fuel pour envoyer le jeton au serveur. La méthode attend une liste de paramètres de chaîne de requête comme seul argument. Je vous suggère donc d'utiliser le liste de() Méthode utilitaire pour créer une liste contenant un seul élément: le jeton affecté à un paramètre de requête nommé user_token.

Parce que le httpGet () méthode s'exécute de manière asynchrone, vous devez appeler le responseString () méthode afin de gérer sa valeur de retour. Le code suivant vous montre comment:

serverURL.httpGet (listOf ("user_token" à la marque)) .responseString requête, réponse, résultat -> // Plus de code ici

Vous pouvez voir que nous avons maintenant accès à un résultat objet. En l'absence d'erreur, il contiendra la réponse de notre serveur sous forme de chaîne.

Supposons que notre serveur retourne la chaîne "PASS" si l'utilisateur réussit le test et "FAIL" dans le cas contraire. Ce que vous faites réellement lorsque l’utilisateur réussit ou échoue le test, c’est bien sûr à vous. Pour le moment, je vous suggère simplement d’afficher Pain grillé messages. Le code suivant vous montre comment procéder de manière concise:

result.fold (data -> if (data.contains ("PASS"))) Toast.makeText (baseContext, "Vous semblez être un humain.", Toast.LENGTH_LONG) .show () sinon Toast.makeText (baseContext, "Vous semblez être un bot!", Toast.LENGTH_LONG) .show (), error -> Log.d ("ERROR", "Erreur de connexion au serveur"))

À ce stade, l'application est prête. Vous pouvez le déployer sur votre émulateur ou votre appareil..

5. Création du serveur

Nous avons fait beaucoup d’hypothèses sur notre serveur Web au cours des étapes précédentes. Il est maintenant temps de le créer, en s'assurant qu'il ne s'écarte pas de ces hypothèses.

Un moyen rapide et facile de créer un serveur Web entièrement fonctionnel consiste à utiliser la plate-forme Node.js et le framework Express.js. Pour créer un nouveau projet Node.js, créez un nouveau répertoire sur votre ordinateur et exécutez la commande npm init commande à l'intérieur.

mkdir mon_serveur_web cd mon_serveur_web; npm init -y

Pour ajouter la structure Express au projet, vous pouvez utiliser le npm installer commander.

npm install --save express

De plus, nous aurons besoin du paquet Request pour communiquer avec le service reCAPTCHA. Par conséquent, installez-le comme une autre dépendance.

npm install --save request

Vous pouvez maintenant utiliser votre éditeur de code favori pour créer un nouveau fichier appelé index.js et commencez à écrire tout le code requis côté serveur.

Commencez par charger les deux Express et demande modules utilisant le exiger() fonction et créer une nouvelle application Express en appelant le Express() une fonction.

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

Notre application Express doit avoir un noeud final appelé valider, accessible à l’aide de la méthode HTTP GET. Par conséquent, créez un nouvel itinéraire à l'aide de la obtenir() méthode:

myApp.get ('/ validate', function (req, resp) // Plus de code ici);

Pour valider le jeton généré par l'application Android, vous devez maintenant adresser une demande POST au service reCAPTCHA. La demande doit contenir votre clé secrète et le jeton lui-même. Le code suivant montre comment créer le corps de la demande POST en extrayant le jeton à partir de la chaîne de requête:

const postData = secret: '1234567890-abcdefghijklmnopqr', réponse: req.query.user_token;

Pour faire la demande POST, vous pouvez appeler le poster() méthode du demande module. Sa réponse est un court document JSON contenant une clé appelée Succès. Comme on pouvait s'y attendre, sa valeur est vrai seulement si l'utilisateur a réussi le test.

Le code suivant vous montre comment analyser le document JSON, extraire le Succès et générez les réponses "PASS" et "FAIL" requises par notre application Android:

request.post (url: 'https://www.google.com/recaptcha/api/siteverify', formulaire: postData, fonction (erreur, réponse, corps) jsonData = JSON.parse (body); // Analyser le document JSON if (jsonData.success) // L'utilisateur a réussi le test resp.send ('PASS'); else // L'utilisateur n'a pas réussi le test resp.send ('FAIL');) ;

Enfin, vous devez appeler le écouter () méthode de l'objet d'application Express pour lui permettre d'écouter les connexions.

myApp.listen (8000);

À ce stade, notre serveur Web est prêt. Pour le démarrer, retournez au terminal et exécutez la commande suivante:

noeud index.js

Si vous exécutez votre application Android maintenant, appuyez sur le bouton et résolvez avec succès un CAPTCHA, vous devriez voir un Pain grillé message vous disant que vous êtes humain.

Conclusion

Vous savez maintenant comment utiliser l'API SafetyNet reCAPTCHA pour sécuriser votre application Android et votre infrastructure dorsale contre les bots. Vous n'avez plus à vous soucier des inscriptions automatiques, des scrapers ou du spam généré par les robots.

Pour en savoir plus sur l’API reCAPTCHA, vous pouvez vous référer à la documentation officielle..

En attendant, découvrez quelques-uns de nos autres articles intéressants sur le développement d'applications Android.!