Angular jsonwebtoken

Dans ce tutoriel, nous allons apprendre à créer une pile complète Node.js exemple d’authentification Express + Angular 11. Le serveur back-end utilise Node.js Express avec jsonwebtoken pour l’authentification et l’autorisation JWT, Sequelize pour interagir avec la base de données MySQL. Le front-end sera créé avec Angular 11, HttpInterceptor et Router. Nous effectuerons également la validation du formulaire sur l’interface utilisateur.

Versions plus récentes :
– Node.js Express, Angular 12 : exemple d’authentification et d’autorisation JWT
– Node.js Express, Angular 13 : exemple d’authentification et d’autorisation JWT
– Node.js Express, Angular 14 : exemple d’authentification et d’autorisation JWT
– Node.js Express, Angular 15 : exemple d’authentification et d’autorisation JWT
– Node.js Express, Angular 16 : Authentification JWT et Exemple d’autorisation
– Node.js Express, Angular 17 : Exemple d’authentification et d’autorisation JWT

Articles similaires :
– Node.js + MongoDB : Authentification et autorisation de l’utilisateur avec JWT
– Node.js + PostgreSQL : Authentification et autorisation JWT

Fullstack :
– Exemple Angular + Node.js Express + MySQL
– Exemple Angular + Node.js Express + PostgreSQL
– Exemple
Angular + Node.js Express + MongoDB – Angular + Node.js Express : Exemple de téléchargement de fichiers

Exécutez les deux projets en un seul endroit :
Comment intégrer Angular à Node.js

JWT (JSON Web Token)

Il y a trois parties importantes d’un JWT : En-tête, charge utile, signature. Ensemble, ils sont combinés en une structure standard : .

Le client attache généralement JWT dans l’en-tête x-access-token :

Pour plus de détails, vous pouvez visiter :
Introduction approfondie au jeton Web JWT-JSON

Node.js Express Exemple d’authentification Angular 11

Il s’agira d’une pile complète, avec Node.js Express pour le back-end et Angular 11 pour le front-end. L’accès est vérifié par l’authentification JWT.

• L’utilisateur peut créer un nouveau compte, se connecter avec son nom d’utilisateur et son mot de passe.
• Autorisation par le rôle de l’utilisateur (admin, modérateur, utilisateur)

Captures

d’écran Les images ci-dessous montrent des captures d’écran de notre application client Angular 11.

– Toute personne peut accéder à une page publique avant de se connecter :

– Un nouvel utilisateur peut s’inscrire :

– Validation du formulaire d’inscription :

Plus de détails sur la validation du formulaire à :
Exemple de validation de formulaire Angular 11 (formulaires réactifs)

– Connexion avec un compte légal :

– Page de profil :

– Interface utilisateur pour le rôle d’administrateur :

– Si un utilisateur qui n’a pas de rôle d’administrateur essaie d’accéder à la page du tableau d’administration / modérateur :

Démo

Il s’agit d’une démo complète de l’application d’authentification et d’autorisation Angular + Node.js Express JWT (avec validation de formulaire, vérification du nom d’utilisateur d’inscription / des doublons d’e-mail, test d’autorisation avec 3 rôles : Admin, Modérateur, Utilisateur).

Dans la vidéo, nous utilisons Angular 10, mais la logique et l’interface utilisateur sont les mêmes que celles de cette version 11 d’Angular.

Flux pour l’enregistrement et la connexion de l’utilisateur

Le diagramme montre le flux de l’enregistrement de l’utilisateur, de la connexion de l’utilisateur et du processus d’autorisation.

Nous avons 2 points de terminaison pour l’authentification :

• pour l’enregistrement de l’utilisateur
• pour la connexion de l’utilisateur

Un JWT légal doit être ajouté à l’en-tête HTTP x-access-token si le client accède à des ressources protégées.

Back-end avec Node.js Express & Sequelize

Vue d’ensemble

Notre application Node.js Express peut être résumée dans le schéma ci-dessous :

Via les routes Express, la requête HTTP qui correspond à une route sera vérifiée par le middleware CORS avant d’arriver à la couche de sécurité.

La couche de sécurité comprend :

• Authentification JWT Intergiciel : vérifier l’inscription, vérifier le jeton
• Intergiciel d’autorisation : vérifier les rôles de l’utilisateur avec l’enregistrement dans la base de données

Si ces intergiciels génèrent une erreur, un message sera envoyé en tant que réponse HTTP.

Les contrôleurs interagissent avec la base de données MySQL via Sequelize et envoient une réponse HTTP (jeton, informations utilisateur, données basées sur les rôles...) au client.

Technology

• Express 4
• bcryptjs 2.4.3
• jsonwebtoken 8.5.1
• Sequelize 5.21.3

Structure du projet

MySQL

Voici la structure de répertoire de notre application Node.js Express :

– config

• configure MySQL database & Sequelize
• configure Auth Key

– routes

