Protégez votre API Express.js avec JWT et Logto

Introduction#

Lorsque vous développez une application web, il est crucial de protéger vos points d'extrémité API contre l'accès non autorisé. Imaginez que vous construisez un site web de shopping en ligne ; vous ne voulez certainement pas que des voleurs informatiques exploitent votre API.

En supposant que vous ayez déjà construit une application Express.js avec l'authentification des utilisateurs, où les utilisateurs doivent se connecter avant d'effectuer certaines actions. Sinon, vous pouvez commencer votre parcours avec Logto. Il ne nécessite que quelques lignes de code pour établir un flux d'authentification des utilisateurs.

Cependant, même après l'authentification des utilisateurs, vous faites face à divers choix pour protéger vos points d'extrémité API. Malheureusement, la plupart de ces options ont leurs inconvénients :

• Authentification basée sur la session : L'application de votre API à un magasin de sessions, ce qui n'est pas évolutif et ne convient pas bien aux microservices.
• Appel à un service d'authentification : Cela introduit un appel réseau supplémentaire, augmentant la latence et les coûts. Certains services d'authentification facturent même en fonction du volume d'appels API, ce qui peut entraîner des dépenses considérables.

Dans ce tutoriel, nous allons vous montrer comment renforcer vos points d'extrémité API en utilisant des JSON Web Tokens (JWT) et Logto. Cette approche offre évolutivité et coûts supplémentaires minimaux.

Prérequis#

Avant de plonger, assurez-vous d'avoir les éléments suivants :

• Un compte Logto. Si vous n'en avez pas, vous pouvez vous inscrire gratuitement.
• Un projet Express.js nécessitant une protection API et une application cliente consommant l'API.
• Familiarité de base avec JSON Web Token (JWT).

Définissez votre ressource API dans Logto#

Logto tire pleinement parti de RFC 8707: Resource Indicators for OAuth 2.0 pour sécuriser vos points d'extrémité API. Cela signifie que vous pouvez définir vos ressources API en utilisant leurs URL réelles.

Naviguez vers l'onglet "Ressources API" dans la console Logto et cliquez sur "Créer une ressource API" pour en créer une nouvelle. Par exemple, si vous souhaitez protéger le point d'extrémité /api/products, vous pouvez utiliser l'URL https://yourdomain.com/api/products comme identifiant.

Obtenez un jeton d'accès dans votre application cliente#

Pour continuer, vous devrez intégrer le SDK Logto dans votre application cliente. Cette application pourrait différer de votre backend Express.js ; par exemple, vous pourriez avoir une application React utilisant Express.js comme serveur API backend.

Vous devrez également ajuster la configuration du SDK Logto pour informer Logto que vous souhaitez demander un jeton d'accès pour votre API dans cette concession. Voici un exemple avec React :

Une fois qu'un utilisateur se connecte avec Logto, isAuthenticated dans le SDK Logto deviendra true :

Maintenant, vous pouvez utiliser la méthode getAccessToken pour récupérer un jeton d'accès pour votre API :

Enfin, incluez ce jeton d'accès dans l'en-tête Authorization lors de vos requêtes à votre API :

Vérifiez le jeton d'accès dans votre API#

Dans votre application Express.js, installez la bibliothèque jose pour la vérification des JWT :

Comme nous utilisons l'authentification Bearer, extrayez le jeton d'accès de l'en-tête Authorization :

Ensuite, créez un middleware pour vérifier le jeton d'accès :

Vous pouvez maintenant employer ce middleware pour protéger vos points d'extrémité API :

Avec cette approche, vous n'avez pas besoin de contacter le serveur Logto à chaque arrivée de requête. À la place, vous récupérez le JSON Web Key Set (JWKS) depuis le serveur Logto une fois et vous vérifiez ensuite les jetons d'accès localement.

Contrôle d'accès basé sur les rôles#

Jusqu'à présent, nous avons seulement vérifié qu'un utilisateur s'est connecté avec Logto. Nous ne savons toujours pas si l'utilisateur possède la permission appropriée pour accéder au point d'extrémité API. C'est parce que Logto permet à quiconque de récupérer un jeton d'accès pour une ressource API existante.

Pour pallier cela, nous pouvons utiliser le contrôle d'accès basé sur les rôles (RBAC). Dans Logto, vous pouvez définir des rôles et leur attribuer des permissions. Consultez ce tutoriel pour apprendre à définir des rôles et des permissions dans Logto.

Après avoir défini les rôles et les permissions, vous pouvez ajouter l'option scopes au composant LogtoProvider :

Logto ne délivrera alors un jeton d'accès qu'avec le ou les scopes appropriés à l'utilisateur. Par exemple, si un utilisateur ne possède que le scope read:products, le jeton d'accès ne contiendra que ce scope :

Si un utilisateur possède à la fois les scopes read:products et write:products, le jeton d'accès contiendra les deux scopes avec un espace comme séparateur :

Dans votre application Express.js, vous pouvez vérifier si le jeton d'accès contient le ou les scopes corrects avant d'accorder l'accès au point d'extrémité API :

Conclusion#

Protéger les points d'extrémité API tout en assurant l'évolutivité n'est pas une mince affaire. Chez Logto, nous nous efforçons de simplifier l'authentification des requêtes pour les développeurs, vous permettant de vous concentrer davantage sur votre logique métier.

Pour toute question, n'hésitez pas à rejoindre notre serveur Discord. Notre communauté est toujours heureuse de vous assister.