Comment utiliser dans Ionic la connexion par mail ?

Dans ce tuto, nous allons permettre à vos utilisateurs de se connecter par mail dans Ionic. Nous allons utiliser la connexion mail / mot de passe de Firebase dans Ionic pour authentifier nos utilisateurs.

Nous suivrons les étapes suivantes dans ce tuto Ionic:

• La méthode connexion par mail dans Firebase
• Ajouter un utilisateur manuellement
• Connecter un utilisateur par mail depuis Ionic
• Inscription d’un nouvel utilisateur depuis Ionic
• Afficher les informations de l’utilisateur

Pour pouvoir suivre ce tuto Ionic 4, vous devez avoir associé votre application Ionic avec un projet Firebase. Si vous ne l’avez pas encore fait, suivez ce tuto: https://drissas.com/associer-firebase-application-ionic-4/

Comment ajouter la méthode de connexion par mail à Firebase ?

Pour permettre à nos utilisateurs de s’identifier par e-mail et mot de passe dans nos applications Ionic, il nous faut activer cette méthode de connexion dans Firebase.

Les étapes pour activer la méthode de connexion par mail à Firebase sont les suivantes:

• Créer un projet Firebase
• Menu authentification
• Onglet Mode de connexion
• Activer le fournisseur Adresse e-mail/Mot de passe

Si vous n’avez pas encore de projet Firebase, vous devez en créer un et ensuite ouvrir le menu « Authentification ». C’est dans ce menu que nous allons gérer tout ce qui touche à la connexion de nos utilisateurs.

Rendez-vous ensuite dans l’onglet « Mode de connexion » qui regroupe toutes les méthodes et fournisseurs possibles de Firebase.

Vous remarquerez que la méthode « Adresse e-mail/Mot de passe » apparaît en première position et fait office de référence pour les autres méthodes.

Retenez bien que pour toutes ces méthodes, l’adresse e-mail sert à chaque fois de référence unique à un utilisateur, donc la méthode que nous utilisons aujourd’hui s’appelle en réalité « Mot de passe ».

Pour activer la méthode « Adresse e-mail/Mot de passe » , cliquez sur celle-ci et cochez la case « Activer » tout simplement. Cliquez ensuite sur le bouton « Enregistrer ».

Comment ajouter un utilisateur manuellement dans Firebase ?

Avant de commencer à créer notre formulaire de connexion par mail dans Ionic, nous pouvons déjà ajouter manuellement un utilisateur dans notre projet Firebase.

Pour cela nous allons suivre les étapes suivantes:

• Menu authentification
• Onglet Utilisateurs
• Bouton « Ajouter un utilisateur »
• Entrer l’e-mail et le mot de passe
• Cliquer sur « Ajouter un utilisateur »

Effectivement, cette méthode nous permet de tester plus rapidement la méthode de connexion avec Ionic. Pour ajouter ce premier utilisateur, nous restons dans le menu « Authentification » mais nous passons dans l’onglet « Utilisateurs« .

C’est ici que Firebase nous affiche tous les utilisateurs de notre projet Firebase. Nous pouvons effectuer des recherches, les classer selon la méthode de connexion (email, Facebook, Google, etc) ou encore copier leur identifiant.

Bref, Firebase nous proposer un gestion très simplifiée de nos utilisateurs pour nos applications Ionic ce qui est très appréciable.

Pour ajouter un nouvel utilisateur, cliquez sur le bouton « Ajouter un utilisateur », puis entrez un e-mail et un mot de passe et cliquez à nouveau sur le bouton « Ajouter un utilisateur ».

Votre premier utilisateur qui possède son identifiant unique devrait maintenant apparaître dans votre projet Firebase, et nous servira à tester notre formulaire de connexion.

Comment connecter un utilisateur par mail dans Ionic ?

Passons maintenant au vif du sujet et créons le formulaire de connexion par mail dans notre application Ionic.

Pour cela nous allons suivre les étapes suivantes:

• Déclarer la variable pour stocker les informations
• Créer les deux champs pour l’e-mail et le mot de passe
• Afficher le bouton de connexion
• Coder la fonction de connexion

Pour commencer, dans la page de votre choix et dans son fichier TypeScript, nous devons importer le plugin d’AngularFire nécessaire à notre formulaire.

