## 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](https://github.com/logto-io/logto) : Vous aide à construire la connexion, l'authentification et l'identité utilisateur en quelques minutes. - [Hasura](https://github.com/hasura/graphql-engine) : 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](https://docs.logto.io/docs/tutorials/get-started/) et [Hasura](https://hasura.io/docs/latest/getting-started/index/) 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` Si vous utilisez Docker/Docker Compose, pour accéder au `localhost` de votre machine (hôte), vous pouvez utiliser la chaîne magique Docker `host.docker.internal`. Dans ce cas, le endpoint Logto sera `http://host.docker.internal:3001`. 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. Fenêtre modale de création d'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.

Le nom du rôle doit être égal au nom du rôle sur la page "Permissions" 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](https://hasura.io/docs/latest/auth/index/), 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](https://hasura.io/docs/latest/auth/authentication/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](https://hasura.io/docs/latest/auth/authentication/webhook/#configuring-webhook-mode) : ```yaml HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey # Remplacez par votre propre secret HASURA_GRAPHQL_AUTH_HOOK: http://localhost:3001/api/authn/hasura?resource=https://hasura.api ``` 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 : ```yaml HASURA_GRAPHQL_AUTH_HOOK: https://logto.domain.com/api/authn/hasura?resource=https://graphql.domain.com ``` À 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. Si l'utilisateur indiqué par l'en-tête `Authorization` n'a pas le `Expected-Role`, Logto répondra avec `401 Unauthorized`. 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](https://docs.logto.io/docs/recipes/integrate-logto/) 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 : ```tsx const config: LogtoConfig = { endpoint: 'http://localhost:3001', appId: '', resources: ['https://hasura.api'], // Ajoutez cette ligne }; ``` ### 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 : ```tsx const accessToken = await logto.getAccessToken('https://hasura.api'); // Avant d'envoyer la requête request.headers.set('Authorization', `Bearer ${accessToken}`); request.headers.set('Expected-Role', 'user'); ``` ## 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](https://discord.gg/vRvwuwgpVX) ou [Hasura](https://discord.gg/hasura) pour discuter en direct avec l'équipe.