Dans les chapitre 1 à 4 du tutoriel, nous avons créé une API Spring qui peut émettre un token JWT lorsqu’un utilisateur s’authentifie et vérifie avec succès son token pour des demandes ultérieures. Dans ce chapitre, le dernier de la série, nous allons construire une application Angular JS simple avec une authentification qui utilise notre API comme backend.

Nous utiliserons les plugins angular suivants – angular-resource pour interagir avec nos API, ngstorage pour accéder au localStorage pour stocker le JWT et angular-ui-router pour gérer le routage et la gestion des vues de l’interface utilisateur.

Pour cet exemple, nos composants d’interface utilisateur se trouvent dans le répertoire src/main/resources/static. Nous allons charger nos dépendances à l’aide de bower en ajoutant un fichier .bowerrc à la racine de notre projet.

Nous spécifierons les dépendances dont nous avons besoin dans notre bower.json:

Les dépendances peuvent être installées à l’aide de bower install. Une fois que nous avons les dépendances, nous pouvons commencer en configurant Spring Security pour autoriser l’accès aux composants de l’interface utilisateur:

Nous allons commencer par créer notre template UI index.html:

Pour cet exemple, nous aurons un service Angular dans app/services.js qui effectue la connexion:

Nous aurons besoin de deux contrôleurs dans app/controller.js – un pour la page de connexion pour gérer le login et un autre pour la page de profil:

Le LoginController a deux méthodes – connexion et déconnexion. La méthode de connexion utilise le LoginService pour effectuer une requête et enregistre le JWT et le profil utilisateur retournés en cas de connexion réussie. Il définit également l’en-tête d’autorisation par défaut sur le JWT renvoyé afin que chaque requête suivante l’utilise pour s’authentifier. L’utilisateur est ensuite redirigé vers la page d’accueil. La déconnexion est effectuée en supprimant le JWT et le profil du localStorage et en effaçant les valeurs par défaut de le header.

L’étape suivante consiste à créer app/ app.js pour lancer l’application Angular:

Nous commençons par injecter nos services et contrôleurs dans le module principal. Nous utilisons le state provider pour mapper les URL front end aux templates. La page d’accueil utilisera le template home.html et les URL de connexion et de déconnexion utiliseront le template sigin.html.

Il configure également un listener qui observe les changements d’URL effectués par l’utilisateur et les redirige vers la page de connexion, à moins qu’ils ne soient déjà authentifiés. S’il existe déjà un jeton dans le localStorage lors du chargement de l’application, cela signifie que l’utilisateur a déjà ouvert une session différente et que le header d’autorisation est déjà défini.

Les deux vues que nous avons sont simples – signin.html a un formulaire de connexion:

La vue pour la page d’accueil – home.html affiche un profil utilisateur:

Il y a également un lien pour se déconnecter. Avec ce code en place, nous pouvons démarrer notre application Spring et nous connecter à partir du navigateur.

Ceci est le dernier chapitre de la formation. Nous avons construit une API capable de s’authentifier avec des token JWT et un client capable de s’authentifier via cette API.