Authentification angulaire avec JWT

La sécurité est une partie importante de chaque application Web et les développeurs doivent veiller à concevoir des applications avec une authentification sécurisée. Dans ce didacticiel, vous apprendrez à mettre en œuvre l'authentification basée sur JWT dans des applications angulaires à l'aide d'un simple serveur Express..

Le code complet se trouve dans notre dépôt GitHub. L'application que nous allons construire ressemblera à ceci: 

Le concept des jetons Web JSON

Un jeton Web JSON (JWT) est essentiellement un objet représenté par trois chaînes utilisées pour transmettre des informations utilisateur. Les trois chaînes, séparées par des points, sont:

• entête
• charge utile
• Signature

Lorsqu'un utilisateur se connecte à une page Web avec son nom d'utilisateur et son mot de passe, le serveur d'authentification crée et renvoie généralement un fichier JWT. Ce JWT est ensuite transmis avec les appels d'API ultérieurs au serveur. Le JWT reste valide jusqu'à ce qu'il expire ou que l'utilisateur se déconnecte de l'application..

Ce processus peut être illustré dans le diagramme ci-dessous.

Cookies vs stockage local

Nous allons utiliser un stockage local pour stocker des jetons. Le stockage local est un moyen par lequel les données sont stockées localement et ne peut être supprimé que via JavaScript ou en effaçant le cache dans le navigateur. Les données stockées dans la mémoire de stockage locale peuvent persister très longtemps. Les cookies, par contre, sont des messages envoyés du serveur au navigateur et n’offrent qu’un stockage limité..

Construire le serveur express

Nous allons commencer par créer un serveur principal qui comportera les points de terminaison suivants:

• POSTER /s'identifier
  
• POSTER /profil
  

Commençons par créer un répertoire pour l'application Express, puis exécutez la commande npm init configurer les fichiers requis pour le projet.

mkdir server cd server npm init

Ensuite, créer un fichier server.js et installez les modules: Express, jsonwebtoken, cors, et bodyParser.

touch server.js npm installer express jsonwebtoken cors bodyParser -save

Ouvert server.js et commencez par importer les modules.

// server.js const cors = require ('cors'); const bodyParser = require ('analyseur de corps'); const jwt = require ('jsonwebtoken'); const express = require ('express'); 

Créez ensuite une application Express et définissez la clé secrète qui sera utilisée pour encoder et décoder les détails de l'utilisateur..

// CREATE EXPRESS APP const app = express (); app.use (cors ()); app.use (bodyParser.json ()); // DECLARE JWT-secret const JWT_Secret = 'votre_secret_secret';

Nous n'utiliserons pas de base de données pour cet exemple. Cependant, les concepts seraient similaires si vous construisiez un serveur sécurisé basé sur une base de données..  

Pour notre exemple, nous allons simplement utiliser une variable pour définir un utilisateur de test comme indiqué ci-dessous.

var testUser = email: '[email protected]', mot de passe: '1234'; 

La dernière étape consiste à créer des itinéraires pour l'authentification de l'utilisateur.

app.post ('/ api / authenticate', (req, res) => if (req.body) var utilisateur = req.body; console.log (utilisateur) if (testUser.email === req.body .email && testUser.password === req.body.password) jeton var = jwt.sign (utilisateur, JWT_Secret); res.status (200) .send (utilisateur_signé: utilisateur, jeton: jeton); autre res.status (403) .send (errorMessage: 'Autorisation requise!'); autre res.status (403) .send (errorMessage: 'Veuillez indiquer un e-mail et un mot de passe');) ;

Décomposons le code pour l'itinéraire ci-dessus. 

Nous vérifions d'abord s'il y a des données dans le corps de la demande. Si aucune donnée n'est trouvée, nous invitons l'utilisateur à saisir des données. Lorsque l’utilisateur a fourni les bonnes données, nous les comparons aux données de la base de données. testUser et, si cela correspond, nous utilisons l'ID utilisateur pour générer un jeton unique et renvoyer la réponse à l'utilisateur..

Enfin, nous créons un point de terminaison pour exécuter l'application..

app.listen (5000, () => console.log ('Le serveur a démarré sur le port 5000')); 

Notre back-end est maintenant complet et vous pouvez le tester avec Postmanou CURL et voir le type de données qui sera renvoyé à l'utilisateur.

Construire une application angulaire

Notre application angulaire comportera les pages suivantes:

• Accueil-Cette page contiendra des liens vers les pages de connexion et de profil.
• Login-Sur cette page, un utilisateur entrera son email et son mot de passe, qui seront envoyés au serveur pour l'authentification. Si les informations d'identification sont correctes, un jeton JWT sera renvoyé et l'utilisateur sera redirigé vers la page de profil..
• Profil - Ceci est une page protégée accessible uniquement aux utilisateurs possédant un jeton valide..

Créez une application angulaire et créez le S'identifier et Profil composants comme indiqué ci-dessous:

Nouveau composant angular6jwt cd angular6jwt ng Login Login composant gg Profile

