Maintenant que nous avons intégré Firebase à notre application Android, nous allons lui créer un système d'authentification complet, avec la possibilité pour nos utilisateurs de s'identifier par email, par Google et même par Facebook !
Comme nous l'avons vu ensemble dans le premier chapitre, la plateforme mobile Firebase se manipule presque exclusivement à travers des applications endpoints (Android, iOS ou Web), via des SDK fournis par Firebase. Dans notre cas, nous devrions normalement utiliser et installer le SDK Firebase Authentication afin de créer notre premier système d'authentification.
Qu'attendons-nous ? C'est parti !
Cette dernière, comme nous le verrons, nous permettra de réaliser très rapidement et simplement des fonctionnalités avancées sur Firebase, notamment en nous facilitant son intégration sur des éléments graphiques propres à Android.
Installez la librairie FirebaseUI
dependencies {
...
// FIREBASE UI
implementation 'com.firebaseui:firebase-ui-auth:6.4.0'
}Pour commencer, ajoutez à votre fichier Gradle la dépendance de Firebase-UI et son module "auth". Synchronisez ensuite votre projet afin de l'installer.
Une fois cela réalisé, nous allons passer aux choses sérieuses et implémenter notre écran d'authentification.
Le but est de permettre à l'utilisateur de s'authentifier en cliquant sur le bouton "Connexion" de l'écran d'accueil. Puis, un second écran apparaîtra, et proposera différentes méthodes d'authentification :
par email,
par Google,
et par Facebook.
Dans ce chapitre, nous commencerons par implémenter l'authentification par email afin de s'approprier tranquillement cette librairie.
Ajoutez une authentification par email
Dans un premier temps, vous allez devoir activer ce moyen d'authentification via l'interface web de Firebase.
Rendez vous sur le tableau de bord de votre projet et sélectionnez le menu "Authentication":
Cliquez ensuite sur "Commencer"
Vous aurez une liste de fournisseurs de connexion que vous pouvez activer.
Cliquez sur le crayon afin d'activer l'authentification par email/mot de passe :
Une fois cela réalisé, revenez à votre application Android et modifiez l'activité d'accueil MainActivity afin de lancer une activité de connexion/inscription quand l'utilisateur appuiera sur le bouton "Connexion".
Extrait de MainActivity.java :
public class MainActivity extends BaseActivity<ActivityMainBinding> {
private static final int RC_SIGN_IN = 123;
...
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setupListeners();
}
private void setupListeners(){
// Login Button
binding.loginButton.setOnClickListener(view -> {
startSignInActivity();
});
}
private void startSignInActivity(){
// Choose authentication providers
List<AuthUI.IdpConfig> providers =
Collections.singletonList(new AuthUI.IdpConfig.EmailBuilder().build());
// Launch the activity
startActivityForResult(
AuthUI.getInstance()
.createSignInIntentBuilder()
.setTheme(R.style.LoginTheme)
.setAvailableProviders(providers)
.setIsSmartLockEnabled(false, true)
.setLogo(R.drawable.ic_logo_auth)
.build(),
RC_SIGN_IN);
}
}Explications :
La méthodesetupListeners() va nous permettre de décrire nos différents events, notamment le clic sur le bouton "Connexion".
Au clic sur ce bouton, nous allons exécuter la méthodestartSignInActivity(). Cette dernière lancera une activité de connexion/inscription auto-générée par la librairie Firebase-UI !
Eh oui, la librairie Firebase-UI nous simplifie la vie en créant à notre place une activité de connexion (createSignInIntentBuilder() ), à laquelle nous pouvons ajouter un ou plusieurs moyens d'authentification (setAvailableProviders() ).
Ici nous avons ajouté la méthode d'authentification par email grâce à AuthUI.IdpConfig.EmailBuilder().build().
C'est aussi rapide que cela avec Firebase-UI !
Pour finir, afin de personnaliser le thème visuel de l'écran d'inscription auto-générée, Firebase-UI vous propose de définir un style via la méthode setTheme() . Dans notre cas, nous avons renseigné un style que nous avons créé dans le fichier styles.xml. N'hésitez pas à vous en inspirer et à le modifier selon vos goûts et envies.
Extrait de res/values/styles.xml :
<resources>
...
<!-- STYLE SIGN-IN ACTIVITY -->
<style name="LoginTheme" parent="AppTheme">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="colorButtonNormal">@color/colorAccent</item>
<item name="colorControlNormal">@android:color/darker_gray</item>
<item name="colorControlActivated">@android:color/darker_gray</item>
<item name="colorControlHighlight">@android:color/darker_gray</item>
<item name="android:textColor">@android:color/white</item>
<item name="android:textColorPrimary">@android:color/darker_gray</item>
<item name="android:textColorSecondary">@android:color/darker_gray</item>
<item name="android:windowBackground">@android:color/white</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:textColorHint">@android:color/darker_gray</item>
</style>
</resources>Lancez maintenant votre application et essayez de vous inscrire avec une adresse email.
Une fois inscrit, vous devriez apercevoir le compte de l'utilisateur fraîchement créé depuis l'interface web de Firebase.
Toujours depuis le menu "Authentication", sélectionnez l'onglet "Users":
Gérez les retours d'authentification
Maintenant, il serait intéressant de pouvoir gérer un minimum de retours sur ce qu'il se passe sur l'écran de connexion/inscription auto-généré par FirebaseUI. En effet, comment savoir depuis MainActivity si l'authentification a réussi, échoué ou si celle-ci a été annulée par l'utilisateur ?
Eh bien grâce à la méthode startActivityForResult(), permettant de lancer une activité et de récupérer le résultat qu'elle produit (dans notre cas, l'activité auto-générée par FirebaseUI). Cette dernière activité retourne des valeurs, indiquant notamment si l'authentification s'est correctement déroulée !
Nous allons maintenant implémenter cela dans notre code et afficher une Snackbar indiquant à l'utilisateur le résultat de son inscription.
Extrait de MainActivity.java :
public class MainActivity extends BaseActivity {
...
@Override
protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
super.onActivityResult(requestCode, resultCode, data);
this.handleResponseAfterSignIn(requestCode, resultCode, data);
}
...
// Show Snack Bar with a message
private void showSnackBar( String message){
Snackbar.make(binding.mainLayout, message, Snackbar.LENGTH_SHORT).show();
}
// Method that handles response after SignIn Activity close
private void handleResponseAfterSignIn(int requestCode, int resultCode, Intent data){
IdpResponse response = IdpResponse.fromResultIntent(data);
if (requestCode == RC_SIGN_IN) {
// SUCCESS
if (resultCode == RESULT_OK) {
userManager.createUser();
showSnackBar(getString(R.string.connection_succeed));
} else {
// ERRORS
if (response == null) {
showSnackBar(getString(R.string.error_authentication_canceled));
} else if (response.getError()!= null) {
if(response.getError().getErrorCode() == ErrorCodes.NO_NETWORK){
showSnackBar(getString(R.string.error_no_internet));
} else if (response.getError().getErrorCode() == ErrorCodes.UNKNOWN_ERROR) {
showSnackBar(getString(R.string.error_unknown_error));
}
}
}
}
}
}Explications : Nous avons créé une méthode handleResponseAfterSignIn permettant de récupérer plus facilement le résultat renvoyé par l'activité de connexion/inscription auto-générée par FirebaseUI.
Et voilà ! Lancez votre application et testez cette nouvelle configuration en créant un nouveau compte et en annulant la création d'un compte.
Maintenant que nous gérons correctement les retours issus de l'authentification depuis MainActivity, nous allons pouvoir améliorer notre système d'authentification dès le prochain chapitre.
En résumé
Firebase Auth vous permet d'ajouter plusieurs outils d'authentification au sein de votre application.
FirebaseUI vous permet d'implémenter facilement un écran de connexion.
