IONIC AUTH: Comment gérer la redirection de connexion lors de l’ouverture de l’application ?

Bonjour à tous! Je vous propose aujourd’hui un tutoriel Ionic 4 que vous avez nombreux à me demander: la gestion de la redirection lors de l’ouverture de l’application.

En clair comment créer une interface de connexion pour obliger nos utilisateurs à se connecter à notre application ?

Pour cela nous allons utiliser le plugin AngularFire indispensable à nos applications Ionic.

Voilà également les 4 étapes à suivre pour créer une interface pour votre application Ionic avec Firebase:

• Connecter son application Ionic à Firebase
• Rediriger l’utilisateur s’il n’est pas connecté
• Connecter un utilisateur par mail & mot de passe
• Récupérer l’identifiant de l’utilisateur connecté

Comment connecter son application Ionic à Firebase ?

Pour créer une interface dans notre application Ionic, nous allons commencer par l’associer à Firebase.

Si vous n’avez pas d’application en cours de développement, créant-en une nouvelle avec la commande suivante:

ionic start Auth blanck --type=angular

Il est important de créer une application de type Angular pour pouvoir utiliser le plugin AngularFire par la suite.

Une fois que l’application est créé, vous pouvez créer une nouvelle page dans votre application avec la commande suivante:

ionic g page login

Cela va vous créer la page Login dans votre application Ionic, page dans laquelle vous aller permettre à vos utilisateur de se connecter.

La prochaine étape consiste à installer le plugin AngularFire dans votre application Ionic.

Je propose un tutoriel détaillé à ce sujet si vous n’y êtes pas encore familier: https://drissas.com/ionic-4-firebase/

Entrez donc la commande suivante pour installer AngularFire:

npm install firebase @angular/fire --save

Puis rendez-vos dans le fichier suivant pour déclarer ce plugin et ses modules:

src/app/app.module.ts

Importez pour commencer les deux modules dont nous allons avoir besoin:

• AngularFireModule pour associer Ionic et Firebase
• AngularFireAuthModule pour utiliser les fonctions de connexion et déconnexion de Firebase

Déclarez ensuite la constante firebaseConfig avec vos codes de configuration Firebase:

import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';

export const firebaseConfig = {
  apiKey: '***********************************-***',
  authDomain: 'auth-******.firebaseapp.com',
  databaseURL: 'https://auth-******.firebaseio.com',
  projectId: 'auth-******',
  storageBucket: 'auth-******.appspot.com',
  messagingSenderId: '************',
  appId: '*:************:web:************'
};

Une fois ces déclarations terminées, vous pouvez déclarer vos modules dans le tableau import.

Cela vous permet d’associer votre application Ionic avec votre projet Firebase avec la fonction initializeApp et en paramètre vos codes de configuration Firebase:

imports: [
  BrowserModule,
  IonicModule.forRoot(),
  AppRoutingModule,
  AngularFireModule.initializeApp(firebaseConfig),
  AngularFireAuthModule,
],

Votre application est maintenant associée à votre projet Firebase.

Comment rediriger un utilisateur s’il n’est pas connecté ?

Maintenant que notre application est connectée à Firebase, nous pouvons directement passer à la redirection de l’utilisateur.

Par défaut l’utilisateur sera effectivement déconnecté puisque nous ne lui avons pas encore proposé de méthode de connexion.

Pour commencer, rendez-vous dans le fichier suivante pour tester l’état de connexion de l’utilisateur:

src/app/app.component.ts

Importez ensuite deux nouveaux modules à votre fichier, Router pour gérer la redirection et AngularFireAuth vous récupérer l’état de connexion:

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

Déclarez ensuite ces modules dans votre consctructor() pour pouvoir les utiliser dans le reste de votre page:

constructor(
  private router: Router,
  public afAuth: AngularFireAuth,
  private platform: Platform,
  private splashScreen: SplashScreen,
  private statusBar: StatusBar
) {
	this.initializeApp();
}

Au lancement de notre application, la fonction initializeApp() va être exécutée comme son nom l’indique pour initialiser notre application.

Nous allons la modifier pour lui ajouter une condition de redirection.

Pour cela nous allons utiliser la fonction authState du module AngularFireAuth, qui renvoie directement l’état de connexion de l’utilisateur.

this.afAuth.authState.subscribe();

Nous pouvons par exemple récupérer l’identifiant de l’utilisateur de cette manière:

this.afAuth.authState.subscribe(auth => {
	console.log('Connecté: ' + auth.uid);
}};

Mais plutôt que de simplement récupérer ces informations, nous allons ajouter une condition pour vérifier le contenu de l’objet auth.

Si l’utilisateur n’est pas connecté, la fonction authState ne renvoie rien et l’objet auth est vide.

Dans ce cas l’utilisateur n’est pas connecté et on peut le rediriger vers la page login:

this.router.navigateByUrl('/login');

Vous pouvez maintenant modifier votre fonction initializeApp() pour qu’elle intègre cette condition et rediriger l’utilisateur:

