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 “Frenc