Logto x Hasura : Comment utiliser l'authentification open-source + solution GraphQL pour booster votre projet

Introduction#

Lorsqu'il s'agit d'un nouveau projet, vous ne pouvez généralement pas ignorer plusieurs choses : les API, l'authentification + l'autorisation, l'identité et le flux de connexion des utilisateurs finaux. Il était autrefois difficile de lancer ces éléments en raison des nombreux concepts et technologies largement répandus : RESTful/GraphQL, frontend web, client natif, connexion des clients aux API, meilleures pratiques d'authentification pour équilibrer la sécurité et l'expérience utilisateur, etc.

De plus, la plupart des travaux sont de la "répétition". Je veux dire, ils sont nécessaires et similaires pour presque tous les projets, avec quelques ajustements.

Ça semble effrayant et fastidieux ? Ne paniquez pas. Aujourd'hui, nous avons l'open source. Avec les deux projets open-source ci-dessous, les choses deviennent moins compliquées :

• Logto : Vous aide à construire la connexion, l'authentification et l'identité utilisateur en quelques minutes.
• Hasura : API GraphQL en temps réel instantanées et ultra-rapides sur votre base de données avec un contrôle d'accès granulaire.

Dans cet article, nous nous concentrerons sur la connexion entre Logto et Hasura, qui vous permet d'implémenter authentification, autorisation et API GraphQL sans friction. Ainsi, vous pouvez rapidement vous lancer dans votre activité sans un apprentissage complexe.

Commencer#

Prérequis#

Puisque Logto et Hasura disposent tous deux d'un guide de démarrage correct, nous supposons que vous les avez lus et que vous avez une impression de base. Un accès à une instance en cours d'exécution des deux est nécessaire.

Nous supposons que les endpoints accessibles sont :

• Logto : http://localhost:3001
• Hasura : http://localhost:8080

De plus, nous supposons que vous avez une plateforme et un framework préférés pour construire l'application client, disons React ou Next.js.

Configuration de l'API dans Logto#

Dans la barre de navigation latérale gauche de votre Logto Console d'administration, cliquez sur "Ressources API", et vous verrez la page de gestion des ressources API.

Ensuite, cliquez sur le grand bouton "+ Créer une ressource API" dans le coin supérieur droit. Dans la fenêtre modale qui s'ouvre, entrez Hasura pour le nom de l'API et https://hasura.api pour l'identifiant de l'API.

Nous utiliserons cet identifiant d'API pour le reste de notre article. Mais n'hésitez pas à modifier les valeurs selon vos préférences.

Cliquez sur "Créer une ressource API", et un message s'affichera indiquant que la ressource a été créée avec succès. C'est tout ce dont nous avons besoin dans Logto pour l'instant.

Créer un rôle pour Hasura#

Pour tirer parti de la gestion des autorisations de Hasura, nous allons créer des rôles dans Logto, ces rôles seront mappés aux rôles de Hasura.

N'oubliez pas d'attribuer le rôle aux utilisateurs.

Activer l'authentification webhook dans Hasura#

Hasura utilise la gestion des accès basée sur les rôles, qui gère l'autorisation. Ainsi, nous devons seulement déterminer l'authentification. Elle prend en charge deux méthodes : Webhook et JWT. Nous choisissons webhook car c’est plus flexible.

Pour activer l'authentification webhook, vous devez définir le secret d'admin et l'endpoint du hook d'authentification.

• Le secret d'admin est la clé pour avoir accès à l'admin de Hasura lors de l'envoi de requêtes. Il est requis avant d'activer l'authentification webhook. N'oubliez pas de le garder en lieu sûr, et ne l'utilisez pas en production.
• L'endpoint du hook d'authentification est une URL pour envoyer des requêtes d'authentification.

Vous pouvez les définir via les variables d'environnement :

Vous pouvez remarquer que nous utilisons l'identifiant d'API rempli dans Logto pour construire l'endpoint du hook d'authentification. Cela garantit que l'utilisateur passe le bon jeton Bearer au lieu d'un jeton aléatoire susceptible d'être malveillant.

Vous devez mettre à jour l'endpoint du hook d'authentification si vous avez un endpoint Logto ou un identifiant API différent. Supposons que vous ayez https://logto.domain.com comme endpoint Logto et https://graphql.domain.com comme identifiant API, alors ce sera :

À partir de maintenant, pour chaque requête GraphQL, Hasura apportera tous les en-têtes de requête à l'endpoint du hook d'authentification Logto, et Logto répondra comme il se doit.

Envoyer des requêtes GraphQL sécurisées#

Résumé#

Puisque nous n'utiliserons pas le secret d'admin Hasura en production, chaque requête GraphQL est sécurisée par les en-têtes suivants :

• Authorization Le jeton Bearer standard généré par Logto.
• Expected-Role Le rôle que vous souhaitez que Logto affiche dans la réponse du hook d'authentification.

L'en-tête Authorization nécessite un jeton d'accès valide au format JWT avec l'indicateur API Hasura pour l'audience. Attendez - il est assez difficile de se souvenir et de composer toutes ces choses. Heureusement, nous avons les SDK Logto pour simplifier la partie technique.

Intégrer le SDK Logto#

Suivez le guide d'intégration pour intégrer un SDK Logto dans votre application client. Il permet non seulement de générer un jeton d'accès valide pour les requêtes GraphQL, mais aussi de fournir une expérience de connexion fluide pour vos utilisateurs finaux.

Une fois le guide terminé, nous devons apporter une petite modification au LogtoConfig : Ajoutez l'indicateur API que vous avez créé dans Logto Console d'administration à resources. Prenons le SDK React comme exemple :

Envoyer des requêtes#

Enfin ! Après que l'utilisateur se soit connecté, utilisez getAccessToken() dans le SDK Logto pour récupérer le jeton d'accès pour les requêtes GraphQL Hasura :

Récapitulatif#

Avec les efforts ci-dessus, nous avons réussi à implémenter toutes les choses incontournables de l'introduction :

• Un endpoint API GraphQL basé sur le schéma de la base de données
• Un service d'authentification et d'identité basé sur le protocole OIDC
• Le flux de connexion complet des utilisateurs finaux et la gestion de l'état d'authentification
• Un accès API sécurisé basé sur l'identité et les rôles des utilisateurs

Pas si difficile, non ? Si vous rencontrez des problèmes, n'hésitez pas à rejoindre le serveur Discord Logto ou Hasura pour discuter en direct avec l'équipe.