Angular jwt token

L’enregistrement et l’authentification des utilisateurs sont l’une des fonctionnalités dont presque aucune application web ne peut se passer. L’authentification consiste généralement en la saisie d’un utilisateur à l’aide d’un nom d’utilisateur et d’un mot de passe, puis à l’octroi de l’accès à diverses ressources ou services. L’authentification, de par sa nature même, repose sur le maintien de l’état de l’utilisateur. Cela semble contredire une propriété fondamentale de HTTP, qui est un protocole sans état.

Les JSON Web Tokens (JWT) offrent un moyen de résoudre ce problème. Votre application Angular peut communiquer avec un backend qui produit un jeton. L’application Angular peut ensuite transmettre ce jeton dans un en-tête au backend pour prouver qu’elle est authentifiée. Le backend doit vérifier le JWT et accorder l’accès en fonction de sa validité.

Table des matières

Session vs authentification JWT dans Angular

Si vous êtes comme moi, vous avez développé pour le web depuis un certain temps. Vous avez peut-être rencontré différentes façons de résoudre ce problème. L’approche traditionnelle utilise des sessions pour garder l’état. Lorsqu’un utilisateur visite un site Web et se connecte, le serveur stocke l’état d’authentification dans une session. Bien que cette approche soit appliquée avec succès depuis de nombreuses années, elle présente certains inconvénients.

L’authentification basée sur la session repose sur le stockage des données de session sur le serveur. Le serveur qui authentifie l’utilisateur doit être le même serveur qui vérifie l’authentification et fournit le service. Imaginez un service Web déployé sur plusieurs serveurs et situé derrière un équilibreur de charge ou un proxy inverse. Chaque requête effectuée par un client peut finir par être traitée par un serveur différent. Les données de session devraient alors être partagées entre tous les serveurs. Cela annulerait la plupart des améliorations introduites par l’équilibreur de charge.

Un autre inconvénient de l’authentification basée sur la session est l’utilisation accrue des services d’authentification unique. Ici, l’utilisateur se connecte une seule fois avec un service d’authentification central. Après cela, l’utilisateur peut utiliser librement n’importe quel serveur qui fait confiance au service d’authentification. Cela peut non seulement être utile lors de l’inscription sur des sites Web à l’aide de comptes Google ou Facebook. De plus en plus, les entreprises organisent leurs flux de travail à l’aide d’un grand nombre d’outils distincts. À l’aide d’une authentification unique, les employés s’inscriront une fois et pourront ensuite utiliser tous les outils sans autre authentification. Il serait très peu pratique d’implémenter l’authentification unique à l’aide de sessions, car les différentes applications devraient communiquer entre elles et échanger leurs données de session privées.

Les JWT à la rescousse de l’authentification angulaire

En raison des problèmes décrits ci-dessus, les services utilisent de plus en plus ce que l’on appelle des jetons Web JSON (JWT) pour mettre en œuvre l’authentification. Avec l’authentification JWT, il n’y a pas de Besoin pour le serveur de stocker toutes les données de session. Le serveur peut être véritablement sans état. Alors, comment cela fonctionne-t-il ? Lorsqu’un utilisateur se connecte à un service, le serveur vérifie ses informations d’identification. En cas de réussite, le serveur encode les données clés de l’utilisateur, telles qu’un ID utilisateur ou l’adresse e-mail de l’utilisateur, dans une chaîne JSON. La chaîne est ensuite signée à l’aide d’une clé secrète. Ces données sont le jeton Web JSON. Il peut être renvoyé au client et utilisé par le client pour s’authentifier.

Si un serveur peut valider le jeton avec la clé appropriée, il peut être sûr qu’il a été généré par le serveur d’authentification. Mais elle ne peut pas être falsifiée car seul le serveur d’authentification connaît la clé privée. L’authentification peut être fournie par un service distinct du service qui souhaite restreindre l’accès.

Implémenter un serveur et un client JWT avec Node et Angular

Dans cette section, je vais vous montrer comment implémenter JWT authentification à l’aide d’un serveur Node et Express avec un client écrit avec Angular. Vous verrez que, même si le concept est simple, la mise en œuvre nécessite la connaissance des bonnes pratiques de sécurité. L’exemple donné ici n’est pas complet et ne dispose pas d’un certain nombre de fonctionnalités requises par un serveur de production. Dans la section suivante, je vais vous montrer qu’Okta apporte une solution simple et élégante à ces lacunes.

