Page de réinitialisation de mot de passe Firebase

Bonjour à nous ! Nouvel article sur Firebase. Dans cet article nous allons voir comment mettre en place dans une application, une page pour réinitialiser le mot de passe oublié d’un utilisateur. Dans la majorité des applications qui vous demande de nous connecter, se trouve la possibilité de réinitialiser le mot de passe. La plupart du temps, cette option se traduit par un bouton se situant sur la page de connexion en dessous des champs de saisie.  Pour la suite de l’article, je vais me servir d’ une application que j’ai créée dans des précédents articles comme point de départ. Cette application possède :

– Une page de connexion, présentée dans l’article ”Page de connexion Firebase”.

– Une page de création de compte, abordée dans l’article “Créer sa page de création de compte Firebase”.

Et moi dans cet article, je vais rajouter une dernière activité qui contiendra la partie réinitialisation de mot de passe. Si vous souhaitez savoir comment mettre Firebase dans vos applications,  je vous recommande également l’article “Comment installer Firebase sur votre application ?”.

Configurer l’email d’envoi

Dans l’interface de Firebase, vous avez la possibilité de modifier l’email de réinitialisation qui sera envoyé à l’utilisateur. Je vais vous indiquer ici comment vous aller pouvoir procéder. Dans une première étape connectez-vous puis accéder sur votre projet Firebase. Celui que vous avez créé pour cette application.

Une fois sur l’interface, il faut vous rendre sur la page “Authentification” dans le menu latérale gauche de Firebase. Puis il faut vous orienter sur l’onglet “Modèles”.

Plusieurs modèles s’offrent à nous, celui qui nous intéresse c’est le modèle “Réinitialisation du mot de passe” donc cliquez dessus.

À partir de maintenant, vous pouvez modifier plusieurs choses en cliquant sur l’icone “crayon” :

• La langue du modèles qui vous permettra de changer la langue utilisé dans le corps de l’email.
• Le “Nom public du projet” celui qui sera révélé au public.
• Le nom de l’expéditeur et son adresse email.
• L’adresse email de réponse, à laquelle l’utilisateur peut répondre. 
• L’objet de l’email.

• Le message du mail. Le corps du mail peut être complètement personnalisé, je vous recommande tout de même de conserver la chaîne d’espaces réservés “%LINK%” pour que votre utilisateur puisse accéder au lien de réinitialisation.
• L’url du lien pour la réinitialisation. Firebase génère son propre lien mais vous pouvez très bien rediriger votre utilisateur vers votre page web pour la réinitialisation.

Pour plus d’info, je vous invite à consulter la page suivante.

Le design de l’activité

Pour rester dans la concordance, j’utilise le même thème qu’on retrouve dans les autres activités. Un fond blanc avec les boutons de couleur verte claire. Le style utilisé se trouve dans le fichier style.xml. L’activité pour la réinitialisation est l’activité la plus simple. Le LinearLayout va contenir un EditTexte et un Bouton.

<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".ForgotPasswordActivity">

    <EditText
            android:id="@+id/et_email"
            style="@style/EditTexteStyle"
            android:ems="10"
            android:hint="@string/email"
            android:inputType="textEmailAddress" />
    <Button
            android:id="@+id/btn_submit"
            style="@style/BoutonStyle"
            android:text="@string/save_password_email"
            android:textStyle="bold" />

</LinearLayout>

L’editText représente le champ de saisie, pour lequel l’’utilisateur devra inscrire son adresse email. Son adresse mail servira à lui envoyé par mail le lien pour réinitialiser son mot de passe.

Le bouton nommé “envoie du mot de passe par email” va permettre d’envoyer le mail de réinitialisation à l’adresse email saisie dans l’editText.

La partie applicative de l’activité

La partie applicative correspond à l’implémentation de codes pour rendre l’activité fonctionnelle. Les événements sur un bouton par exemple. Dans cette activité, ce qui  nous intéresse c’est d’envoyer un mail de réinitialisation de mot de passe à l’adresse email indiqué dans l’editTexte. Pour cela je vais faire appel à quatre méthodes : La méthode “reInitialisationPassword”, La méthode  “initialisation”, La méthode “onCreate”, La méthode “MAJInfoUser”.

Les variables

class ForgotPasswordActivity : AppCompatActivity() {

    private val TAG = "ForgotPasswordActivity"

    // Les composants de l'interfaces
    private var et_email: EditText? = null
    private var btn_envoie: Button? = null

    //Les références Firebase
    private var auth: FirebaseAuth? = null
}

La méthode  initialisation

private fun initialisation() {
    et_email = findViewById<View>(R.id.et_email) as EditText
    btn_envoie = findViewById<View>(R.id.btn_submit) as Button
    auth = FirebaseAuth.getInstance()
    btn_envoie!!.setOnClickListener { reInitialisationPassword() }
}

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 “envoie du mot de passe par email”, la méthode “reInitialisationPassword” 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 reInitialisationPassword.

-> 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_forgot_password)
    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 reInitialisationPassword

private fun reInitialisationPassword() {
    val email = et_email?.text.toString()
    if (!TextUtils.isEmpty(email)) {
        auth!!
            .sendPasswordResetEmail(email)
            .addOnCompleteListener { task ->
                if (task.isSuccessful) {
                    val message = "Email envoyé."
                    Log.d(TAG, message)
                    Toast.makeText(this, message, Toast.LENGTH_SHORT).show()
                    MAJInfoUser()
                } else {
                    Log.w(TAG, task.exception!!.message)
                    Toast.makeText(this, "Aucun utilisateur trouvé avec cette adresse email.", Toast.LENGTH_SHORT).show()
                }
            }
    } else {
        Toast.makeText(this, "Entrez votre Email", Toast.LENGTH_SHORT).show()
    }
}

la méthode reInitialisationPassword va venir envoyer par mail un lien pour réinitialiser le mot de passe utilisateur à partir de l’adresse email inscrite dans le champ de saisie. La méthode sendPasswordResetEmail est appelée. Cette méthode permet d’envoyer un lien de réinitialisation à l’adresse mail inséré en paramètre de cette fonction. Si l’adresse email correspond bien à un utilisateur alors un mail est envoyé à cette adresse email. La méthode MAJInfoUser est ensuite appelée pour changer d’activité et retourner l’utilisateur à l’écran de  connexion. Si l’adresse email ne correspond pas alors un message d’erreur s’affiche à l’utilisateur.

sendEmailVerification().addOnCompleteListener(this) : permet d’ajouter une tâche supplémentaire à la méthode sendPasswordResetEmail() à savoir avertir du succès ou de l’échec, de l’envoi de la réinitialisation à l’utilisateur.

La méthode MAJInfoUser

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

La méthode MAJInfoUser va nous rediriger sur une notre page à savoir la page de connexion (loginActivity)  pour que l’utilisateur puisse se connecter après avoir réinitialisé son mot de passe.

La 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.