Page de connexion Firebase

Bonjour à tous ! Après article sur une page de création de compte, voici maintenant une page pour s’y connecter. C’est donc dans cet article que je vais vous présenter comment réaliser une page de connexion avec Firebase.

Pour tester notre page de connexion, il faut posséder un compte utilisateur. Si vous en avez pas, il y a deux possibilités. Vous pouvez en créer via l’application qu’on à créée précédemment dans l’article “Créer sa page de création de compte Firebase”. Soit vous pouvez créer un compte depuis l’interface web de Firebase. Dans cet article, je vais vous montre la seconde option. Si vous préférez le faire directement depuis l’application rien ne vous en empêche.

Création de compte sur l’interface web de Firebase

Pour une page de connexion, il est nécessaire d’avoir un compte. Rassurez-vous c’est une question de quelque clic. Première étape connectez-vous, sur l’interface  web de votre projet que vous pouvez retrouver avec le lien ici.

Sur votre projet, il faut se rendre dans le menu “Authentification” et sur l’onglet “Utilisateurs” il faut cliquer sur le bouton “Ajouter un utilisateur”. C’est dans cette interface que vous verrez, l’ensemble des utilisateurs de votre application.

Apres avoir appuyé sur le bouton, il ne reste plus qu’ à ajouter l’E-mail et le mot de passe de votre nouvel utilisateur.

Maintenant que vous avez vos utilisateurs, vous avez la possibilité de désactiver, supprimez ou réinitialiser  les comptes de vos utilisateurs. Pour le faire, il suffit de cliquer sur l’icone à 3 points à droite de votre utilisateur cible et choisir l’une des trois options. Pour chaque option il vous demandera de confirmer, cela évite une fausse manipulation.

Le design de l’activité

Le design reste épuré, avec le même code couleur que l’autre activité sur la création de compte que je présente ici. Un fond blanc avec les boutons de couleurs vert clair pour rappeler les couleurs du petit robot Android. Pour chaque composant on fera appel à son style que nous avons défini dans le fichier “styles.xml”.

Le design c’est deux champs à remplir pour la connexion, représentés par deux EditText, Deux boutons et un TewtView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".LoginActivity">
    <EditText
            android:id="@+id/et_email"
            style="@style/EditTexteStyle"
            android:ems="10"
            android:hint="Email"
            android:inputType="textEmailAddress" />
    <EditText
            android:id="@+id/et_password"
            style="@style/EditTexteStyle"
            android:ems="10"
            android:hint="Password"
            android:inputType="textPassword" />

</LinearLayout>

Le premier bouton intitulé “Login” va nous permettre de se connecter à partir des deux champs de saisie (l’email et le mot de passe de l’utilisateur) qu’on a rentrés.

<Button
        android:id="@+id/btn_login"
        style="@style/BoutonStyle"
        android:text="@string/login_title"
        android:textStyle="bold" />

Le textView intitulé “Mot de passe oublié?” va nous rediriger vers une autre activité que je présenterai dans un prochain article. Cette activité nous servira à envoyer un email de réinitialisation de mot de passe.

<TextView
        android:id="@+id/tv_forgot_password"
        style="@style/TextViewStyle"
        android:clickable="true"
        android:gravity="center_horizontal"
        android:text="Mot de passe oublié?"
        android:textSize="20sp" />

Le paramètre “android:clickable” va permettre d’ajouter une action au textView. L’action rend le textView cliquable.

Le second bouton nommé  “Créer votre compte” va nous rediriger vers une autre activité, pour créer notre compte.

<Button
        android:id="@+id/btn_register_account"
        style="@style/BoutonStyle"
        android:text="@string/create_act"
        android:layout_gravity="bottom"
        android:textStyle="bold" />

Ajout des fonctionnalités

Quand j’entends ajout de fonctionnalité, j’entends implémentation du code. Dans l’activité j’ai implémenté quatre méthodes : La méthode “connexion”, La méthode  “initialisation”, La méthode “onCreate”, La méthode “MAJInfoUser”.

Les variables

class LoginActivity : AppCompatActivity() {
    
    private val TAG = "LoginActivity"

    //Les variables globales
    private var email: String? = null
    private var password: String? = null

    //Les composants de l'interface
    private var tv_ForgotPassword: TextView? = null
    private var et_Email: EditText? = null
    private var et_Password: EditText? = null
    private var btn_Login: Button? = null
    private var btn_CreateAccount: Button? = null
    private var progressBar: ProgressDialog? = null