sur votre serveur.

Pour

commencer à implémenter le serveur qui authentifie les utilisateurs à l’aide de jetons Web JSON, ouvrez un terminal et créez un répertoire qui contiendra l’application serveur, j’ai appelé mon répertoire . Accédez à ce répertoire et exécutez la commande suivante pour initialiser votre projet.

Vous aurez besoin d’un certain nombre de packages pour mettre en œuvre le serveur. Installez-le ensuite en exécutant cette commande.

Je expliquera chacune de ces bibliothèques lorsqu’elles apparaîtront dans le code. Ouvrez votre éditeur de texte préféré et créez un nouveau fichier avec le contenu suivant.

Il s’agit de l’application serveur principale. Il crée d’abord un serveur qui est utilisé pour écouter les requêtes HTTP entrantes et vous permet d’enregistrer des fonctions de rappel qui génèrent des réponses à ces demandes. Le serveur utilise un certain nombre d’intergiciels qui étendent le comportement du serveur express. Le middleware permet au serveur de répondre aux requêtes Cross-Origin. 'body-parser' est nécessaire pour analyser le corps de la requête HTTP et créer un objet attaché aux données de la requête. De même, extrait un jeton porteur de l’en-tête de la demande et le rend disponible via l’objet de la demande.

L’application express attache un routeur à la route principale. Ce routeur est défini dans un fichier séparé appelé . La première route que vous allez implémenter dans ce fichier permet à un utilisateur Créez un compte.

J’utilise pour simuler une base de données utilisateur. Dans cet exemple, la base de données est uniquement conservée en mémoire. Cela signifie que toutes les données seront perdues lorsque le serveur sera arrêté. Dans un serveur de production, vous devez le remplacer par une base de données SQL ou NoSQL appropriée.

Lorsqu’un utilisateur s’inscrit, son mot de passe est haché à l’aide de la bibliothèque. Seul le mot de passe haché est stocké dans la base de données. En cas de succès, le serveur répond avec un état. Une fois qu’un utilisateur est enregistré, il doit pouvoir se connecter. Cela peut être fait par un itinéraire séparé. C’est là que vous commencerez à utiliser les jetons Web JSON. Avant de commencer l’implémentation, créez un fichier qui stockera le secret pour la création de jetons Web.

Ajoutez ensuite l’instruction require pour et l’instruction new to .

Ensuite, créez l’itinéraire dans le même fichier.

Cet itinéraire attend deux paramètres, et . La première étape consiste à rechercher dans la base de données les données de l’utilisateur. par e-mail et obtenir la fiche d’informations de l’utilisateur. Then est utilisé pour comparer le mot de passe de l’utilisateur au mot de passe haché. En cas de réussite, est utilisé pour créer un jeton qui stocke l’ID de l’utilisateur. Le jeton est ensuite renvoyé au client dans la réponse.

Lorsqu’un client tente d’accéder à une ressource restreinte, il doit envoyer le jeton dans l’en-tête de la demande. Le serveur doit ensuite authentifier le jeton. Vous pouvez écrire un intergiciel express qui effectue cette tâche d’authentification. Créez un fichier avec le contenu suivant.

N’oubliez pas que le middleware qui extrait le jeton JWT de la requête et le rend disponible via ? est utilisé pour vérifier si le jeton est valide ou non. Cette fonction extrait également l’ID utilisateur stocké dans le jeton et vous permet de l’attacher à l’objet de demande.

Tout cela vous permet désormais de créer un itinéraire protégé et uniquement disponible pour les utilisateurs connectés. Ouvrir et ajoutez ce qui suit.

L’itinéraire renvoie simplement les informations de profil de l’utilisateur. Voyez comment la fonction est ajoutée à l’itinéraire en tant qu’intergiciel. Cela protège l’itinéraire. Il permet également au callback du gestionnaire d’utiliser la propriété pour rechercher l’utilisateur dans la base de données. Pour tester le serveur, ajoutez la ligne suivante à la section .

Vous pouvez maintenant exécuter le serveur à l’aide de cette commande.

Ceci conclut l’exemple simple d’un serveur qui utilise des jetons Web JSON pour l’authentification. Ensuite, il est temps d’implémenter un client qui accède à ce serveur.

Ajouter un client Angular avec l’authentification JWT