Il s’agit du plugin AngularFireAuth qui gère toutes les fonctions d’authentifications de Firebase, et nous permet de les utiliser dans Ionic.

import { AngularFireAuth } from '@angular/fire/auth';

Continuons en déclarant la première variable utile pour notre formulaire, l’objet dataUser qui contiendra ses informations.

Nous donnons à cette objet deux champ, un pour l’e-mail et l’autre pour le mot de passe:

dataUser = {
   email: '',
   password: ''
};

Ensuite nous déclarons une deuxième variable qui nous permettra de stocker l’état de connexion de l’utilisateur. Cette variable booléen (vrai ou faux) nous permettra d’afficher ou de cacher du contenu HTML par la suite.

connected: boolean;

Enfin nous reprenons le plugin AngularFireAuth et nous le déclarons comme paramètre du constructor() pour pouvoir l’utiliser dans le reste de notre page:

constructor(
    public afAuth: AngularFireAuth
  ) {}

De même à l’intérieur de notre constructor (le code qui s’exécute au chargement de la page) nous vérifions l’état de connexion de l’utilisateur avec le plugin AngularFireAuth.

Si celui-ci n’est pas connecté, on affecte à notre variable booléen connected « false« , mais s’il l’est alors on lui affecte la valeur « true« .

constructor(
  public toastController: ToastController,
  public afDB: AngularFireDatabase,
  public afAuth: AngularFireAuth
) {
  this.afAuth.authState.subscribe(auth => {
    if (!auth) {
      console.log('non connecté');
      this.connected = false;
    } else {
      console.log('connecté: ' + auth.uid);
      this.connected = true;
    }
  });
}

Cela nous permettra ainsi d’afficher dans notre contenu HTML deux types d’éléments, ceux pour quand l’utilisateur est connecté ou non.

<div *ngIf="!connected">
  <!-- À afficher si l'utilisateur n'est pas connecté -->
  
</div>

<div *ngIf="connected">
  <!-- Si l'utilisateur est connecté -->
  
</div>

Par exemple si l’utilisateur n’est pas connecté, nous lui affichons le formulaire de connexion, mais s’il est déjà connecté, nous lui affichons le bouton de déconnexion.

On commence donc par créer le formulaire de connexion avec un champ input pour l’adresse e-mail comme ceci:

<ion-item>
  <ion-label><b>Email:</b></ion-label>
  <ion-input type="email" [(ngModel)]="dataUser.email"></ion-input>
</ion-item>

Puis un champ input pour le mot de passe l’utilisateur:

<ion-item>
  <ion-label><b>Mot de passe:</b></ion-label>
  <ion-input type="password" [(ngModel)]="dataUser.password"></ion-input>
</ion-item>

Dans les deux cas, le champ input est associé à l’objet dataUser et à son champ respectif email ou password. Grâce à l’attribut ngModel, la variable et les champs sont liés.

On créé enfin le bouton de connexion qui est associé à la fonction login() que nous allons déclarer juste après:

<ion-button expand="block" color="primary" (click)="login()">Connexion</ion-button>

Voilà finalement la fonction login() qui utilise le plugin AngularFireAuth et la sous fonction signInWithEmailAndPassword() avec comme paramètre les valeurs de notre formulaire:

login() {
  this.afAuth.auth.signInWithEmailAndPassword(this.dataUser.email, this.dataUser.password);
   this.dataUser = {
     email: '',
     password: ''
   };
}

Une fois l’utilisateur connecté, nous redonnons aux champs du formulaire ses valeurs initiales c’est-à-dire des champs vides.

À vous maintenant de tester si le formulaire fonctionne bien avec l’adresse mail et le mot de passe que vous avez créé dans Firebase précédemment.

Vous pouvez également ajouter le bouton de déconnexion dans l’espace HTML où l’utilisateur est bien connecté.

<ion-button expand="block" color="danger" (click)="logout()">Déconnexion</ion-button>

La fonction logout() de déconnexion est très simple, elle fait appel au plugin AngularFireAuth et à la sous fonction signout():

logout() {
  this.afAuth.auth.signOut();
}

Comment inscrire un nouvel utilisateur par mail dans Ionic ?

Maintenant que nous sommes capables de connecter et de déconnecter nos utilisateurs, il nous faut en ajouter de nouveaux depuis l’application Ionic.

