Authentification

Connexion

La connexion est la première étape de l'authentification. L'une des façons les plus courantes d'authentifier un utilisateur est d'utiliser un nom d'utilisateur et un mot de passe. Mais une fois que l'utilisateur est authentifié, comment gérer toutes les requêtes qui nécessitent une authentification, pour par exemple accéder à des données privées ? En utilisant des jetons d'authentification.

Jetons d'authentification JWT

JWT (json web token) est un format standardisé de jetons d'authentification. Les JWT permettent d'authentifier un utilisateur sur un serveur (par exemple un API REST). Ils sont utilisés lorsqu'une communication avec le serveur nécessite une autorisation.

À l'étape de connexion, le serveur vérifie si les informations sont correctes et renvoie un jeton d'authentification (JWT) au client. Ce jeton est ensuite utilisé pour authentifier les requêtes suivantes.

Les JWT sont des chaînes de caractères qui contiennent des informations sur l'utilisateur authentifié et qui sont encodées dans un format JSON. Un JWT est composé de trois parties séparées par un point. Exemple :

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6In
Rlc3RAdGVzdC5jb20iLCJpYXQiOjE2MTczOTc1OTAsImV4cCI6MTYxNzQwMTE5MCwic3ViIjoiMSJ
9.UXCUOlHNDXhLHZ2WKl62Zw36kYlGNZ6QECBJHLNzlc8

Les trois sections sont :

• Header : contient le type de jeton et l'algorithme de chiffrement utilisé.
• Payload : contient les données du jeton. Par exemple, ce peut être des infos sur l'utilisateur (nom, id, courriel, rôle, etc.) ou sur le jeton (date d'expiration, etc.).
• Signature : contient un hash du header et du payload.

Les jetons sont encodés (ne pas confondre avec chiffrés). Il est donc possible d'accéder au contenu en les décodant. Ce qui est chiffré, c'est la signature. Ce chiffrement permet de s'assurer que le jeton n'a pas été modifié. Pour cela, il faut utiliser la même clé secrète que celle utilisée pour le chiffrement. Cette validation ce fait coté serveur.

À essayer : voir le contenu d'un jeton en ligne
Utiliser le site jwt.io en copier/collant le jeton ci-dessus pour voir son contenu.

Exemples avec jeton

Dans le projet exemple-auth, voir :

• Tous les exemples de requêtes qui sont dans le fichier requests.http.
• Le code dans le fichier authService.js qui authentifie un utilisateur.
• Le code dans le fichier userService.js qui utilise un jeton pour avoir accès à une ressource protégée.

Rafraîchissement de jeton

Le rafraîchissement de jeton est une technique utilisée pour prolonger la durée de validité d'un JWT sans que l'utilisateur ait besoin de s'authentifier à nouveau. En général, pour mettre en place le rafraîchissement de jeton côté client il faut :

• Un API d'authentification qui prend en charge le rafraîchissement de jeton.
• Stocker le jeton et le jeton de rafraîchissement côté client.
• Avant chaque appel à l'API, vérifier si le jeton est expiré ou non. Si le jeton est expiré, une demande de rafraîchissement de jeton est envoyé à l'API en utilisant le jeton de rafraîchissement. Cette demande doit être effectuée en arrière-plan sans que l'utilisateur en soit conscient. Si la demande de rafraîchissement de jeton est réussie, le serveur d'authentification renvoie deux jetons : le nouveau jeton et un nouveau jeton de rafraîchissement.

Redirections

La gestion de la connexion et des pages authentifiées est une fonctionnalité qui nécessite habituellement la gestion de redirections. Voir Bonnes pratiques : Connexion pour des exemples concrets de redirections nécessaires dans une application.

Il est possible avec Vue.js de gérer les redirections avec les gardes de navigation beforeEach de Vue Router. Par exemple, dans le code du projet exemple-auth :

• L'identification des pages nécessitant une authentification se fait avec la propriété meta. On peut mettre ce que l'on veut dans cette propriété. Ici, on a mis requiresAuth pour indiquer que la page nécessite une authentification.
• Ensuite, dans le fichier router/index.js, on utilise le garde de navigation beforeEach pour rediriger selon les cas.