Cette page a été traduite par l'API Cloud Translation.

Connexion Android avec FirebaseUI

Cet atelier de programmation fait partie du cours Développement Android avancé en Kotlin. Vous tirerez pleinement parti de ce cours en suivant les ateliers de programmation dans l'ordre, mais ce n'est pas obligatoire. Tous les ateliers de programmation du cours sont listés sur la page de destination des ateliers de programmation Android avancé en Kotlin.

Introduction

Lorsque vous créez une application Android, vous pouvez bénéficier de nombreux avantages en permettant à vos utilisateurs de se connecter. En permettant aux utilisateurs de créer une identité dans votre application, vous pouvez leur offrir plus de façons d'interagir avec elle.

Grâce aux comptes personnalisés, les utilisateurs peuvent personnaliser leur expérience dans l'application, interagir avec d'autres utilisateurs, et conserver et transférer leurs données s'ils utilisent l'application sur un autre appareil (comme le Web ou un nouveau téléphone).

Dans cet atelier de programmation, vous allez apprendre les bases de la prise en charge de la connexion à votre application à l'aide de la bibliothèque FirebaseUI. Entre autres, la bibliothèque FirebaseUI permet aux développeurs de créer facilement un flux de connexion et gère les comptes utilisateur pour vous.

Ce que vous devez déjà savoir

Principes de base de la création d'une application Android
LiveData et ViewModel

Points abordés

Ajouter Firebase à votre projet
Gérer la connexion à votre application Android
Observer l'état d'authentification actuel de votre application
Déconnecter des utilisateurs

Objectifs de l'atelier

Utilisez la console Firebase pour intégrer Firebase à votre application.
Implémentez la fonctionnalité de connexion.
Ajoutez des personnalisations dans l'application pour les utilisateurs connectés.
Implémentez la déconnexion des utilisateurs.

En savoir plus sur LiveData et ViewModel

Pour l'application de cet atelier de programmation, vous devez avoir une compréhension de base de LiveData et ViewModel. Consultez les présentations de LiveData et ViewModel si vous souhaitez obtenir un bref aperçu de ces concepts.

Vous pouvez également suivre le cours "Développer des applications Android avec Kotlin" pour en savoir plus sur les concepts Android fondamentaux que vous rencontrerez dans cet atelier de programmation. Ce cours est disponible sous forme de cours Udacity et de atelier de programmation.

Dans cet atelier de programmation, vous allez créer une application qui affiche des faits amusants sur Android. Plus important encore, l'application disposera d'un bouton Login/Logout (Connexion/Déconnexion). Lorsque l'utilisateur est connecté à l'application, tout fait Android affiché inclut une salutation pour l'utilisateur afin d'ajouter une touche de personnalisation.

Pour télécharger l'application exemple, vous pouvez :

Télécharger le fichier ZIP

Vous pouvez également cloner le dépôt GitHub à partir de la ligne de commande à l'aide de la commande suivante, puis passer à la branche start du dépôt :

$  git clone https://github.com/googlecodelabs/android-kotlin-login

Important : Étant donné que vous allez intégrer l'application pour utiliser Firebase, l'application de démarrage nécessite une certaine configuration pour pouvoir être compilée et exécutée. Vous le ferez à l'étape suivante de l'atelier de programmation.

Étape 1 : Créez un projet Firebase

Avant de pouvoir ajouter Firebase à votre application Android, vous devez créer un projet Firebase pour vous connecter à votre application Android.

Dans la console Firebase, cliquez sur Ajouter un projet.
Sélectionnez ou saisissez un nom de projet. Vous pouvez nommer votre projet comme vous le souhaitez, mais essayez de choisir un nom pertinent pour l'application que vous créez.
Cliquez sur Continuer.
Vous pouvez ignorer la configuration de Google Analytics et sélectionner l'option Pas maintenant.
Cliquez sur Créer un projet pour terminer la configuration du projet Firebase.

Étape 2 : Enregistrez votre application auprès de Firebase