Ainsi, pour permettre à nos utilisateurs de s’inscrire avec e-mail et mot de passe dans Ionic, nous allons suivre les étapes suivantes:

• Déclarer la variable pour stocker les informations
• Créer les deux champs pour l’e-mail et le mot de passe
• Ajouter le bouton d’inscription
• Rédiger la fonction d’inscription

Nous aurions pu créer une nouvelle page pour proposer un autre formulaire d’inscription, et par exemple demander des informations supplémentaires somme le pseudo ou la date de naissance.

Mais pour une première fois, autant réutiliser le même formulaire puisque après tout il demande les mêmes informations.

Nous créons donc tout simplement un bouton supplémentaire appelé Inscription et associé à la fonction signUp():

<ion-button expand="block" color="tertiary" (click)="signUp()">Inscription</ion-button>

La fonction signUp() utilise à nouveau le plugin AngularFireAuth mais cette fois la sous-fonction createUserWithEmailAndPassword() pour créer un nouvel utilisateur comme son nom l’indique.

Comme paramètre on lui donne également les valeurs des champs e-mail et mot de passe de notre formulaire:

signUp() {
   this.afAuth.auth.createUserWithEmailAndPassword(this.dataUser.email, this.dataUser.password);
   this.dataUser = {
     email: '',
     password: ''
   };
}

En conclusion n’oubliez pas de réinitialiser à zéro les champs de votre formulaire pour une prochaine connexion ou inscription.

Comment afficher les informations de l’utilisateur ?

La dernière étape consiste à récupérer et afficher les informations de notre utilisateur une fois connecté notamment.

Pour cela nous allons suivre les étapes suivantes:

• Vérifier l’état de connexion de l’utilisateur
• Récupérer l’objet user qui contient toutes ces informations
• Stocker son adresse email, son identifiant dans des variables
• Les afficher dans le contenu HTML

Pour commencer on déclare trois variables pour les trois informations que nous allons récupérer:

userId: string;
mail: string;
method: any;

Comme vous pouvez le voir, vous allons récupérer son identifiant, son adresse e-mail ainsi que sa méthode de connexion.

Ces informations peuvent vous être utile dans un contexte de page de profil par exemple.

Ensuite nous retournons dans le code de notre constructor() {} et reprenons l’objet auth qui est renvoyé par la fonction authState du plugin AngularFireAuth.

Je vous le rappelle également, si l’utilisateur est connecté la fonction nous a renvoyé toutes les informations disponibles de l’utilisateur dans Firebase.

Il nous suffit alors d’affecter à nos variables les différents sous-champs de l’objet auth renvoyé:

this.userId = auth.uid;
this.mail = auth.email;
this.method = auth.providerData[0].providerId;

Voilà enfin le code complet de notre constructor dans notre page TypeScript:

this.afAuth.authState.subscribe(auth => {
  if (!auth) {
    console.log('non connecté');
    this.connected = false;
  } else {
    console.log('connecté: ' + auth.uid);
    this.connected = true;
    this.userId = auth.uid;
    this.mail = auth.email;
    this.method = auth.providerData[0].providerId;
  }
});

Nous pouvons ainsi passer à l’affichage de ces informations dans le contenu HTML de notre page. On utilise des <ion-item> pour présenter proprement ces informations, par exemple ici l’adresse e-mail:

<ion-item>
  <ion-label>
    <p>Adresse email</p>
    <h2><b>{{ mail }}</b></h2>
  </ion-label>
</ion-item>

Voilà toutes les informations de notre utilisateur afficher dans notre contenu HTML, uniquement dans le cas où celui-ci est connecté:

<ion-item>
  <ion-label>
    <p>Méthode de connexion</p>
    <h2><b>email and {{ method }}</b></h2>
  </ion-label>
</ion-item>

<ion-item>
  <ion-label>
    <p>Identifiant</p>
    <h2><b>{{ userId }}</b></h2>
  </ion-label>
</ion-item>

<ion-item>
  <ion-label>
    <p>Adresse email</p>
    <h2><b>{{ mail }}</b></h2>
  </ion-label>
</ion-item>

Conclusion

Pour conclure vous pouvez télécharger le code source de cette application Ionic avec connexion par mail en cliquant sur l’image ci-dessous:

Également pour aller plus loin avec Ionic, je vous invite à commencer mon programme gratuit et si vous êtes déjà inscrit à commencer le cours Application Facile.