    //La reference Firebase
    private var auth: FirebaseAuth? = null
}

La méthode  initialisation

private fun initialisation() {
    tv_ForgotPassword = findViewById<View>(R.id.tv_forgot_password) as TextView
    et_Email = findViewById<View>(R.id.et_email) as EditText
    et_Password = findViewById<View>(R.id.et_password) as EditText
    btn_Login = findViewById<View>(R.id.btn_login) as Button
    btn_CreateAccount = findViewById<View>(R.id.btn_register_account) as Button
    progressBar = ProgressDialog(this)
    auth = FirebaseAuth.getInstance()

    tv_ForgotPassword!!
        .setOnClickListener { startActivity(
            Intent(this@LoginActivity,
            ForgotPasswordActivity::class.java)
        ) }
    btn_CreateAccount!!
        .setOnClickListener { startActivity(Intent(this@LoginActivity,
            CreateAccountActivity::class.java)) }
    btn_Login!!.setOnClickListener { connexion() }
}

La méthode initialisation va nous permettre d’initialiser toutes nos variables et nos composants. C’est aussi dans cette fonction, qu’on va venir attribuer un événement à notre bouton. Lors du clic sur le bouton “Login”, la méthode “connexion” est lancée.

-> findViewById permet d’associer une variable à notre composant grâce à son identifiant.

-> La méthode setOnClickListener permet d’associer un événement à notre bouton. Ici en cliquant sur le bouton, on va venir appeler la méthode connexion.

-> Notre variable Auth va venir récupérer l’instance de la base pour pouvoir si connecter.

La méthode onCreate

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_login)
    initialisation()
}

Au démarrage de l’application la méthode onCreate est lancée. Dans cette méthode, on va venir appeler notre méthode “initialisation” pour initialiser l’ensemble de nos variables.

La méthode connexion

private fun connexion() {
    email = et_Email?.text.toString()
    password = et_Password?.text.toString()
    if (!TextUtils.isEmpty(email) && !TextUtils.isEmpty(password)) {
        progressBar!!.setMessage("Vérification de l'utilisateur...")
        progressBar!!.show()
        Log.d(TAG, "connexion de l'utilisateur.")
        auth!!.signInWithEmailAndPassword(email!!, password!!)
            .addOnCompleteListener(this) { task ->
                progressBar!!.hide()
                if (task.isSuccessful) {
                    // Si l'authentification a réussi, on met à jour les informations de l'utilisateur
                    Log.d(TAG, "Connexion de l'utilisateur avec son email : Succès")
                    MAJInfoUser()
                } else {
                    // Si l'authentification a échouée, on affiche un message à l'utilisateur
                    Log.e(TAG, "Connexion de l'utilisateur avec son email : Echec", task.exception)
                    Toast.makeText(this@LoginActivity, "Echec de l'authentication.",
                        Toast.LENGTH_SHORT).show()
                }
            }
    } else {
        Toast.makeText(this, "Entrer les détails", Toast.LENGTH_SHORT).show()
    }
}

La méthode connexion va venir vérifier sur firebase le compte utilisateur à partir des champs de saisie lorsqu’ils sont remplis. La méthode signInWithEmailAndPassword  va nous permettre de vérifier l’identifiant et le mot de passe. Si la connexion à réussi, La méthode MAJInfoUser est  appelée pour changer d’activité et afficher les informations de l’utilisateur. Si l’authentification à échoué alors un message d’erreur s’affiche à l’utilisateur.

La méthode MAJInfoUser

private fun MAJInfoUser() {
    val intent = Intent(this@LoginActivity, MainActivity::class.java)
    intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)
    startActivity(intent)
}

La méthode MAJInfoUser va nous rediriger sur une notre page à savoir la MainActivity contenant les informations du nouveau compte.

La petite démonstration

Merci d’avoir lu ! Maintenant, si vous avez aimé le contenu de l’article, si  vous connaissez une personne à qui cet article peut intéresser, n’hésitez pas à le liker et à le partager sur les réseaux sociaux. Si vous souhaitez me faire part de vos remarques, de vos problèmes, de vos suggestions de prochain article ou tout simplement de votre soutien n’hésitez pas à m’en faire part dans les commentaires, je vous en remercie.

crédit photo : ElisaRiva, Blickpixel.