Authentification de l'utilisateur dans Android à l'aide de Firebase (Java)

Qu'est-ce que Firebase ?

Firebase est une plate-forme de développement d'applications mobiles (Android ou iOS) et Web qui fournit une suite d'outils et de services basés sur le cloud proposés par Google . Il s'agit d'un backend en tant que service ( BaaS ) qui permet aux développeurs de créer et de déployer des applications rapidement et efficacement, avec des fonctionnalités intégrées pour l'authentification, les bases de données en temps réel, le stockage dans le cloud, l'hébergement, etc.

Dans ce didacticiel, nous allons créer une application Android Java simple avec Firebase pour l'authentification qui permet aux utilisateurs de créer des comptes. se connecter et se déconnecter des comptes. Nous verrons également comment utiliser votre téléphone Android comme émulateur.

Conditions préalables

Avant de commencer ce didacticiel, vous devez connaître les bases du développement d'applications Android.

De plus, vous devez avoir les logiciels suivants installés sur votre ordinateur :

• Studio Androïd : Studio Android est l'IDE officiel pour le développement d'applications Android. Il dispose d'un large éventail de fonctionnalités, notamment l'édition de code, la conception de la mise en page, le débogage et un émulateur pour les tests.
• Kit de développement Java (JDK) : dans ce didacticiel, nous utiliserons Java pour construire notre application. Android Studio nécessite JDK 8 ou supérieur.
• Android SDK (Software Development Kit) : le SDK Android est un ensemble d'outils et de bibliothèques fournis par Google pour le développement d'applications Android.
• Gestionnaire de périphériques virtuels Android (AVD) : AVD Manager est un outil fourni par Android Studio qui vous permet de créer et de gérer des périphériques virtuels pour tester vos applications.

Étape 1 : Créer une nouvelle application Android

• Ouvrez Android Studio et cliquez sur "Démarrer un nouveau projet Android Studio" sur l'écran d'accueil. Si vous ne voyez pas cette option, vous pouvez aller dans Fichier> Nouveau> Nouveau projet pour créer un nouveau projet.
• Ensuite, vous choisirez un modèle pour votre projet. Android Studio fournit plusieurs modèles pour différents types d'applications, telles que "Activité vide", "Activité de base", "Activité plein écran", et plus encore. Choisissez "Activité vide" et cliquez sur "Suivant".

• Dans la boîte de dialogue "Activité vide", vous pouvez définir des paramètres supplémentaires pour l'application. Vous verrez une invite pour configurer divers paramètres pour votre projet, tels que le nom du projet, le nom du package, l'emplacement, le SDK minimum et la langue. Remplissez les informations requises ; dans ce cas, le nom du projet est "FirebaseAuthApp", puis cliquez sur "Terminer".

• Android Studio créera un nouveau projet avec le modèle choisi et générera les fichiers et dossiers nécessaires. Cela peut prendre quelques minutes en fonction des performances et de la capacité de votre système. Une fois le projet construit, vous verrez la structure du projet dans l'onglet Projet, le fichier de mise en page activity_main.xml dans l'éditeur de mise en page et le fichier mainactivity.java dans l'éditeur.
• Cliquez sur `Build` dans la barre d'outils et sélectionnez `Build Project` pour générer le fichier APK qui contient le code et les ressources de votre application. NB : Vous pouvez voir "Reconstruire le projet" au lieu de "Construire le projet" si vous avez déjà déclenché une génération ou si vous avez apporté des modifications à votre projet qui nécessitent une génération complète.

Étape 2 : Exécutez et testez l'application.

Pour ce faire, vous pouvez connecter un appareil Android physique ou démarrer un émulateur.

Pour utiliser un émulateur, procédez comme suit :

• Cliquez sur Gestionnaire de périphériques dans la barre d'outils d'Android Studio pour ouvrir le gestionnaire de périphérique virtuel Android (AVD).

• Créer ou sélectionner un appareil virtuel existant : Si vous avez déjà un appareil virtuel, cliquez sur le bouton de lecture pour démarrer l'émulateur dans l'AVD. Si vous n'en avez pas, cliquez sur "Créer un appareil" pour créer un nouvel émulateur ou un appareil virtuel. Sélectionnez votre configuration matérielle préférée (taille, résolution, densité, etc.), puis sélectionnez Suivant. Après cela, sélectionnez une image système et une version Android. Laissez-le télécharger, puis configurez les paramètres de l'émulateur.

