Angulaire 14 jwt

Dans ce tutoriel, je vais vous montrer comment construire une pile complète Angular 14 + Spring Boot Login and Registration avec l’exemple JWT. Le serveur back-end utilise Spring Boot avec Spring Security pour l’authentification JWT et l’autorisation basée sur les rôles, Spring Data JPA pour l’interaction avec la base de données. Le front-end sera construit à l’aide d’Angular 14 avec HttpInterceptor et validation de formulaire.

Related Posts :
– Angular 14 + Spring Boot : exemple
de chargement/téléchargement de fichiers – Spring Boot JWT Auth avec MySQL/PostgreSQL
– Spring Boot JWT Auth avec MongoDB

Fullstack CRUD Application :
– Angular + Spring Boot + H2 exemple
– Angular + Spring Boot + MySQL
exemple – Angular + Spring Boot + PostgreSQL exemple
– Angular + Spring Boot + MongoDB exemple

Version plus récente :
– Angular 15 + Spring Boot : exemple
d’authentification et d’autorisation JWT – Angular 16 + Spring Boot : exemple
d’authentification et d’autorisation JWT – Angular 17 + Spring Boot : exemple d’authentification et d’autorisation JWT

Angular 14 + Spring Boot Exemple

d’authentification JWT Il s’agira d’un full stack, avec Spring Boot pour le back-end et Angular 14 pour le front-end. Le système est sécurisé par Spring Security avec JWT pour l’authentification et l’autorisation.

• L’utilisateur peut créer un nouveau compte, se connecter avec son nom d’utilisateur et son mot de passe.
• Autorisation basée sur les rôles (administrateur, modérateur, utilisateur).

Voici

des captures d’écran de l’interface utilisateur de notre système.

– Tout le monde peut accéder à une page publique avant de se connecter :

– Nouvel utilisateur inscription :

– Validation du formulaire d’inscription :

Plus de détails sur la validation de formulaire sur :
– Exemple de validation
de formulaires pilotés par un modèle Angular 14 – Exemple de validation de formulaires réactifs Angular 14

– Une fois l’inscription réussie, l’utilisateur peut se connecter :

-Maintenant, l’utilisateur peut accéder à la page de profil/ page utilisateur :

– Ceci est l’interface utilisateur pour le mod :

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

Démo

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

Flux pour l’authentification et l’autorisation

Le diagramme montre le flux pour le processus d’enregistrement des utilisateurs et le processus de connexion des utilisateurs.

Ce n’est pas trop difficile à comprendre. Nous avons 3 points de terminaison pour l’authentification :

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

Spring Boot et Spring Security pour le back-end

Vue d’ensemble

Notre application Spring Boot peut être résumée dans le diagramme ci-dessous :

Maintenant, je vais l’expliquer brièvement.

Sécurité printanière

– est au cœur de notre mise en œuvre de la sécurité. Il configure cors, csrf, la gestion de session, les règles pour les ressources protégées. Nous pouvons également étendre et personnaliser la configuration par défaut qui contient les éléments ci-dessous.
( est obsolète à partir de Spring 2.7.0, vous pouvez vérifier le code source pour la mise à jour. Pour plus de détails, rendez-vous sur :
WebSecurityConfigurerAdapter Deprecated in Spring Boot)

– l’interface dispose d’une méthode pour charger l’utilisateur par nom d’utilisateur et renvoie un objet que Spring Security peut utiliser pour l’authentification et la validation.

– contient les informations nécessaires (telles que : nom d’utilisateur, mot de passe, autorités) pour construire un objet Authentication.

– récupère {nom d’utilisateur, mot de passe} de la demande de connexion, l’utilisera pour authentifier un compte de connexion.

– a un (avec l’aide de & ) pour valider l’objet. En cas de succès, renvoie un objet d’authentification entièrement renseigné (y compris les autorisations accordées).

– effectue une seule exécution pour chaque requête à notre API. Il fournit une méthode que nous mettrons en œuvre en analysant et en validant JWT, en chargeant les détails de l’utilisateur (en utilisant), en vérifiant l’autorisation (en utilisant ).

– détectera l’erreur d’authentification.

