Créer sa page de création de compte Firebase

Bonjour à tous ! On se retrouve aujourd’hui pour un nouvel article qui va vous préciser comment vous allez pouvoir créer votre page de création de compte. Avec cette page vous allez pouvoir enregistrer de nouveau utilisateur et avoir accès à des données de vos utilisateurs. Je ne suis pas juriste et je vous invite à vous renseigner sur la manipulation à caractère personnel dans vos applications. Pour ma part, je réalise ce tutoriel à titre d’exemple. Pour aller plus vite, je fais abstraction sur la RGPD. 

Si vous ne savez pas comment installer Firebase sur vos applications, je vous invite à lire mon article “Comment installer Firebase sur votre application ?”.  Cet article vous explique ce que c’est Firebase et comment l’installer sur votre application dans Android-Studio.

Le design de la page de création

Ajout d’un style

Dans le fichier styles, j’ai ajouté 3 nouveaux styles. Chaque style correspond  à un composant (TextView, EditText, Bouton). Rajouter un style me permet de réutiliser du code pour chacun de mes composants, avoir une compréhension plus pratique du code et alléger le fichier XML de l’activité en lignes de code.

<style name="TextViewStyle">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_margin">8dp</item>
</style>

<style name="EditTexteStyle">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_margin">8dp</item>
</style>

<style name="BoutonStyle">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_margin">8dp</item>
    <item name="android:textColor">@color/blanc</item>
    <item name="android:background">@color/vert</item>
</style>

J’ai ajouté une marge (android:layout_margin) pour une bonne lisibilité et deux couleurs au fichier colors.xml afin d’associer des couleurs uniques à mes boutons. 

<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="vert">#00A04A</color>
    <color name="blanc">#ffffff</color>
</resources>

Référencement des chaines de caractères

J’ai ajouté, mes différentes chaines de caractères dans le fichier strings.xml qui va me permettre de les réutiliser partout dans mon application sans avoir la nécessiter de réécrire mes chaines. Ecrire mes chaines de caractères dans le fichier strings.xml va me permettre de faciliter la mise en place d’une nouvelle langue dans mon application, si je décide un jour de le faire.

<resources>
    <string name="app_name">TestFireBase</string>
    <string name="email">Email</string>
    <string name="password">Mot de passe</string>
    <string name="first_name">Prénom</string>
    <string name="last_name">Nom de famille</string>
    <string name="login_title">Login</string>
    <string name="create_act">Créer votre compte</string>
    <string name="save_password_email">envoie du mot de passe par email</string>
</resources>

Design de l’activité

J’ai réalisé un design simple, 4 editText pour saisir les différents champs de saisie (prénom, nom, email, mot de passe) et un bouton “Créer votre compte” pour valider.

<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=".CreateAccountActivity">

    <EditText
            android:id="@+id/et_first_name"
            style="@style/EditTexteStyle"
            android:ems="10"
            android:hint="@string/first_name"
            android:inputType="textPersonName" />
    <EditText
            android:id="@+id/et_last_name"
            style="@style/EditTexteStyle"
            android:ems="10"
            android:hint="@string/last_name"
            android:inputType="textPersonName" />
    <EditText
            android:id="@+id/et_email"
            style="@style/EditTexteStyle"
            android:ems="10"
            android:hint="@string/email"
            android:inputType="textEmailAddress" />
    <EditText
            android:id="@+id/et_password"
            style="@style/EditTexteStyle"
            android:ems="10"
            android:hint="@string/password"
            android:inputType="textPassword" />
    <Button
            android:id="@+id/btn_register"
            style="@style/BoutonStyle"
            android:text="@string/create_act"
            android:textStyle="bold" />
</LinearLayout>

Le paramètre “style” me permet d’attacher un style à mon composant. En plaçant “@style/” en valeurs de ce paramètre, je viens dans le fichier styles.xml chercher le design correspondant. La valeur “@string/” que j’utilise pour le paramètre “hint”, va me permettre d’aller dans le fichier strings, chercher ma chaîne de caractères. Le paramètre “ems” me permet de fixer une limite de nombre de caractères. Le paramètre “textStyle” de définir un style au texte (Gras, italique, barré).

La configuration dans l’interface Firebase

Pour pouvoir créer un compte à partir d’une adresse mail, il faut activer la vérification par email. Pour cela il faut se connecter à son compte sur le site de “Firebase”. Puis se rendre sur le projet que vous avez créé pour votre “application”.

Une fois que vous vous êtes connecté, il faut vous rendre sur la page “Authentification” dans le menu latérale gauche de Firebase. Ensuite il faut se rendre sur l’onglet “Mode de connexion”.

Vous avez alors plusieurs choix de fournisseurs de connexion, qui s’offre à vous. Cliquez sur le premier à savoir Adresse e-mail/Mot de passe et Activer le premier bouton.

Félicitation vous venez d’activer la vérification par email ! il vous reste à implémenter votre code sur Android Studio. Et pour finir, tester le retour par email lorsque vous avez créé votre compte dans votre application.

Dans Firebase, il est possible de modifier le modèle pour le mail de vérification. Pour cela, Il faut se rendre sur l’onglet “Mode de connexion” toujours sur la page “Authentification” et sélectionner le modèle  “Validation de l’adresse e-mail”.

Dans cette interface en cliquant sur l’icone (icone crayon), vous pouvez modifier plusieurs choses :

• La langue du modèle, en sélectionnant “French” dans la liste déroulante par exemple.

• Le “Nom public du projet” celui qui sera révélé au public.

• L’adresse mail de l’expéditeur.

• L’objet de l’email.

• L’url du lien pour la vérification. Firebase génère son propre lien mais vous pouvez très bien rediriger votre utilisateur vers votre page web pour la vérification.

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

L’implémentation du code

Les variables utiles

La méthode initialisation

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.

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

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

-> La variable database va récupérer une autre instance pour nous permettre d’accéder aux données de la base de données.

-> La variable databaseReference va s’appuyer sur cette dernière (database) pour nous permettre d’accéder directement aux utilisateurs de notre base de données Firebase.

La méthode onCreate

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 creationDeCompte

Notre méthode creationDeCompte comme son nom l’indique va venir créer un nouveau compte à partir des champs de saisie lorsqu’ils sont remplis. Le nouveau compte va être enregistré dans Firebase. La progressBar va venir nous indiquer l’information que la requête de création est en cours. Si l’authentification à réussi, les informations de l’utilisateur sont inscrit dans Firebase et la méthode verificationEmail est appelée. La méthode MAJInfoUser est ensuite appelée pour changer d’activité et afficher les données du nouveau utilisateur. Si l’authentification à échoué alors un message d’erreur s’affiche à l’utilisateur.

auth!!.createUserWithEmailAndPassword : Permet de créer le compte à partir du login et du mot de passe. auth!!.createUserWithEmailAndPassword.addOnCompleteListener(this) : Va venir ajouter une tâche à la méthode createUserWithEmailAndPassword.

La méthode verificationEmail

Cette méthode va nous permettre d’envoyer un email de confirmation à l’adresse email renseigné par l’utilisateur. L’utilisateur est récupéré à partir de la donnée auth!!.currentUser. L’envoie de l’email à la bonne adresse est envoyé à partir de la variable “utilisateur” et la méthode sendEmailVerification.

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

La méthode MAJInfoUser

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

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.