• Lorsque le périphérique virtuel est créé, cliquez sur le bouton de lecture pour démarrer l'émulateur.
• Une fois l'émulateur en cours d'exécution, accédez à la barre d'outils et cliquez sur le bouton "Exécuter" pour exécuter votre projet sur l'émulateur. Il construira et installera automatiquement l'application sur l'émulateur. Vous devriez voir "Hello World" sur l'émulateur.

Pour vous connecter à un appareil Android physique, suivez les étapes suivantes :

Sur votre appareil Android (téléphone ou tablette), ouvrez les paramètres et accédez à "À propos du téléphone". Cliquez sur 'Informations sur le logiciel'.

• Une fois que vous l'avez ouvert, faites défiler vers le bas et recherchez « Numéro de build ». Appuyez dessus sept fois (le numéro peut varier en fonction du téléphone ; j'utilise un téléphone Samsung), et il activera le mode de développement.
• A ce stade, il peut vous demander votre mot de passe ; entrez-le et vous avez terminé. Revenez à la page d'accueil des paramètres et vous devriez voir les options du développeur.
• Cliquez sur Options pour les développeurs, puis activez le débogage USB.
• Connectez votre appareil à votre ordinateur en le branchant avec un câble USB. Vous verrez un message contextuel vous demandant d'autoriser le débogage USB à partir de l'ordinateur.
• Retournez dans votre studio Android et accédez au gestionnaire AVD. Sur la barre d'outils, votre appareil devrait apparaître ; sélectionnez-le et lancez l'application. L'application devrait s'ouvrir sur votre appareil Android après quelques minutes et vous verrez la page d'accueil "Hello World".

NB : Il existe d'autres façons de connecter votre appareil physique à votre studio Android en tant qu'émulateur, comme le débogage sans fil, mais dans ce tutoriel, nous utiliserons le débogage USB.

Étape 3 : Créer l'interface utilisateur

Dans cette étape, nous allons créer l'interface utilisateur et la conception. Accédez au dossier `app/res` ; c'est là que la plupart des modifications de l'interface utilisateur auront lieu.

• Ajouter des couleurs : ouvrez le fichier `app/res/values/colors.xml` et ajoutez les codes de couleur pour notre application.

 <?xml version="1.0" encoding="utf-8"?> <resources> <color name="slateblue"> #6F58C9</color> <color name="black">#FF000000</color> <color name="white"> #FFFFFFFF</color> </resources>

• Ajouter une police : cliquez avec le bouton droit sur le dossier "res" et cliquez sur "Nouveau", faites défiler jusqu'à "Dossier" et sélectionnez "Dossier de polices" dans le menu déroulant. Ou créez un nouveau dossier et nommez-le "police". Télécharger et copiez ceci Police de caractère dans le dossier des polices.
• Créer des ressources pouvant être dessinées : nous créerons et ajouterons la connexion, les boîtes de dialogue, les zones de saisie de formulaire, les boutons, les images d'arrière-plan et les ressources vectorielles sur les pages de connexion et d'inscription. Pour faire ça, suit les étapes suivantes:
  • Ajouter une image d'arrière-plan : téléchargez et copiez cette image dans le dossier drawable.
• Ajouter des fichiers de ressources dessinables personnalisés : dans le dossier "res", accédez au dossier "dessinable", cliquez dessus avec le bouton droit de la souris, cliquez sur "Nouveau" et sélectionnez "Fichier de ressources dessinables". Enregistrez le nom sous "custom_edittext" et modifiez le élément racine du sélecteur à la forme, puis cliquez sur 'OK'.
• Ouvrez le fichier et ajoutez ces lignes de code :

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <stroke android:width="2dp" android:color="@color/slateblue"/> <corners android:radius="30dp"/> </shape>

• 
  

  • Ajoutez des images vectorielles :
    • Dans le dossier `res`, accédez au dossier 'drawable', cliquez dessus avec le bouton droit de la souris, cliquez sur 'Nouveau' et sélectionnez 'Vector Asset'. Ici, nous allons télécharger des images vectorielles pour les formulaires.
    • Cliquez sur une image clipart et tapez « personne » dans la barre de recherche. Sélectionnez l'art 'personne', cliquez sur 'suivant' et sélectionnez 'terminer'.
    • Répétez les étapes mais téléchargez l'image vectorielle pour 'verrouiller'.
    • Ouvrez le code XML pour chacun d'eux et changez la teinte en bordeaux. 'android:tint="@color/slateblue"'.