Maintenant que vous avez créé un projet Firebase, vous pouvez y ajouter votre application Android.

Au centre de la page de présentation du projet de la console Firebase, cliquez sur l'icône Android pour lancer le workflow de configuration.
Saisissez l'ID d'application de votre application dans le champ Nom du package Android. Assurez-vous de saisir l'ID utilisé par votre application, car vous ne pourrez pas ajouter ni modifier cette valeur une fois que vous aurez enregistré votre application dans votre projet Firebase.

Un ID d'application est parfois appelé nom de package.
Recherchez cet ID d'application dans le fichier Gradle de votre module (au niveau de l'application), généralement app/build.gradle (exemple d'ID : com.yourcompany.yourproject).
Saisissez le certificat de signature de débogage SHA-1. Vous pouvez générer cette clé en saisissant la commande suivante dans le terminal de ligne de commande.

keytool -alias androiddebugkey -keystore ~/.android/debug.keystore -list -v -storepass android

Cliquez sur Enregistrer l'application.

Étape 3 : Ajoutez le fichier de configuration Firebase à votre projet

Ajoutez le fichier de configuration Firebase Android à votre application :

Cliquez sur Télécharger google-services.json pour obtenir votre fichier de configuration Firebase Android (google-services.json).

Vous pouvez télécharger à nouveau votre fichier de configuration Firebase pour Android à tout moment.
Assurez-vous que le fichier de configuration ne comporte pas de caractères supplémentaires et qu'il s'appelle uniquement google-services.json.

Déplacez votre fichier de configuration dans le répertoire du module (au niveau de l'application) de votre application.

Étape 4 : Configurez votre projet Android pour activer les produits Firebase

Pour activer les produits Firebase dans votre application, ajoutez le plug-in google-services à vos fichiers Gradle.

Dans le fichier Gradle au niveau du projet (build.gradle), ajoutez des règles pour inclure le plug-in des services Google. Vérifiez également que vous disposez du dépôt Maven de Google.

build.gradle

buildscript {

  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
  }

  dependencies {
    // ...

    // Add the following line:
    classpath 'com.google.gms:google-services:4.3.0'  // Google Services plugin
  }
}

allprojects {
  // ...

  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
    // ...
  }
}