• auth.routes.js : POST signup &
• signin user.routes.js : GET public & protected resources

– middlewares

• verifySignUp.js : vérifier le nom d’utilisateur ou l’e-mail en double
• authJwt.js : vérifier le jeton, vérifier les rôles des utilisateurs dans la base de données

– contrôleurs

• auth.controller.js : gérer les actions d’inscription et de connexion
• user.controller.js : renvoyer le contenu public et protégé

– modèles pour Séquestrer les modèles

• user.model.js
• role.model.js

– server.js : importer et initialiser les modules et routes nécessaires, écouter les connexions.

Mise en œuvre

Vous pouvez trouver étape par étape pour mettre en œuvre cette application Node.js dans l’article (avec Github) :
Node.js – Exemple d’authentification et d’autorisation JWT

Ou vous pouvez utiliser la base de données PostgreSQL/MongoDB à la place :
– Node.js + PostgreSQL : Authentification et autorisation JWT – Node.js
+ MongoDB : Exemple d’authentification et d’autorisation JWT

Front-end avec Angular 11, HttpInterceptor et Router

Vue d’ensemble

Notre application Angular peut être résumée dans le schéma de composants ci-dessous :

– Le composant est un conteneur utilisant . Il obtient un jeton d’utilisateur & informations sur l’utilisateur à partir du stockage de session du navigateur via . Ensuite, la barre de navigation peut maintenant s’afficher en fonction de l’état de connexion et des rôles de l’utilisateur.

– & composants ont un formulaire pour les données de soumission (avec le soutien de la validation de formulaire ). Ils servent à vérifier l’état et à envoyer des demandes de connexion/inscription.

– utilise Angular HttpClient (service) pour effectuer des demandes d’authentification.
– chaque requête HTTP par le service sera inspectée et transformée avant d’être envoyée par .

– Le composant est public pour tous les visiteurs.

– composant obtenir des données à partir du stockage de session .

– , , les composants seront affichés en fonction de Session Storage . Dans ces composants, nous utilisons pour obtenir des ressources protégées à partir de l’API.

Technologie

– Angular 11
– Projet RxJS 6

Structure

La structure du projet Angular 11 est simple :

parce que j’ai montré le schéma des composants, vous pouvez le comprendre correctement sans aucune explication.

Mise en œuvre

Vous pouvez trouver étape par étape pour mettre en œuvre cette application Angular (avec Github) dans le post :
Exemple d’authentification Angular 11 JWT avec l’API Web Autres

versions :
– Angular 8 Exemple d’authentification JWT avec l’API Web
– Angular 10 Exemple d’authentification JWT avec l’API Web
– Angular 12 Exemple d’authentification JWT avec l’API Web
– Angular 13 Exemple d’authentification JWT avec l’API
Web – Exemple d’authentification Angular 14 JWT avec l’API
Web – Exemple d’authentification Angular 15 JWT avec l’API
Web – Angular 16 Exemple d’authentification JWT avec l’API
Web – Angular 17 Exemple d’authentification JWT avec l’API Web

Fullstack

:
– Exemple Angular + Node.js Express + MySQL
– Exemple Angular + Node.js Express + PostgreSQL
– Exemple Angular + Node.js Express + MongoDB
– Angular + Node.js Express : Exemple de téléchargement de fichiers

Versions plus récentes :
– Node.js Express, Angular 12 : Exemple d’authentification et d’autorisation JWT
– Node.js Express, Angular 13 : Exemple d’authentification et d’autorisation JWT
– Node.js Express, Angular 14 : Exemple
d’authentification et d’autorisation JWT – Node.js Express, Angular 15 : Exemple
d’authentification et d’autorisation JWT – Node.js Express, Angular 16 : Exemple
d’authentification et d’autorisation JWT – Node.js Express, Angular 17 : Exemple d’authentification et d’autorisation JWT

Code source Le

code source complet de ce tutoriel peut être trouvé sur Angular Node Express Github.

Conclusion

Nous avons maintenant un aperçu de l’exemple d’authentification et d’autorisation Node.js Express + Angular 11 utilisant JWT, HttpInterceptor, Router, Form Validation ainsi que le flux pour les actions d’inscription/connexion.

Nous examinons également Node.js’architecture du serveur Express pour l’authentification JWT à l’aide de jsonwebtoken et Sequelize, ainsi que la structure du projet Angular pour la création d’une application frontale fonctionnant avec JWT.

Les prochains tutoriels vous montreront plus de détails sur la façon de mettre en œuvre ce système intéressant :
– Back-end :

– Front-end :

Ce client Angular fonctionne également bien avec le back-end dans le post :
– Node.js + MongoDB : Authentification et autorisation de l’utilisateur avec JWT
– Node.js + PostgreSQL : Authentification et autorisation JWT

Vous voudrez savoir comment exécuter les deux projets en un seul endroit :
Comment intégrer Angular à Node.js Restful Services

Bon apprentissage, à bientôt !