Jeton dauthentification angulaire
Exemple d’authentification et d’autorisation Angular 17 JWT
, Validation du routeur et du formulaire). Je vais vous montrer :
- Structure du projet avec ,
- Comment mettre en œuvre
- Création de la connexion, Inscription Composants avec validation de formulaire
- Composants angulaires pour accéder aux ressources protégées
- Comment ajouter une barre de navigation dynamique à l’application Angular
- Travailler avec le stockage de session du navigateur
Explorons ensemble.
Related Posts :
– Introduction approfondie au jeton
Web JWT-JSON – Exemple Angular 17 CRUD avec API
Web – Angular 17 Exemple
de téléchargement de fichier – Angular 17 Déconnexion lorsque le jeton a expiré
– Angular 17 Refresh Token avec JWT et Interceptor exemple
Fullstack :
– Angular 17 + Spring Boot : Exemple
d’authentification et d’autorisation JWT – Angular 17 + Node.js Express : Exemple d’authentification et d’autorisation JWT
Présentation d’Angular 17 Exemple d’authentification et d’autorisation JWT
Il y a des pages de connexion et d’enregistrement.
- Les données du formulaire seront validées par le front-end avant d’être envoyées au back-end.
- En fonction des rôles de l’utilisateur (administrateur, modérateur, utilisateur), la barre de navigation modifie automatiquement ses éléments.
Voici les captures d’écran de notre application :
– Page d’inscription/d’inscription :
Inscription réussie :
– Validation du formulaire :
Si vous souhaitez en savoir plus sur la validation du formulaire, veuillez visiter :
– Page de connexion :
Connexion réussie :
– Page de profil (pour une connexion réussie) :
– Pour l’autorisation (connexion au compte du modérateur), la barre de navigation sera modifiée par les autorités :
– Stockage local/de session du navigateur pour le stockage des informations de l’utilisateur :
Pour le jeton d’actualisation, veuillez visiter :
Angular 17 Refresh Token avec exemple JWT et Interceptor
Flux d’authentification et d’autorisation de l’utilisateur
Pour l’authentification JWT, nous allons appeler 3 points de terminaison :
- POST pour l’enregistrement de l’utilisateur
- POST pour la connexion de l’utilisateur
- POST pour la déconnexion de l’utilisateur
Le flux suivant vous montre une vue d’ensemble des demandes et des réponses que le client Angular 17 effectuera ou recevra.
Vous pouvez trouver étape par étape pour implémenter ces serveurs back-end dans le tutoriel suivant :
Vidéo de démonstration
Il s’agit d’une application d’authentification JWT Angular 10 complète (similaire à cette version 17 d’Angular) (y compris la validation du formulaire, la vérification du nom d’utilisateur d’inscription/des doublons d’e-mail, l’autorisation de test pour 3 rôles : Admin, Modérateur, Utilisateur) avec Spring Boot Server :
Angular + Node Express Server :
Schéma de composants avec routeur et HttpInterceptor
Regardez maintenant le diagramme ci-dessous.
– Le composant est un conteneur utilisant . Il obtient des 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 de l’API (avec la technologie JWT
- Angular 17
- RxJS 7
- Angular CLI 17
- Bootstrap 4
Setup Angular 17 Jwt Authentication Project
Ouvrons cmd et utilisons Angular CLI pour créer un nouveau projet Angular 17 comme la commande suivante :
Nous devons également générer certains composants et services :
Une fois le processus précédent terminé, sous le dossier src, créons _helpers dossier et http.interceptor.ts fichier à l’intérieur.
Vous pouvez maintenant voir que la structure du répertoire de notre projet ressemble à ceci.
Structure
du projet
Avec l’explication dans le diagramme des composants ci-dessus, vous pouvez facilement comprendre cette structure de projet.
Après avoir reçu la requête, le serveur envoie un ou plusieurs en-têtes avec la réponse HTTP.
Alors, comment le dire au navigateur ?
Nous allons l’utiliser parce que notre API Rest et nos domaines angulaires (ports) sont différents.
Par exemple :
Nous pouvons également utiliser Angular Http Interceptor pour ce faire. Nous n’avons donc pas besoin de joindre à chaque demande.
Angular 17 Http Interceptor
HttpInterceptor a une méthode pour inspecter et transformer les requêtes HTTP avant qu’elles ne soient envoyées au serveur.
Implémente. Nous allons ajouter withCredentials : true pour que le navigateur inclue
_helpers / http.interceptor.ts
gets object, le modifie et le transfère à la méthode de l’objet. Il transforme l’objet en .
représente l’intercepteur suivant dans le chaîne d’intercepteurs. Le dernier « suivant » de la chaîne est l’Angular HttpClient.
Configurer le module d’application
Ouvrez app.module.ts , puis importez & .
Nous devons également ajouter .
Ce
service envoie les requêtes HTTP POST d’enregistrement, de connexion et de déconnexion au back-end.
Il fournit les fonctions importantes suivantes :
- POST {nom d’utilisateur, mot de passe}
- : POST {nom d’utilisateur, e-mail, mot de passe}
- : Demande de déconnexion POST
_services / Le
service de stockage
auth.service.tsgère les informations de l’utilisateur (nom d’utilisateur, e-mail, rôles) dans le stockage de session du navigateur. Pour la déconnexion, nous allons effacer ce stockage de session.
_services / storage.service.ts
Ce
service fournit des méthodes d’accès aux ressources publiques et protégées. JWT .
_services / user.service.ts
Ajouter Bootstrap au projet Angular 17
Ouvrez index.html et ajoutez la ligne suivante dans la balise :
Une autre façon consiste à installer le module Bootstrap avec la commande : .
Ajoutez ensuite le code suivant dans angular.json :
Créer des composants pour l’authentification
Composant de registre
Ce composant lie les données de formulaire (, , ) du modèle à la méthode qui renvoie un objet.
register / register.component.ts
Nous utilisons la validation de formulaire dans le modèle :
- obligatoire, minLength=3, maxLength=20
- : obligatoire, email format
- mot de passe : obligatoire, minLength=6
register / register.component.html
Dans le code ci-dessus, nous utilisons Template Driven Form, pour plus de détails, veuillez visiter :
Angular 17 Template Driven Forms Exemple de validation
Composant de connexion
Le composant de connexion utilise également pour travailler avec l’objet. En plus de cela, il appelle des méthodes pour vérifier l’état et enregistrer les informations de l’utilisateur dans le stockage de session.
login / login.component.ts
Voici ce que nous validons dans le formulaire :
- : required
- password : required, minLength=6
login / login.component.html
Profile Component
Ce composant récupère l’utilisateur actuel du stockage en utilisant et affiche les informations (nom d’utilisateur, token, e-mail, rôles).
profile / profile.component.ts
profile / profile.component.html
Créer des composants basés sur les rôles
Composant public
Notre composant d’accueil utilisera pour obtenir des ressources publiques à partir du back-end.
accueil home.component.ts
accueil / home.component.html
Composants protégés
Ces composants sont basés sur les rôles. Mais l’autorisation sera traitée par le back-end.
Nous n’avons qu’à appeler les méthodes :
- getUserBoard()
- getModeratorBoard()
- getAdminBoard()
Voici un exemple pour .
& sont similaires.
administrateur-forum / board-admin.component.ts
module de routage de l’application board-admin / board-admin.component.html
Nous configurons le routage de notre application Angular dans app-routing.module.ts .
array est passé à la méthode.
Nous allons utiliser la directive dans le composant de l’application où contient le contenu de la barre de navigation et des composants d’affichage (correspondant aux routes).
Composant de l’application
Ce composant est le composant racine de notre application Angular 17, il définit la balise racine : que nous utilisons dans index.html .
app.component.ts
Tout d’abord, nous vérifions l’état à l’aide de , si c’est le cas, nous obtenons les rôles de l’utilisateur et définissons la valeur de & flag. Ils contrôleront la façon dont la barre de navigation du modèle affiche ses éléments.
Le modèle de composant d’application dispose également d’une fonction Déconnexion link qui appelle la méthode et rechargez la fenêtre.
app.component.html
Exécuter le projet d’authentification et d’autorisation Angular 17 JWT
Vous pouvez exécuter cette application avec la commande : .
Ce client fonctionnera bien avec le back-end dans les articles suivants :
Avant d’exécuter le serveur backend, vous devez ajouter une configuration mineure :
– Spring Boot :
– Node.js Express :
Ils configurent CORS pour le port 8081 , vous devez donc exécuter la commande Angular Client à la place :
Conclusion
J’espère que vous comprenez les couches globales de notre application Angular et que vous l’appliquez à l’aise dans votre projet. Vous pouvez désormais créer une application frontale qui prend en charge l’authentification et l’autorisation JWT avec Angular 17, HttpInterceptor et Router.
Plus de pratique : Déconnexion d’Angular 17 lorsque le jeton est expiré
Vous devrez implémenter le jeton de rafraîchissement :
Angular 17 Jeton de rafraîchissement avec l’exemple JWT et Interceptor
Bon apprentissage, à bientôt !
Fullstack
:
– Angular 17 + Spring Boot : exemple
d’authentification et d’autorisation JWT – Angular 17 + Node.js Express : exemple d’authentification et d’autorisation JWT
source Vous
pouvez trouver le code source complet de ce tutoriel sur Github.
Plus de pratique : Déconnexion lorsque le jeton a expiré dans Angular 17