Ajouter 2FA à une application Android avec Nexmo et Firebase Login
Temps de lecture : 7 minutes
L'étude de cas Firebase Auth Quickstart fournit un excellent tutoriel sur la façon d'ajouter l'authentification à votre application, mais sans l'authentification à deux facteurs (2FA), c'est un peu peu insécurisé ! Ajouter une couche supplémentaire de sécurité à votre application est simple en utilisant le SDK Nexmo Verify. Commençons !
Commencez par cloner le repo GitHub dans votre Terminal. Le repo original est en constante évolution, vous pouvez donc cloner la branche de départ du tutoriel à partir d'un repo forké de nexmo-community.
To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.
This tutorial also uses a virtual phone number. To purchase one, go to Numbers > Buy Numbers and search for one that meets your needs.
Connectez-vous à Firebase avec votre Account Google et allez dans la console. Créez un nouveau projet en lui donnant un nom et en mettant à jour le pays dans lequel vous résidez. Une fois créé, cliquez sur l'option "Add Firebase to your Android app". Saisissez le nom de votre package (par défaut pour l'application de démonstration : com.google.firebase.quickstart.auth) et le certificat de signature de débogage certificat de signature de débogage SHA-1. Ne tenez pas compte du fichier 'google-services.json' qui est téléchargé car vous devrez télécharger une nouvelle version une fois que nous aurons ajouté les méthodes de connexion OAuth à l'application. Vous n'avez pas besoin d'éditer les fichiers build.gradle, car cela a déjà été fait pour vous dans le projet d'exemple.
L'application d'exemple est livrée avec les méthodes de connexion suivantes : Connexion par email/mot de passe, connexion anonyme et connexion OAuth. Les deux fournisseurs OAuth (Google et Twitter) doivent être configurés et la clé/secret de l'API Twitter Sign In doit être saisie dans le fichier "ids.xml". Si vous n'arrivez pas à trouver ce fichier, recherchez-le à l'aide de l'outil de recherche situé dans le coin supérieur droit d'Android Studio. Une fois les méthodes d'authentification configurées, accédez aux paramètres de votre projet et téléchargez le fichier 'google-services.json' et ajoutez-le au dossier de l'application dans la vue Projet.
Email et Login anonyme : Activez les deux méthodes dans la section Authentification de la console Firebase.
Google : Google Sign In devrait être configuré pour votre application Android après avoir ajouté le certificat de signature SHA-1 de débogage dans la console Firebase. Activez la méthode Google OAuth dans la section Authentification de la console.
Twitter : Dans la console Firebase, activez Twitter pour l'authentification. Ensuite, créez une nouvelle application dans le Twitter Developer Portal. Copiez l'URL de rappel (disponible dans la section Authentification Twitter de la console Firebase) et entrez-la dans le champ correspondant pour terminer la création de l'application Twitter. Enfin, rendez-vous dans les paramètres de l'application Twitter et cliquez sur " Gérer les clés et les jetons d'accès ". Copiez la clé du consommateur (API Key) et le secret du consommateur (API Secret) dans la console Firebase et dans "ids.xml".
Dans Android Studio, choisissez l'option d'ouvrir un projet existant. Naviguez jusqu'à l'endroit où le repo a été cloné et sélectionnez "auth" situé dans le dossier "quickstart-android". Vous devrez mettre à jour le SDK Android à la version 25, les outils de construction à la version 25.0.0, et également mettre à jour la version du JDK à 1.8 car vous aurez besoin de ces mises à jour pour compiler avec succès les fichiers gradle. Une fois le projet chargé dans Android Studio, installez toutes les dépendances manquantes et synchronisez le projet pour éliminer les erreurs. Créez un AVD qui utilise l'API 24 pour exécuter correctement l'application à la fin du tutoriel. Enfin, mettez à jour les services Google Play de votre projet sous Outils > Android > SDK Manager > SDK Tools à la version 38.
Après avoir créé un Account NexmoAprès avoir créé un compte Nexmo, vous serez redirigé vers le tableau de bord Nexmo. Cliquez sur l'onglet "Verify" et sous "SDK", cliquez sur le lien "Vos applications". Créez une nouvelle application (avec le temps d'inactivité maximum réglé sur Instant) et notez l'ID de l'application et le secret partagé. Le temps d'inactivité maximum est un paramètre qui dicte la durée pendant laquelle l'utilisateur restera vérifié.
Ajoutez les identifiants Nexmo (ainsi que l'OAuth si vous ne l'avez pas fait dans l'étape précédente) à 'ids.xml'.
Ajoutez la ligne de code suivante à votre fichier Build.gradle au niveau de l'application pour intégrer le SDK Nexmo Verify dans votre application en tant que dépendance. Synchronisez le fichier gradle pour résoudre les dépendances manquantes.
compile 'com.nexmo:verify:4.0.0'
Créez une nouvelle classe dans votre projet appelée "TwoFactorApplication.java" et insérez le code suivant dans le fichier. Vous créez ici le client Nexmo et lui fournissez les valeurs que vous avez stockées dans "ids.xml" précédemment.
package com.google.firebase.quickstart.auth;
import android.app.Application;
import android.content.Context;
Import android.util.Log;
import com.nexmo.sdk.NexmoClient;
import com.nexmo.sdk.core.client.ClientBuilderException;
import com.nexmo.sdk.verify.client.VerifyClient;
public class TwoFactorApplication extends Application {
private VerifyClient verifyClient;
private NexmoClient nexmoClient;
private boolean verified;
private static final String TAG = “TWOFACTORAPPLICATION”;
public VerifyClient getVerifyClient(boolean verifiedValue) {
verified = verifiedValue;
return this.verifyClient;
}
@Override
public void onCreate() {
super.onCreate();
acquireVerifyClient();
}
public void acquireVerifyClient() {
Context context = getApplicationContext();
try {
this.nexmoClient = new NexmoClient.NexmoClientBuilder()
.context(context)
.applicationId(getResources().getString(R.string.nexmo_application_id))
.sharedSecretKey(getResources().getString(R.string.nexmo_shared_secret))
.build();
} catch (ClientBuilderException e) {
e.printStackTrace();
Log.d(TAG, e.toString());
return;
}
this.verifyClient = new VerifyClient(nexmoClient);
}
}Dans le fichier "AndroidManifest.xml", ajoutez les autorisations nécessaires pour le SDK Verify et le nom de l'application à la balise application :
<application
android:name="com.google.firebase.quickstart.auth.TwoFactorApplication"
Déclarez les variables suivantes dans l'activité de base :
application (de type : TwoFactorApplication)
Verify (de type : boolean)
Dans une méthode "onCreate()", lancez le contexte d'application retourné en appelant "this.getApplication() ;". Cela renvoie l'application propriétaire de l'activité (TwoFactorApplication). Ensuite, nous créons une méthode appelée "addVerificationListener" pour agir en tant qu'auditeur afin de poursuivre le flux de travail de l'application lors d'une vérification 2FA réussie. Dans cette méthode, nous récupérons le VerifyClient fourni par la bibliothèque Nexmo et nous ajoutons la méthode addVerifyListener().
//Import Statements
import java.io.IOException;
import com.nexmo.sdk.verify.client.VerifyClient;
import com.nexmo.sdk.verify.event.UserObject;
import com.nexmo.sdk.verify.event.VerifyClientListener;
import com.nexmo.sdk.verify.event.VerifyError;
Import android.os.Bundle;
//Declaration
public TwoFactorApplication twoFactorApp;
protected boolean verified;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
twoFactorApp = (TwoFactorApplication) this.getApplication();
}
protected void addVerificationListener() {
twoFactorApp.getVerifyClient(verified).addVerifyListener(new VerifyClientListener() {
@Override
public void onVerifyInProgress(VerifyClient verifyClient, UserObject user) {
}
@Override
public void onUserVerified(VerifyClient verifyClient, UserObject user) {
verified = true;
}
@Override
public void onError(VerifyClient verifyClient, VerifyError errorCode, UserObject user) {
}
@Override
public void onException(IOException exception) {
}
});
}
Déplacer l'appel à la méthode "signIn()" de la fonction onClick vers la méthode "onStart()" si la valeur de "verified" est égale à true. Au lieu de cela, lorsque l'utilisateur clique sur le bouton de connexion, l'interface utilisateur gérée par Verify SDK est lancée et la méthode "addVerificationListener()" est appelée. Enfin, modifiez la valeur de "verified" à false lorsque l'activité est arrêtée afin de vous assurer que l'utilisateur doit se connecter à chaque fois.
@Override
public void onStart() {
super.onStart();
if (verified == true) {
signIn();
}
mAuth.addAuthStateListener(mAuthListener);
}
@Override
public void onStop() {
super.onStop();
verified = false;
mAuth.signOut();
if (mAuthListener != null) {
mAuth.removeAuthStateListener(mAuthListener);
}
}
@Override
public void onClick(View v) {
if (i == R.id.sign_in_button) {
twoFactorApp.getVerifyClient(verified).getVerifiedUserFromDefaultManagedUI();
addVerificationListener();
} else if (i == R.id.sign_out_button) {
signOut();
} else if (i == R.id.disconnect_button) {
revokeAccess();
}
}
Comme à la dernière étape, déplacez l'appel à la méthode de connexion de la fonction onClick à la méthode "onStart()". Lancez plutôt l'interface utilisateur gérée par le SDK Verify et appelez la méthode "verificationCallback()" lorsque l'utilisateur clique sur le bouton de connexion. Une fois encore, remplacez "verified" par false dans la méthode "onStop()".
@Override
public void onStart() {
super.onStart();
if (verified == true) {
signIn(mEmailField.getText().toString(), mPasswordField.getText().toString());
}
mAuth.addAuthStateListener(mAuthListener);
}
@Override
public void onStop() {
super.onStop();
verified = false;
mAuth.signOut();
if (mAuthListener != null) {
mAuth.removeAuthStateListener(mAuthListener);
}
}
@Override
public void onClick(View v) {
if (i == R.id.sign_in_button) {
twoFactorApp.getVerifyClient(verified).getVerifiedUserFromDefaultManagedUI();
addVerificationListener();
} else if (i == R.id.sign_out_button) {
signOut();
} else if (i == R.id.disconnect_button) {
revokeAccess();
}
}
private void signOut() {
mAuth.signOut();
verified = false;
updateUI(null);
}
Là encore, nous déplaçons l'appel à la méthode d'ouverture de session de "onClick" vers la méthode "onStart()", qui sera appelée si l'utilisateur a été vérifié. Lorsque l'utilisateur appuie sur le bouton d'ouverture de session, l'interface utilisateur gérée par Verify est déclenchée et la méthode "addVerificationListener()" est appelée lorsque l'utilisateur clique sur le bouton d'ouverture de session.
@Override
public void onStart() {
super.onStart();
mAuth.addAuthStateListener(mAuthListener);
if (verified) {
signInAnonymously();
}
}
@Override
public void onStop() {
super.onStop();
mAuth.signOut();
verified = false;
if (mAuthListener != null) {
mAuth.removeAuthStateListener(mAuthListener);
}
}
private void signOut() {
mAuth.signOut();
verified = false;
updateUI(null);
}
@Override
public void onClick(View v) {
int i = v.getId();
if (i == R.id.button_anonymous_sign_in) {
twoFactorApp.getVerifyClient(verified).getVerifiedUserFromDefaultManagedUI();
addVerificationListener();
} else if (i == R.id.button_anonymous_sign_out) {
signOut();
} else if (i == R.id.button_link_account) {
linkAccount();
}
}
Le flux de connexion pour la TwitterLoginActivity est un peu plus délicat que les activités de connexion précédentes. Le bouton de connexion Twitter initialise la séquence de connexion OAuth de Twitter. Ici, vous permettez à un utilisateur de poursuivre le flux de connexion après avoir fourni le code PIN correct (onUserVerified).
@Override
public void onStart() {
super.onStart();
mAuth.addAuthStateListener(mAuthListener);
if(!verified) {
twoFactorApp.getVerifyClient(verified).getVerifiedUserFromDefaultManagedUI();
addVerificationListener();
}
}
@Override
public void onStop() {
super.onStop();
verified = false;
mAuth.signOut();
if (mAuthListener != null) {
mAuth.removeAuthStateListener(mAuthListener);
}
}
private void signOut() {
mAuth.signOut();
verified = false;
Twitter.logOut();
updateUI(null);
}
mLoginButton.setCallback(new Callback() {
@Override
public void success(Result result) {
Log.d(TAG, "twitterLogin:success" + result);
verified = true;
handleTwitterSession(result.data);
}
@Override
public void failure(TwitterException exception) {
Log.w(TAG, "twitterLogin:failure", exception);
updateUI(null);
}
});Désormais, tous les fournisseurs OAuth ainsi que les méthodes de connexion par email/mot de passe et anonyme ont un flux qui garantit que l'utilisateur complète le deuxième facteur d'authentification pour accéder au compte. La version 2FA de ce tutoriel est disponible dans la branche branche 'final' du repo.
Le SDK Verify vous permet d'allouer plus de temps au développement de votre application en fournissant une solution d'interface utilisateur gérée qui vous permet de faire des demandes de vérification en toute sécurité et en toute simplicité. J'aimerais que vous me fassiez part de vos questions ou de vos réflexions. Tweetez-moi https://twitter.com/sidsharma_27 ou m'envoyer directement.