Étape 4 : Créer de nouvelles activités.

• Accédez au dossier 'app/java/com.example.firebaseauthapp', faites un clic droit dessus et sélectionnez 'Nouveau'. Faites défiler vers le bas et cliquez sur "Activité", puis sélectionnez "Activité vide".
• Renommez l'activité en "SignUpActivity", cochez la case "Activité du lanceur", puis cliquez sur "Terminer".

• Répétez les étapes en excluant d'en faire une activité de lancement, cette fois pour "LoginActivity".

• Ouvrez le fichier 'app/manifests/AndroidManifest.xml' et supprimez le filtre d'intention du bloc d'activité principale, modifiez également 'android:exported="true"' en 'android:exported="false"'. Ça devrait ressembler à ça:

  
  

 <activity android:name=".LoginActivity" android:exported="false" /> <activity android:name=".SignUpActivity" android:exported="true"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name=".MainActivity" android:exported="false"> </activity>

Étape 5 : Modifiez la présentation de l'activité.

• Ouvrez le fichier 'app/res/layout/activity_main.xml'.
• Ajoutez le code suivant :

 <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/wallbg" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textColor="@color/slateblue" android:textSize="26sp" android:textStyle="bold" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"/> </androidx.constraintlayout.widget.ConstraintLayout>

• Ouvrez le fichier 'app/res/layout/activity_sign_up.xml'.
• Ajoutez le code suivant :

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center" android:background="@drawable/wallbg" tools:context=".SignUpActivity"> <androidx.cardview.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="30dp" app:cardCornerRadius="30dp" app:cardElevation="20dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_gravity="center_horizontal" android:padding="24dp" android:background="@drawable/custom_edittext"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Sign Up" android:textSize="36sp" android:textAlignment="center" android:textStyle="bold" android:textColor="@color/slateblue" /> <EditText android:layout_width="match_parent" android:layout_height="50dp" android:id="@+id/signup_email" android:background="@drawable/custom_edittext" android:layout_marginRight="40dp" android:layout_marginTop="40dp" android:padding="8dp" android:hint="Email" android:drawableLeft="@drawable/baseline_person_24" android:drawablePadding="8dp" android:textColor="@color/black" /> <EditText android:layout_width="match_parent" android:layout_height="50dp" android:id="@+id/signup_password" android:background="@drawable/custom_edittext" android:layout_marginRight="40dp" android:layout_marginTop="20dp" android:padding="8dp" android:hint="Password" android:drawableLeft="@drawable/baseline_lock_24" android:drawablePadding="8dp" android:textColor="@color/black" /> <Button android:layout_width="match_parent" android:layout_height="60dp" android:text="Sign Up" android:id="@+id/signup_button" android:textSize="18sp" android:layout_marginTop="30dp" android:backgroundTint="@color/slateblue" app:cornerRadius = "20dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/loginRedirectText" android:text="Already a user. Login" android:layout_gravity="center" android:padding="8dp" android:layout_marginTop="10dp" android:textColor="@color/slateblue" android:textSize="18sp" /> </LinearLayout> </androidx.cardview.widget.CardView> </LinearLayout>

• Accédez à app/res/layout/activity_login.xml.
• Ajoutez le code suivant :

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center" android:background="@drawable/wallbg" tools:context=".LoginActivity"> <androidx.cardview.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="30dp" app:cardCornerRadius="30dp" app:cardElevation="20dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_gravity="center_horizontal" android:padding="24dp" android:background="@drawable/custom_edittext"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Login" android:textSize="36sp" android:textAlignment="center" android:textStyle="bold" android:textColor="@color/slateblue" /> <EditText android:layout_width="match_parent" android:layout_height="50dp" android:id="@+id/login_email" android:background="@drawable/custom_edittext" android:layout_marginRight="40dp" android:layout_marginTop="40dp" android:padding="8dp" android:hint="Email" android:drawableLeft="@drawable/baseline_person_24" android:drawablePadding="8dp" android:textColor="@color/black" /> <EditText android:layout_width="match_parent" android:layout_height="50dp" android:id="@+id/login_password" android:background="@drawable/custom_edittext" android:layout_marginRight="40dp" android:layout_marginTop="20dp" android:padding="8dp" android:hint="Password" android:drawableLeft="@drawable/baseline_lock_24" android:drawablePadding="8dp" android:textColor="@color/black" /> <Button android:layout_width="match_parent" android:layout_height="60dp" android:text="Login" android:id="@+id/login_button" android:textSize="18sp" android:layout_marginTop="30dp" android:backgroundTint="@color/slateblue" app:cornerRadius = "20dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/signUpRedirectText" android:text="Not yet registered? Sign Up" android:layout_gravity="center" android:padding="8dp" android:layout_marginTop="10dp" android:textColor="@color/slateblue" android:textSize="18sp" /> </LinearLayout> </androidx.cardview.widget.CardView> </LinearLayout>