Je vais utiliser Angular pour implémenter le client. Tout d’abord, assurez-vous que la dernière version de l’outil de ligne de commande Angular est installée. Vous devrez peut-être exécuter la commande suivante à l’aide de , en fonction de votre système.

Naviguez jusqu’à l’annuaire de votre choix et créez un nouveau projet pour le client.

Accédez à ce dossier et installez les bibliothèques de l’infrastructure CSS réactive Foundation.

Ouvrez et collez les importations pour les styles Foundation.

Commencez par créer un service de communication avec le serveur Node/Express.

Ouvrez le fichier et remplacez son contenu par le code suivant.

Ce service fournit des fonctions pour l’envoi de demandes au serveur et l’obtention des données. L’une des tâches importantes de ce service consiste à stocker le jeton JWT et à l’ajouter à l’en-tête de la demande. Un autre service se chargera de s’authentifier auprès du serveur et d’obtenir le jeton. Créez ce service à l’aide de la ligne de commande.

Remplissez le fichier nouvellement généré avec ce code.

Ce service se charge d’authentifier l’utilisateur et, en cas de succès, de stocker le jeton dans le stockage local du navigateur ainsi que de notifier le jeton. Vous Peut désormais être utilisé dans votre composant d’application. Ouvrez et collez le contenu suivant.

Modifiez le composant de l’application pour qu’il contienne une barre supérieure qui n’est visible que lorsque l’utilisateur est connecté.

Ensuite, créez un composant qui permet à un utilisateur d’enregistrer un nouvel utilisateur.

Ouvrez et créez un composant qui contient un formulaire d’inscription qui peut être soumis au serveur.

Notez que l’utilisateur n’est pas connecté après l’enregistrement. Pour cette raison, l’utilisateur est redirigé vers l’itinéraire de connexion lorsque l’inscription a réussi. Le modèle de ce composant va dans .

La création du composant pour la connexion suit les mêmes étapes.

Dans créer la logique d’affichage du formulaire et de connexion.

Le modèle contient le formulaire HTML pour l’adresse e-mail et le mot de passe de l’utilisateur.

Enfin, vous avez besoin d’un itinéraire pour afficher le profil de l’utilisateur.

Copiez le code ci-dessous en . Ce composant récupère simplement les données de profil du serveur et les stocke pour l’affichage.

Le modèle affiche simplement le résultat.

OK, maintenant je vous ai jeté beaucoup de code. Mais tout est assez simple, en réalité. Les deux premiers composants affichent simplement un formulaire à l’utilisateur et, une fois soumis, les données sont envoyées au serveur. Le dernier composant acquiert les données du serveur et les affiche. Pour que tout fonctionne, certains modules doivent être importés. Ouvrez et ajoutez les importations suivantes.

Ajoutez ensuite ce qui suit au tableau.

Enfin, ajoutez au tableau.

La dernière chose à faire est d’enregistrer le composant auprès du routeur. Ouvrez et remplacez son contenu par le code suivant.

Votre client est prêt à essayer. Démarrez-le en exécutant la commande suivante.

Le client permet à un utilisateur de s’inscrire, puis de se connecter et de consulter les données de son profil. Est-ce tout ce qu’il y a à savoir sur les jetons Web JSON ? Non, je n’ai pas abordé un certain nombre de questions. En termes d’expérience utilisateur, ce serait bien si l’itinéraire pouvait être protégé dans le client. Actuellement, un utilisateur qui n’est pas connecté au serveur peut toujours accéder à l’itinéraire. Le serveur refusera d’envoyer des données, de sorte qu’une page vide sera présentée.

Un autre grand sujet que j’ai complètement évité concerne l’expiration des jetons et l’actualisation des jetons lorsqu’un utilisateur interagit avec un site Web. Les deux sont nécessaires pour garantir la sécurité tout en offrant une bonne expérience utilisateur.

Okta

fournit des services d’authentification qui peuvent être facilement intégrés à votre application. Le service Okta est basé sur JWT et prend en charge toutes les questions liées à la sécurité et à l’expérience utilisateur. Vous n’avez pas besoin de stocker des mots de passe, de générer des jetons vous-même ou de vous demander les actualiser automatiquement.

Avant de commencer, vous aurez besoin d’un compte développeur Okta gratuit. Installez l’interface de ligne de commande Okta et lancez-la pour créer un nouveau compte. Si vous avez déjà un compte, exécutez . Ensuite, exécutez . Sélectionnez le nom de l’application par défaut ou modifiez-le comme bon vous semble. Choisissez Application monopage et appuyez sur Entrée .