initializeApp() {
  this.platform.ready().then(() => {
    this.afAuth.authState.subscribe(auth => {
      if (!auth) {
        console.log('non connecté');
        this.router.navigateByUrl('/login');
      } else {
        this.router.navigateByUrl('/');
        console.log('Connecté: ' + auth.uid);
      }
    });
    this.statusBar.styleDefault();
    this.splashScreen.hide();
  });
}

Votre utilisateur est maintenant redirigé vers la page Login en cas de déconnexion.

Comment connecter un utilisateur par mail et mot de passe ?

Voyons maintenant comment connecter notre utilisateur par email et mot de passe.

Fonctionnalité que j’ai déjà traité dans un tutoriel dédié: https://drissas.com/connexion-mail-ionic-firebase/

Nous allons proposer la connexion dans la page Login, vous commencer par vous rendre dans son fichier HTML:

src/app/login/login.page.html

Nous allons créer notre formulaire de connexion et d’inscription dans le même temps:

<ion-item>
  <ion-label><b>Email</b></ion-label>
  <ion-input [(ngModel)]="loginData.email" placeholder="Entrez votre email"></ion-input>
</ion-item>

<ion-item>
  <ion-label><b>Mot de passe</b></ion-label>
  <ion-input [(ngModel)]="loginData.password" type="password" placeholder="Entrez votre mot de passe"></ion-input>
</ion-item>

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

  <p style="text-align: center;">ou</p>

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

Rendez-vous ensuite dans le fichier TypeScript pour gérer les variables et la fonction de connexion:

src/app/login/login.page.ts

Commencez par importer les modules nécessaire à notre page:

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

Puis déclarer la variable loginData pour stocker les données de notre formulaire:

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

Déclarez ensuite comme d’habitude les modules que vous importez dans votre constructor:

constructor(
  public toastController: ToastController,
  public afAuth: AngularFireAuth
) { }

Puis grâce au module AngularFireAuth nous pouvons créer une fonction de connexion très rapide:

login() {
  this.afAuth.auth.signInWithEmailAndPassword(this.loginData.email, this.loginData.password)
  .then(auth => {
    console.log('utilisateur connecté');
  })
  .catch(err => {
    console.log('Erreur: ' + err);
    this.errorMail();
  });
}

En cas d’erreur, par exemple une mauvaise adresse mail, on affiche un message d’erreur au haut de l’écran:

async errorMail() {
  const toast = await this.toastController.create({
    message: 'Email ou mot de passe incorrect',
    duration: 2000,
    position: 'top'
  });
  toast.present();
}

Il ne nous reste plus qu’à proposer une fonction d’inscription, qui est très similaire, cette fois on utilise la fonction createUserWithEmailAndPassword():

signUp() {
  this.afAuth.auth.createUserWithEmailAndPassword(this.loginData.email, this.loginData.password)
  .then(auth => {
    console.log('utilisateur connecté');
  })
  .catch(err => {
    console.log('Erreur: ' + err);
    this.errorMail();
  });
}

Vos utilisateurs peuvent maintenant se connecter et accéder à la page d’accueil de votre application.

Comment récupérer l’identifiant d’un utilisateur connecté ?

Voyons maintenant pour finir comment récupérer l’identifiant et d’autres informations de l’utilisateur une fois connecté.

Pour cela rendez-vous dans le fichier TypeScript de votre page d’accueil:

src/app/home/home.page.ts

Puis importez tout simplement le module AngularFireAuth qui nous servira à accéder à ces informations:

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

Ensuite nous déclarons la variable et chaîne de caractère userId pour stocker par la suite l’identifiant de l’utilisateur et l’afficher dans le HTML:

userId: string;

Je vous propose de récupérer deux autres informations concernant notre utilisateur, son email et sa méthode de connexion.

Pour cela nous créons deux autres variables pour les stocker de la même manière:

mail: string;
method: any;

Ensuite dans le constructor nous pouvons déclarer notre module AngularFireAuth:

constructor(
	public afAuth: AngularFireAuth
)

Puis dans les accolades de notre constructor(){} nous allons utiliser la fonction du module AngularFireAuth pour récupérer les informations de l’utilisateur.

Nous utilisons la même fonction authState pour retourner ses informations:

this.afAuth.authState.subscribe(auth => {}};

Puis nous réalisons la même condition pour vérifier l’état de connexion:

if (!auth) {
  console.log('non connecté');
} else {
  console.log('connecté: ' + auth.uid);
}

Si l’utilisateur n’est pas connecté, on lui affiche tout simplement dans la console ‘non connecté’ et il sera automatiquement redirigé vers la page Login.

S’il est bien connecté, on affiche dans la console son identifiant de connexion.

On peut maintenant affecter à nos variables les informations de l’utilisateurs:

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

Voilà donc le résultat final de notre fonction constructor():

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

Pour faire vos tests, proposer également un bouton et donc une fonction de déconnexion:

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

Le fichier HTML de votre page d’accueil peut maintenant ressembler à ça:

<ion-item>
  <ion-label>
    <p>Méthode de connexion</p>
    <h2><b>email & {{ 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>

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

Voilà c’est la fin de ce tutoriel Ionic 4 avec Firebase. SI vous rencontrez des problèmes, mettez-les moi dans les commentaires de l’article.

Bonne journée à tous!