Étape 6 : Configurer l'authentification Firebase

• Accédez à la barre de menu et cliquez sur "Outils", puis sélectionnez Firebase.
• Une fois que vous avez fait cela, vous verrez une barre contextuelle latérale. Faites défiler et cliquez sur Authentification , puis sélectionnez « Authentification à l'aide d'un système d'authentification personnalisé ». N'oubliez pas qu'il s'agit d'un didacticiel Java Android, alors assurez-vous que l'option que vous sélectionnez n'utilise pas KOTLIN.

• Connectez-vous à Firebase en cliquant sur le bouton. Il vous redirigera vers votre console Firebase. Si vous n'avez pas créé de compte, assurez-vous d'en créer un. Vous serez probablement connecté ; sinon, connectez-vous.
• Lorsque vous créez un nouveau projet, il suggère un nom basé sur le nom du projet dans Android Studio. Vous pouvez choisir de le conserver ou de le renommer. Le mien est "FirebaseAuthApp".
• À l'invite suivante, désactivez Google Analytics pour le projet, puis créez le projet.
• Une fois le projet créé, vous verrez une invite vous demandant de connecter Android Studio à Firebase. Sélectionnez "OK", et vous avez terminé.
• Revenez à la console Firebase et ouvrez votre projet nouvellement créé.
• Cliquez sur 'Build' puis sélectionnez 'Authentication'. Cliquez sur le bouton 'Commencer'.
• Ajoutez une méthode de connexion en sélectionnant "E-mail/Mot de passe" et en l'activant. Cela créera votre système d'authentification personnalisé en utilisant votre méthode préférée, dans ce cas, l'e-mail ou le mot de passe.

• Revenez à Android Studio. Vous devriez voir un message contextuel indiquant que votre application, com.example.firebaseauthapp, est maintenant connectée à votre projet Firebase.
• Ajoutez le SDK d'authentification Firebase à votre application en cliquant sur le bouton de la barre d'outils de l'assistant et en sélectionnant "Accepter les modifications".
• Une fois cela fait, vous verrez une invite sur la barre d'outils de l'assistant indiquant que les dépendances ont été correctement configurées.

• Fermez la barre d'outils et ouvrez Gradle.
• Cliquez sur l'icône Gradle dans le coin supérieur gauche de la barre d'outils Gradle.
• Tapez "signingRedport" dans la barre de recherche et appuyez sur Entrée.
• Une fois les résultats de Build Analyzer disponibles, copiez le hachage SHA1.
• Revenez à la console Firebase et cliquez sur la vue d'ensemble du projet, puis sélectionnez Paramètres du projet.

Remarque : Si vous avez plusieurs applications sur le projet, accédez à la vue d'ensemble du projet, puis cliquez sur « application » et sélectionnez l'application que vous souhaitez authentifier.

• Accédez à la base du projet et ajoutez une empreinte digitale. Collez le hachage SHA1, puis sélectionnez Enregistrer." Vous obtiendrez une invite indiquant "Nouvelles empreintes digitales de certificat ajoutées".

Étape 7 : ajoutez l'authentification au projet.