Ensuite, ajoutez le code de la page d'accueil dans app.component.html.

 
 
 
Accueil 
 
Profil 
 
 S'identifier 
 
 Connectez - Out
 
 
 
 Tutoriel sur l'authentification angulaire 6 avec JWT 
 
  

Ensuite, importez le RouteurModule et définir les itinéraires dans app.module.ts.

importer RouterModule de '@ angular / router'; @NgModule (declarations: [AppComponent, LoginComponent, ProfileComponent], importe: [BrowserModule, RouterModule, FormsModule, RouterModule.forRoot ([chemin: ", redirectTo: '/', pathMatch: '/', pathMatch: 'complet', chemin: ' login ', composant: LoginComponent, chemin:' profil ', composant: ProfileComponent]),], fournisseurs: [], bootstrap: [AppComponent]) classe d'exportation AppModule  

Créer une page de connexion

La page de connexion contiendra deux champs de saisie pour l'adresse e-mail et le mot de passe, ainsi qu'un bouton d'envoi, comme indiqué ci-dessous:

S'identifier
 
 
 Email  
 
 Mot de passe  
 
 S'identifier 
 
 

Créer une page de profil

La page de profil sera juste un simple message comme indiqué ci-dessous:

 Si vous pouvez voir cette page, vous êtes connecté! 
 

 Auth avec JWT en angulaire

Nous allons commencer par créer un Auth Service qui facilitera la validation de la saisie de l'utilisateur et la communication avec le serveur.

// Créer un service d'authentification nommé Auth ng g service Auth

Cela crée deux fichiers, mais nous nous intéresserons principalement à la auth.service.ts fichier où nous allons écrire tout le code qui interagit avec le serveur. Nous allons commencer par définir l’API REST et le jeton comme indiqué ci-dessous:

classe d'exportation AuthService api = 'http: // localhost: 3000 / api'; jeton; 

Ensuite, nous écrirons le code qui effectue une requête POST sur le serveur avec les informations d'identification de l'utilisateur. Ici, nous faisons une demande à l'API. Si cela réussit, nous stockons le jeton dans stockage local et rediriger l'utilisateur vers la page de profil.

import Injectable from '@ angular / core'; importer HttpClientModule, HttpClient depuis '@ angular / common / http'; importer routeur de '@ angular / router'; @Injectable (fournieIn: 'racine'), classe d'exportation AuthService uri = 'http: // localhost: 5000 / api'; jeton; constructeur (privé http: HttpClient, routeur privé: routeur)  login (email: chaîne, mot de passe: chaîne) this.http.post (this.uri + '/ authenticate', email: email, mot de passe: password) .subscribe ((resp: any) => this.router.navigate (['profil']); localStorage.setItem ('auth_token', resp.token);));  

Nous définissons également les fonctions de connexion et de déconnexion comme indiqué ci-dessous.

logout () localStorage.removeItem ('token');  public get logIn (): boolean return (localStorage.getItem ('token')!! == null);  

• Connectez - Out-efface le jeton de la mémoire locale
• s'identifier-retourne une propriété booléenne qui détermine si un utilisateur est authentifié

Nous mettons ensuite à jour le s'identifier propriété sur la page d'accueil comme indiqué.

 
Accueil 
 
Profil 
 
 S'identifier 
 
 Connectez - Out 
 
 

Répondre aux événements de l'utilisateur

Maintenant que nous en avons terminé avec le code qui interagit avec le serveur, passons à la gestion des événements générés par l'utilisateur pour l'interface frontale..

Nous écrirons la fonction qui écoutera les événements de clic de la page de connexion, puis nous transmettrons les valeurs au AuthService authentifier l'utilisateur. Mettez à jour votre login.component.ts fichier qui ressemble à ceci:

importer Component, OnInit à partir de '@ angular / core'; import routeur, ActivatedRoute de '@ angular / router'; importer AuthService de '… /auth.service'; @Component (sélecteur: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css']) La classe d'exportation LoginComponent implémente OnInit email = "; password = "; constructeur (private authService: AuthService)  Login () console.log ("vous vous connectez") this.authService.login (this.email, this.password) ngOnInit () 

Maintenant si tu cours ng servir et accédez à http: // localhost: 4200, vous pouvez tester votre application..

ng servir

Cliquez sur le lien de connexion et indiquez les informations d'identification de l'utilisateur. Les informations d'identification valides sont définies dans l'application Express. Maintenant, lorsque vous cliquez sur le bouton de connexion, vous serez redirigé vers la page de profil. 

Conclusion

Dans ce tutoriel, vous avez appris à démarrer avec l'authentification JWT dans Angular. Vous pouvez maintenant vous authentifier et vous autoriser avec JWT dans vos applications Angular. De nombreux aspects de JWT n'ont pas été abordés dans ce tutoriel - voyez si vous pouvez explorer certains d'entre eux vous-même.!

Notez que ce tutoriel a été écrit pour Angular 6, mais que les mêmes concepts devraient fonctionner avec Angular 2 ou Angular 4..