Le référentiel contient & pour fonctionner avec la base de données, sera importé dans le contrôleur .

Le contrôleur reçoit et traite la demande une fois qu’elle a été filtrée par .

– gère les demandes d’inscription/connexion

– a accès à des méthodes de ressources protégées avec des validations basées sur les rôles.

Comprenez l’architecture en profondeur et saisissez-la plus facilement :
Architecture Spring Boot pour JWT avec

la technologie

de sécurité Spring

pour implémenter le serveur avec le concept ci-dessus, nous utiliserons :

• Java 8
• Spring Boot 2 (avec Spring Security, Spring Web, Spring Data JPA)
• jjwt 0.9.1
• PostgreSQL/MySQL/H2 – base de données embarquée
Structure du projet
• Maven 3.6.1

La structure du projet back-end Spring Boot est assez compliquée :

la sécurité : nous configurons Spring Security et implémentons les objets de sécurité ici.

• met
• en œuvre met en œuvre
• étend
• fournit des méthodes pour générer, analyser, valider Les contrôleurs JWT

gèrent les demandes d’inscription/connexion et les demandes autorisées.

• : @PostMapping('/signup'), @PostMapping('/signin'), @PostMapping('/signout')
• : @GetMapping('/api/test/all'), le référentiel @GetMapping('/api/test/[role]') possède des

interfaces qui étendent Spring Data JPA pour interagir avec la base de données.

• extends
• extends

models définit deux modèles principaux pour l’authentification () et l’autorisation (). Ils ont une relation plusieurs-à-plusieurs.

• : id, nom d’utilisateur, e-mail, mot de passe, rôles
• : id, nom

charge utile définit les classes pour les objets de demande et de réponse

Nous avons également application.properties pour configurer Spring Datasource, Spring Data JPA et les propriétés de l’application (telles que la chaîne JWT Secret ou le délai d’expiration du jeton).

Implémentation et code source

Vous pouvez trouver les étapes de mise en œuvre de cette application Spring Boot – Spring Security (avec Github) dans l’article :
Exemple d’authentification JWT Spring Boot avec JWT et base de données H2 Pour

travailler avec MySQL/PostgreSQL :
Exemple d’authentification JWT Spring Boot avec JWT et MySQL

Ou MongoDB :
Exemple d’authentification JWT Spring Boot avec MongoDB

Avant d’exécuter le serveur backend, vous devez ajouter une configuration mineure :

Angular 14 pour le front-end

Vue d’ensemble

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

Essayons de la comprendre dès maintenant.

– 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.

– et les composants ont un formulaire pour les données de soumission (avec la prise en charge 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 avons l’habitude d’obtenir des ressources protégées de l’API (avec la technologie JWT

• Angular 14
• RxJS 7
• Angular CLI 14
• Bootstrap 4

Structure du projet

Il s’agit de la structure de dossiers de notre Projet front-end angulaire :

Vous pouvez le comprendre correctement sans aucune explication, car nous avons déjà examiné la vue d’ensemble.

Implémentation et code source

Vous pouvez trouver les étapes d’implémentation de ce client Angular 14 (avec Github) dans l’article :
Exemple d’authentification et d’autorisation Angular 14 JWT

Lectures complémentaires

Application

CRUD Fullstack : – Angular + Spring Boot + H2 exemple
–
Angular + Spring Boot + MySQL exemple
– Angular + Spring Boot + PostgreSQL exemple
– Angular + Spring Boot + MongoDB exemple

Le

code source complet de ce tutoriel se trouve sur Spring Boot + Angular Github.

Conclusion

Nous avons maintenant un aperçu de l’exemple d’authentification et d’autorisation basée sur les rôles d’Angular 14 Spring Boot à l’aide de JWT, Spring Security, Angular HttpInterceptor ainsi que le flux pour les actions d’inscription/connexion.

Nous examinons également l’architecture du serveur Spring Boot pour l’authentification JWT à l’aide de Spring Sercurity et Spring Data JPA, 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 d’implémenter ce système intéressant (avec Github) :
– Back-end :

– Front-end : Angular 14 JWT Exemple d’authentification et d’autorisation

Bon apprentissage, à bientôt !