À utiliser pour l’URI de redirection et acceptez l’URI de redirection Déconnexion par défaut de .

Voilà. Vous devriez maintenant voir un ID client

Express Server pour l’authentification

Le serveur qui utilise l’authentification à l’aide du service Okta n’a pas besoin d’implémenter l’enregistrement ou la connexion des utilisateurs. L’inscription est, bien sûr, utile pour garder une trace des données de l’utilisateur, mais elle n’est pas strictement nécessaire. Créez un nouveau répertoire appelé et exécutez-le comme avec le . Les bibliothèques nécessaires sont légèrement différentes.

Le principal Le fichier de demande est le même que . Le middleware d’authentification est légèrement différent, car il utilise désormais Okta.

Voici l’ID client de l’application que vous avez créée précédemment avec l’interface de ligne de commande Okta. L’implémentation du routeur ne contient qu’une seule route. J’ai supprimé les itinéraires et et n’ai conservé que l’itinéraire.

Cet itinéraire renvoie les données contenues dans le jeton. Vous pouvez choisir d’utiliser une base de données pour stocker des données supplémentaires et les envoyer au client, mais je veux vous montrer ici que ce n’est pas nécessaire.

Ajoutez la ligne suivante à la section de .

Démarrez le serveur avec .

L’authentification unique pour votre client Angular

commence de la même manière que la création de l’application, mais appelez-la .

Installez et , puis éditez et de la même manière qu’avec le client Angular dans la section précédente.

Modifiez et collez les importations pour le Styles de fond de teint.

Copie de à .

Dans , sur la première ligne, remplacez par .

Ensuite, installez les packages Okta.

Comme précédemment, créez un service serveur.

La mise en œuvre du service est très similaire à celle du client précédent. La seule différence est que le jeton JWT est obtenu via le .

Le client contient toujours un composant de connexion, mais dans ce cas, il contient simplement un widget fourni par la bibliothèque.

Modifiez le contenu de pour qu’il ressemble à ce qui suit.

Copiez le répertoire dans votre projet et modifiez-le pour récupérer le nom à partir du SDK Angular d’Okta.

Ensuite, ouvrez et collez-y le code suivant.

Il ne vous reste plus qu’à enregistrer les composants auprès du routeur dans .

Enfin, ouvrez et remplacez son contenu par le code suivant.

Votre application Angular implémente maintenant à l’aide d’Okta et de JWT ! Il protège les routes auxquelles il doit accéder et redirige automatiquement l’utilisateur vers la page de connexion lorsqu’il n’est pas connecté. Contrairement à l’exemple de la section précédente, l’implémentation de cette section est terminée. Les bibliothèques Okta prennent en charge tous les problèmes restants qui n’ont pas été couverts par l’implémentation de JWT.

Vous pouvez tester le client en exécutant la commande comme d’habitude. Entrez des informations d’identification valides lorsque vous y êtes invité.

Une fois connecté, vous serez redirigé vers la page de profil et vous verrez vos informations d’utilisateur, comme avant.

En savoir plus sur Angular et JWT

J’espère que, dans ce tutoriel, je vous ai donné un aperçu des jetons Web JSON et de leurs utilisations. Ils résolvent certains des problèmes rencontrés par l’authentification traditionnelle basée sur la session en chiffrant les informations de l’utilisateur et en les retransmettant au client. Je vous ai montré comment implémenter un serveur et un client à l’aide de JWT. Cet exemple vous a montré les bases, mais pour être utilisé pour un serveur de production, des étapes supplémentaires doivent être prises. Okta simplifie la création d’une authentification basée sur des jetons. En quelques étapes seulement, vous pouvez mettre en œuvre un serveur et un client entièrement fonctionnels.

Le code de ce tutoriel peut être trouvé sur GitHub à l’adresse oktadeveloper/angular-jwt-authentication-example.

Si vous souhaitez en savoir plus sur JWT, Okta ou la mise en œuvre de serveurs RESTful avec Angular et Node, consultez les liens suivants.

Si vous avez aimé en savoir plus sur Angular et JWT, il y a de fortes chances que vous aimiez certains de nos autres articles. Veuillez @oktadev suivre sur Twitter pour être informé lorsque nous publions de nouveaux articles de blog. Vous pouvez également vous abonner à notre chaîne YouTube si vous aimez les screencasts.