Vous êtes sur la page 1sur 13

Institut Supérieur des Etudes Technologiques de Sousse

Département de Technologies de l’Informatique


Matière : Atelier FrameWork Côté Client Classe : DSI 2.1
A. U. : 2019/2020 – Semestre 1

Atelier 10 : Authentification
L’objectif de cet atelier est de réaliser l’authentification des utilisateurs de notre
application Web. On se demande de :

• Faire une interface de création d’un nouvel utilisateur


• Faire une interface de connexion
• Faire un lien de déconnexion
• Faire apparaître l’email de l’utilisateur connecté
• L’accès au lien Films n’est possible que si l’utilisateur est authentifié

Pour se faire, suivre les étapes suivantes :

Ajout du module Connexion


1. Taper les commandes suivantes :
ng g module site\connexion
ng g c site\connexion\login
ng g c site\connexion\new-compte
2. Vous aurez la structure suivante :

1
3. Ajouter le module Connexion dans AppModule.

Routage des liens d’authentification


4. Préparer le routage dans le module Connexion (connexion.module.ts)

5. Dans le menu de navigation, ajouter les routerLink aux composants de la


connexion : dans navmenu.component.html, ajouter à la suite dans la balise
nav

2
La méthode onSignOut() sera écrite ultérieurement.

6. Vérifier que le routage vers les pages des composants login et new-compte
fonctionne. Vous aurez l’affichage suivant :

Authentification Firebase
Notre application utilisera l'authentification par adresse mail et mot de passe
proposée par Firebase. Pour cela, il faut d'abord l'activer dans la console Firebase :
• Allez dans Authentification

• Choisir Mode de connexion

3
• Choisir Adresse email/Mot de passe

• Activer Adresse email/Mot de passe et Enregistrer

Service d’authentification
7. Créer un nouveau fichier appelé auth.service.ts sous le dossier services.

Ce fichier contiendra les méthodes qui s’occupent de l’authentification soient les


méthodes :
• une méthode permettant de créer un nouvel utilisateur
• une méthode permettant de connecter un utilisateur existant
• une méthode permettant la déconnexion de l'utilisateur.
Le début du fichier auth.service.ts :

La méthode de création d’un nouvel utilisateur du fichier auth.service.ts :

4
La méthode de connexion d’un utilisateur existant du fichier auth.service.ts :

La méthode de déconnexion d’un utilisateur connecté du fichier auth.service.ts :

5
Composant de création d’un nouvel utilisateur
On souhaite obtenir l’interface suivante de création d’un nouvel utilisateur:

8. Pour cela ajouter le code suivant dans le fichier new-


compte.component.html

9. Il reste à écrire la méthode creerCompte dans le fichier new-


compte.component.ts

6
10. Vérifier que l’application permet de créer un nouveau compte.

Dans Firebase : Authentification Utilisateurs, rafraîchir la page :

7
Composant de connexion d’un utilisateur existant
On souhaite obtenir l’interface suivante de connexion d’un utilisateur existant :

11. Pour cela ajouter le code suivant dans le fichier login.component.html

12. Il reste à écrire la méthode seConnecter dans le fichier


login.component.ts

8
13. Vérifier que l’application permet de faire connecter un utilisateur
existant.

9
Autorisation d’accès au lien films qu’aux utilisateurs connectés
Une guard est en effet un service qu'Angular exécutera au moment où l'utilisateur
essaye de naviguer vers la route sélectionnée. Ce service implémente l'interface
canActivate.

14. Créer un fichier auth-guard.ts dans le dossier service. Dans ce fichier, on


va implémenter l’interface canActivate.

15. Dans le module films.module.ts, modifier le lien vers films comme suit :

16. Vérifier que si on clique sur Films la page de connexion apparaît.

Déconnexion
17. Dans navmenu.component.ts, on doit implémenter la méthode
onSignOut() qui est appelée dans le template
navmenu.component.html

10
18. Vérifier que le lien de déconnexion fonctionne.

19. Dans la barre de navigation, on souhaite :


• Faire apparaitre l’email du user courant
• Si pas de user connecté, faire apparaitre uniquement les liens Se
connecter et Créer Compte
• Si un user est connecté faire apparaitre uniquement le lien
Déconnexion.
Pour cela apporter les modifications suivantes au fichier
navmenu.componenet.html

11
Apporter les modifications suivantes au fichier navmenu.componenet.ts

20. Vérifier que les liens de connexion fonctionnent comme voulu dans la
question 19

12
Aucun user n’est connecté

On clique sur Créer Compte

Le compte est créé avec succès

13