Dans le fichier Gradle de votre module (au niveau de l'application), généralement app/build.gradle, ajoutez une ligne en bas du fichier.

app/build.gradle

apply plugin: 'com.android.application'

android {
  // ...
}

// Add the following line to the bottom of the file:
apply plugin: 'com.google.gms.google-services'  // Google Play services Gradle plugin

Étape 4 : Ajoutez la dépendance Firebase

Dans cet atelier de programmation, la principale raison d'intégrer Firebase est de pouvoir créer et gérer des utilisateurs. Pour cela, vous devez ajouter une bibliothèque Firebase qui vous permet d'implémenter la connexion.

Ajoutez la dépendance suivante dans votre fichier build.gradle (Module:app) pour pouvoir utiliser le SDK dans votre application. Le SDK firebase-auth permet de gérer les utilisateurs authentifiés de votre application.

app/build.gradle :

implementation 'com.firebaseui:firebase-ui-auth:5.0.0'

Synchronisez votre projet avec les fichiers Gradle pour vous assurer que toutes les dépendances sont disponibles pour votre application. Si vous n'y êtes pas invité, sélectionnez File > Sync Project with Gradle Files (Fichier > Synchroniser le projet avec les fichiers Gradle) dans Android Studio ou dans la barre d'outils.

Étape 5 : Exécuter l'application et inspecter le code

Exécutez l'application sur un émulateur ou un appareil physique pour vous assurer que votre environnement est correctement configuré pour commencer le développement.

Si l'opération réussit, l'écran d'accueil devrait afficher une anecdote amusante sur Android et un bouton de connexion en haut à gauche. Pour le moment, rien ne se passe lorsque vous appuyez sur le bouton de connexion.

De manière générale, il s'agit d'une application à activité unique comportant plusieurs fragments. MainFragment contient toute l'UI que vous voyez sur l'écran ci-dessous. (Vous travaillerez avec LoginFragment et SettingsFragment dans un prochain atelier de programmation.)

Familiarisez-vous avec le code. En particulier, notez les points suivants :

FirebaseUserLiveData est la classe que vous allez implémenter pour observer l'utilisateur Firebase actuel associé à l'application. Vous utiliserez l'instance FirebaseAuth comme point d'entrée pour obtenir ces informations utilisateur lors d'une étape ultérieure.
Le MainFragment est associé au LoginViewModel. LoginViewModel est la classe que vous allez implémenter afin d'utiliser FirebaseUserLiveData pour créer une variable authenticationState. À l'aide de cette variable authenticationState, MainFragment peut ensuite observer la valeur pour mettre à jour l'UI en conséquence.

Dans cette étape, vous allez utiliser la console Firebase pour configurer les méthodes d'authentification que vous souhaitez que votre application prenne en charge. Pour cet atelier de programmation, vous allez vous concentrer sur la connexion des utilisateurs avec une adresse e-mail qu'ils fournissent ou avec leur compte Google.

Accédez à la console Firebase. (Remarque : Si vous êtes toujours dans le workflow "Ajouter Firebase", cliquez sur le X en haut à gauche pour revenir à la console.
Sélectionnez votre projet si vous n'y êtes pas déjà.
Ouvrez le panneau de navigation de gauche, puis sélectionnez Développer > Authentification .

Sélectionnez l'onglet Méthode de connexion dans la barre de navigation supérieure.

Cliquez sur la ligne Adresse e-mail/Mot de passe.
Dans le pop-up, activez l'option Activé, puis cliquez sur Enregistrer.
De même, cliquez sur la ligne Google.
Activez l'option Activé, saisissez une adresse e-mail d'assistance associée au projet, puis cliquez sur Enregistrer.

Dans cette tâche, vous allez implémenter la fonctionnalité de connexion pour vos utilisateurs.

Ouvrez MainFragment.kt.
Dans la mise en page de MainFragment, notez auth_button. Elle n'est actuellement pas configurée pour traiter les entrées utilisateur.
Dans onViewCreated(),, ajoutez un onClickListener à auth_button pour appeler launchSignInFlow().

MainFragment.kt

binding.authButton.setOnClickListener { launchSignInFlow() }

Recherchez la méthode launchSignInFlow() dans MainFragment.kt. Il contient actuellement un TODO.
Complétez la fonction launchSignInFlow() comme indiqué ci-dessous.

MainFragment.kt

private fun launchSignInFlow() {
   // Give users the option to sign in / register with their email or Google account.
   // If users choose to register with their email,
   // they will need to create a password as well.
   val providers = arrayListOf(
       AuthUI.IdpConfig.EmailBuilder().build(), AuthUI.IdpConfig.GoogleBuilder().build()

       // This is where you can provide more ways for users to register and 
       // sign in.
   )

   // Create and launch sign-in intent.
   // We listen to the response of this activity with the
   // SIGN_IN_REQUEST_CODE 
   startActivityForResult(
       AuthUI.getInstance()
           .createSignInIntentBuilder()
           .setAvailableProviders(providers)
           .build(),
       MainFragment.SIGN_IN_REQUEST_CODE
   )
}

Cela permet aux utilisateurs de s'inscrire et de se connecter avec leur adresse e-mail ou leur compte Google. Si l'utilisateur choisit de s'inscrire avec son adresse e-mail, la combinaison d'adresse e-mail et de mot de passe qu'il crée est unique pour votre application. Cela signifie qu'il pourra se connecter à votre application avec cette combinaison, mais pas à une autre application compatible avec Firebase avec les mêmes identifiants.

Dans MainFragment.kt, vous pouvez écouter le résultat du processus de connexion en implémentant la méthode onActivityResult(), comme indiqué ci-dessous. Comme vous avez commencé le processus de connexion avec SIGN_IN_REQUEST_CODE, vous pouvez également écouter le résultat du processus de connexion en filtrant lorsque SIGN_IN_REQUEST_CODE est renvoyé à onActivityResult(). Commencez par ajouter des instructions de journalisation pour savoir si l'utilisateur s'est connecté correctement.

MainFragment.kt

override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
   super.onActivityResult(requestCode, resultCode, data)
   if (requestCode == SIGN_IN_REQUEST_CODE) {
       val response = IdpResponse.fromResultIntent(data)
       if (resultCode == Activity.RESULT_OK) {
           // User successfully signed in
           Log.i(TAG, "Successfully signed in user ${FirebaseAuth.getInstance().currentUser?.displayName}!")
       } else {
           // Sign in failed. If response is null the user canceled the
           // sign-in flow using the back button. Otherwise check
           // response.getError().getErrorCode() and handle the error.
           Log.i(TAG, "Sign in unsuccessful ${response?.error?.errorCode}")
       }
   }
}

Votre application devrait maintenant être en mesure d'enregistrer et de connecter les utilisateurs.

Exécutez l'application et vérifiez que l'écran de connexion s'affiche lorsque vous appuyez sur le bouton Login (Se connecter).
Vous pouvez désormais vous connecter avec votre adresse e-mail et un mot de passe, ou avec votre compte Google.
L'interface utilisateur ne changera pas après votre connexion (vous implémenterez la mise à jour de l'UI à l'étape suivante), mais si tout fonctionne correctement, vous devriez voir le message de journal Successfully signed in user ${your name}! après avoir suivi le processus d'enregistrement.
Vous pouvez également accéder à la console Firebase, puis à Développer > Authentification > Utilisateurs pour vérifier que l'application compte désormais un utilisateur enregistré.
Notez que lorsqu'un utilisateur crée un compte pour votre application, ce compte est associé spécifiquement à votre application et non à une application qui utilise Firebase pour la fonctionnalité de connexion.

Dans cette tâche, vous allez implémenter la mise à jour de l'UI en fonction de l'état de l'authentification. Lorsque l'utilisateur est connecté, vous pouvez personnaliser son écran d'accueil en affichant son nom. Vous allez également remplacer le bouton Login (Connexion) par un bouton Logout (Déconnexion) lorsque l'utilisateur est connecté.

Ouvrez le cours FirebaseUserLiveData.kt, qui a déjà été créé pour vous. La première chose à faire est de permettre aux autres classes de l'application de savoir quand un utilisateur s'est connecté ou déconnecté. Toutefois, la classe ne fait encore rien, car la valeur de LiveData n'est pas mise à jour.
Étant donné que vous utilisez la bibliothèque FirebaseAuth, vous pouvez écouter les modifications apportées à l'utilisateur connecté avec le rappel FirebaseUser.AuthStateListener qui est implémenté pour vous dans la bibliothèque FirebaseUI. Ce rappel est déclenché chaque fois qu'un utilisateur se connecte à votre application ou s'en déconnecte.
Notez que FirebaseUserLiveData.kt définit la variable authStateListener. Vous utiliserez cette variable pour stocker la valeur de LiveData. La variable authStateListener a été créée pour que vous puissiez démarrer et arrêter correctement l'écoute des modifications de l'état d'authentification en fonction de l'état de votre application. Par exemple, si l'utilisateur met l'application en arrière-plan, celle-ci doit cesser d'écouter les changements d'état d'authentification afin d'éviter toute fuite de mémoire potentielle.
Mettez à jour authStateListener afin que la valeur de votre FirebaseUserLiveData corresponde à l'utilisateur Firebase actuel.

FirebaseUserLiveData.kt

private val authStateListener = FirebaseAuth.AuthStateListener { firebaseAuth ->
   value = firebaseAuth.currentUser
}

Ouvrez LoginViewModel.kt.
Dans LoginViewModel.kt, créez une variable authenticationState basée sur l'objet FirebaseUserLiveData que vous venez d'implémenter. En créant cette variable authenticationState, d'autres classes peuvent désormais déterminer si l'utilisateur est connecté ou non via LoginViewModel.

LoginViewModel.kt

val authenticationState = FirebaseUserLiveData().map { user ->
   if (user != null) {
       AuthenticationState.AUTHENTICATED
   } else {
       AuthenticationState.UNAUTHENTICATED
   }
}

Ouvrir MainFragment.kt.
Dans observeAuthenticationState() de MainFragment.kt, vous pouvez utiliser la variable authenticationState que vous venez d'ajouter dans LoginViewModel et modifier l'UI en conséquence. Si un utilisateur est connecté, authButton doit afficher Déconnexion.

MainFragment.kt

private fun observeAuthenticationState() {
   val factToDisplay = viewModel.getFactToDisplay(requireContext())

   viewModel.authenticationState.observe(viewLifecycleOwner, Observer { authenticationState ->
       when (authenticationState) {
           LoginViewModel.AuthenticationState.AUTHENTICATED -> {
               binding.authButton.text = getString(R.string.logout_button_text)
               binding.authButton.setOnClickListener {
                   // TODO implement logging out user in next step
               }

                // TODO 2. If the user is logged in, 
                 // you can customize the welcome message they see by
                 // utilizing the getFactWithPersonalization() function provided

           }
           else -> {
               // TODO 3. Lastly, if there is no logged-in user, 
                // auth_button should display Login and
                //  launch the sign in screen when clicked.
           }
       }
   })
}

Si l'utilisateur est connecté, vous pouvez également personnaliser le message de bienvenue qu'il voit en utilisant la fonction getFactWithPersonalization() fournie dans MainFragment.

MainFragment.kt

binding.welcomeText.text = getFactWithPersonalization(factToDisplay)

Enfin, si aucun utilisateur n'est connecté (lorsque authenticationState est différent de LoginViewModel.AuthenticationState.AUTHENTICATED), auth_button doit afficher Se connecter et lancer l'écran de connexion lorsque l'utilisateur clique dessus. Le message affiché ne doit pas non plus être personnalisé.

MainFragment.kt

binding.authButton.text = getString(R.string.login_button_text)
binding.authButton.setOnClickListener { launchSignInFlow() }
binding.welcomeText.text = factToDisplay

Une fois toutes les étapes terminées, votre méthode observeAuthenticationState() finale devrait ressembler au code ci-dessous.

MainFragment.kt

private fun observeAuthenticationState() {
   val factToDisplay = viewModel.getFactToDisplay(requireContext())

   viewModel.authenticationState.observe(viewLifecycleOwner, Observer { authenticationState ->
        // TODO 1. Use the authenticationState variable you just added 
         // in LoginViewModel and change the UI accordingly.
       when (authenticationState) {
            // TODO 2.  If the user is logged in, 
             // you can customize the welcome message they see by
             // utilizing the getFactWithPersonalization() function provided
           LoginViewModel.AuthenticationState.AUTHENTICATED -> {
               binding.welcomeText.text = getFactWithPersonalization(factToDisplay)
               binding.authButton.text = getString(R.string.logout_button_text)
               binding.authButton.setOnClickListener {
                   // TODO implement logging out user in next step
               }
           }
           else -> {
                // TODO 3. Lastly, if there is no logged-in user, 
                 // auth_button should display Login and
                 // launch the sign in screen when clicked.
               binding.welcomeText.text = factToDisplay

               binding.authButton.text = getString(R.string.login_button_text)
               binding.authButton.setOnClickListener {
                   launchSignInFlow()
               }
           }
       }
   })
}

Exécutez votre application. L'UI doit se mettre à jour selon que l'utilisateur est connecté ou non. Si tout fonctionne correctement et que vous êtes connecté, l'écran d'accueil devrait maintenant vous saluer par votre nom et afficher une information sur Android. Le bouton Login (Se connecter) devrait maintenant afficher Logout (Se déconnecter).

Dans cette tâche, vous allez implémenter la fonctionnalité de déconnexion.

Étant donné que l'application permet aux utilisateurs de se connecter, elle doit également leur permettre de se déconnecter. Voici un exemple de déconnexion d'un utilisateur avec une seule ligne de code :

AuthUI.getInstance().signOut(requireContext())

Ouvrez MainFragment.kt.
Dans le observeAuthenticationState() de MainFragment.kt, ajoutez la logique de déconnexion pour que auth_button fonctionne correctement lorsqu'un utilisateur est connecté. Le résultat final de la méthode ressemble au code ci-dessous.

MainFragment.kt

private fun observeAuthenticationState() {
   val factToDisplay = viewModel.getFactToDisplay(requireContext())

   viewModel.authenticationState.observe(viewLifecycleOwner, Observer { authenticationState ->
       when (authenticationState) {
           LoginViewModel.AuthenticationState.AUTHENTICATED -> {
               binding.welcomeText.text = getFactWithPersonalization(factToDisplay)

               binding.authButton.text = getString(R.string.logout_button_text)
               binding.authButton.setOnClickListener {
                   AuthUI.getInstance().signOut(requireContext())
               }
           }
           else -> {
               binding.welcomeText.text = factToDisplay

               binding.authButton.text = getString(R.string.login_button_text)
               binding.authButton.setOnClickListener {
                   launchSignInFlow()
               }
           }
       }
   })
}

Exécutez l'application.
Appuyez sur le bouton Se déconnecter et vérifiez que l'utilisateur est déconnecté et que l'état du bouton est passé à Se connecter.

Vous trouverez la version finale de l'application terminée sur https://github.com/googlecodelabs/android-kotlin-login.

Dans cet atelier de programmation, vous avez appris ce qui suit :

Découvrez comment ajouter Firebase à votre projet en ajoutant les dépendances nécessaires dans votre fichier Gradle et en configurant le projet dans la console Firebase.
Découvrez comment implémenter la connexion à votre application à l'aide de la bibliothèque FirebaseUI et en spécifiant la façon dont vous souhaitez autoriser vos utilisateurs à se connecter. Notez que tout compte qu'un utilisateur crée dans votre application est spécifique à celle-ci et n'est pas partagé avec toutes les applications qui utilisent Firebase pour la fonctionnalité de connexion.
Comment observer l'état d'authentification actuel de votre application à l'aide de LiveData.
Déconnecter des utilisateurs

Cet atelier de programmation a abordé les principes de base de la prise en charge de la connexion pour une application Android.

Dans cet atelier de programmation, vous avez permis aux utilisateurs de s'inscrire et de se connecter avec leur adresse e-mail. Toutefois, avec la bibliothèque FirebaseUI, vous pouvez également prendre en charge d'autres méthodes d'authentification, comme la connexion avec un numéro de téléphone. Pour en savoir plus sur les fonctionnalités de la bibliothèque FirebaseUI et sur la façon d'utiliser les autres fonctionnalités qu'elle fournit, consultez les ressources suivantes :

Pour en savoir plus sur les bonnes pratiques concernant la connexion, consultez les ressources suivantes :

Ateliers de programmation :

Documentation pour les développeurs Android :

Vidéos :

Optimiser les parcours utilisateur via la connexion

Pour accéder aux autres ateliers de programmation de ce cours, consultez la page de destination des ateliers de programmation "Développement Android avancé en Kotlin".

Connexion Android avec FirebaseUI Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Introduction

Ce que vous devez déjà savoir

Points abordés

Objectifs de l'atelier

En savoir plus sur LiveData et ViewModel

Étape 1 : Créez un projet Firebase

Étape 2 : Enregistrez votre application auprès de Firebase

Étape 3 : Ajoutez le fichier de configuration Firebase à votre projet

Étape 4 : Configurez votre projet Android pour activer les produits Firebase

Étape 4 : Ajoutez la dépendance Firebase

Étape 5 : Exécuter l'application et inspecter le code

Connexion Android avec FirebaseUI