• Ouvrez le fichier 'com/example/firebaseauthapp/SignUpActivity.java'.
• Ajoutez les importations nécessaires, déclarez l'instance FirebaseAuth et initialisez-la dans la méthode "onCreate" de l'activité d'inscription. Ça devrait ressembler à ça:

 package com.example.firebaseauthapp; import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; import android.widget.Toast; import com.google.android.gms.tasks.OnCompleteListener; import com.google.android.gms.tasks.Task; import com.google.firebase.auth.AuthResult; import com.google.firebase.auth.FirebaseAuth; public class SignUpActivity extends AppCompatActivity { // Declare any other necessary variables. private FirebaseAuth auth; private EditText signupEmail, signupPassword; private Button signupButton; private TextView loginRedirectText; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_sign_up); //Initialize the FirebaseAuth instance in the onCreate() auth = FirebaseAuth.getInstance(); signupEmail = findViewById(R.id.signup_email); signupPassword = findViewById(R.id.signup_password); signupButton = findViewById(R.id.signup_button); loginRedirectText = findViewById(R.id.loginRedirectText); signupButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { String user = signupEmail.getText().toString().trim(); String pass = signupPassword.getText().toString().trim(); if (user.isEmpty()){ signupEmail.setError("Email cannot be empty"); } if(pass.isEmpty()){ signupPassword.setError("Password cannot be empty"); } else{ auth.createUserWithEmailAndPassword(user, pass).addOnCompleteListener(new OnCompleteListener<AuthResult>() { @Override public void onComplete(@NonNull Task<AuthResult> task) { if(task.isSuccessful()){ Toast.makeText(SignUpActivity.this, "Signup Successful", Toast.LENGTH_SHORT).show(); startActivity(new Intent(SignUpActivity.this, LoginActivity.class)); } else{ Toast.makeText(SignUpActivity.this, "Signup Failed" + task.getException().getMessage(), Toast.LENGTH_SHORT).show(); } } }); } } }); loginRedirectText.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { startActivity(new Intent(SignUpActivity.this, LoginActivity.class)); } }); } }

• Ouvrez le fichier 'com/example/firebaseauthapp/LoginActivity.java'.
• Ajoutez le code suivant :

 package com.example.firebaseauthapp; import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import android.content.Intent; import android.os.Bundle; import android.util.Patterns; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; import android.widget.Toast; import com.google.android.gms.tasks.OnFailureListener; import com.google.android.gms.tasks.OnSuccessListener; import com.google.firebase.auth.AuthResult; import com.google.firebase.auth.FirebaseAuth; public class LoginActivity extends AppCompatActivity { private FirebaseAuth auth; private EditText loginEmail, loginPassword; private TextView signupRedirectText; private Button loginButton; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_login); auth = FirebaseAuth.getInstance(); loginEmail = findViewById(R.id.login_email); loginPassword = findViewById(R.id.login_password); loginButton = findViewById(R.id.login_button); signupRedirectText = findViewById(R.id.signupRedirectText); loginButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { String email = loginEmail.getText().toString(); String pass = loginPassword.getText().toString(); if(!email.isEmpty() && Patterns.EMAIL_ADDRESS.matcher(email).matches()) { if (!pass.isEmpty()) { auth.signInWithEmailAndPassword(email, pass) .addOnSuccessListener(new OnSuccessListener<AuthResult>() { @Override public void onSuccess(AuthResult authResult) { Toast.makeText(LoginActivity.this, "Login Successful", Toast.LENGTH_SHORT).show(); startActivity(new Intent(LoginActivity.this, MainActivity.class )); finish(); } }).addOnFailureListener(new OnFailureListener() { @Override public void onFailure(@NonNull Exception e) { Toast.makeText(LoginActivity.this, "Login Failed", Toast.LENGTH_SHORT).show(); } }); } else { loginPassword.setError("Password cannot be empty"); } } else if (email.isEmpty()) { loginEmail.setError("Email cannot be empty"); } else { loginEmail.setError("Please enter a valid email"); } } }); signupRedirectText.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { startActivity(new Intent(LoginActivity.this, SignUpActivity.class)); } }); } }

• Exécutez l'application et démarrez l'émulateur.

• Vous devriez voir une application entièrement fonctionnelle.
• Accédez à la console Firebase et cliquez sur "Authentification". Sous l'onglet 'utilisateurs', vous verrez la liste des nouveaux utilisateurs enregistrés.

En suivant ces étapes, vous avez réussi à intégrer Firebase et à configurer l'authentification des utilisateurs pour votre application.

Conclusion

Dans ce didacticiel, nous avons utilisé Firebase pour ajouter l'authentification des utilisateurs à notre application Android Java. Nous avons développé une application où les utilisateurs peuvent créer des comptes, s'inscrire et se déconnecter. Nous avons également expliqué comment utiliser un téléphone Android comme émulateur.

Pour approfondir vos connaissances sur Firebase dans le développement d'applications Android, reportez-vous à la documentation Android et Firebase.