Apprenez à créer un SDK personnalisé pour Logto en utilisant `@logto/browser`.
Logto, une plateforme d'authentification open source, offre une multitude de SDK officiels conçus pour simplifier l'intégration pour divers cadres et plateformes. Cependant, il existe encore de nombreuses plateformes qui n'ont pas de SDK officiels.
Pour combler cette lacune, Logto fournit le package fondamental @logto/browser, conçu pour aider les développeurs à créer des SDK personnalisés adaptés à des exigences spécifiques. Ce package met en œuvre les fonctionnalités de base de Logto, indépendamment de tout cadre ou plateforme spécifique, tant qu'il prend en charge JavaScript et fonctionne dans un environnement de navigateur.
Dans ce guide, nous vous guiderons à travers les étapes pour créer un SDK React en utilisant @logto/browser, ce SDK mettra en œuvre le flux de connexion. Vous pouvez suivre les mêmes étapes pour créer un SDK pour toute autre plateforme basée sur JavaScript qui fonctionne dans un navigateur.
Avant de commencer, comprenons le flux de connexion dans Logto. Le flux de connexion se compose des étapes suivantes:
@logto/browserLe package @logto/browser expose une classe LogtoClient qui offre les fonctionnalités de base de Logto, y compris des méthodes pour le flux de connexion:
signIn(): Génère l'URL d'authentification OIDC et redirige vers celle-ci.handleSignInCallback(): Vérifie et analyse l'URL de rappel et extrait le code d'authentification, puis échange le code pour des jetons en appelant le point de terminaison du jeton.isAuthenticated(): Vérifie si l'utilisateur est authentifié.Dans le SDK, nous fournirons 2 hooks: useLogto et useHandleSignInCallback, ainsi qu'un composant LogtoProvider:
useLogto: Un hook qui fournit la méthode signIn pour déclencher le flux de connexion, et l'état isAuthenticated pour vérifier si l'utilisateur est authentifié.useHandleSignInCallback: Un hook qui gère l'URL de rappel et échange le code d'authentification pour des jetons, complète le flux de connexion.Pour utiliser le SDK, vous pouvez simplement envelopper votre application avec le composant LogtoProvider et utiliser les hooks pour vérifier l'état d'authentification, se connecter et gérer le rappel.
Premièrement, installez le package @logto/browser en utilisant npm ou d'autres gestionnaires de packages:
Définissez le contexte du fournisseur, contenant 3 parties:
LogtoClient sous-jacente qui sera initialisée dans le fournisseur et utilisée dans les hooks.Créez un nouveau fichier context.tsx et écrivez le code suivant:
Avec le contexte prêt, implémentons le fournisseur. Le fournisseur initialisera l'instance LogtoClient, vérifiera si l'utilisateur est authentifié et fournira le contexte à ses enfants.
Créez un nouveau fichier provider.tsx:
Maintenant, implémentons les hooks.
useLogto: Dans ce hook, nous utilisons le contexte pour obtenir l'instance LogtoClient, et nous fournissons la méthode signIn et l'état isAuthenticated. Vous pouvez continuer à ajouter plus de méthodes à ce hook.useHandleSignInCallback: Ce hook lira l'URL de retour du navigateur, extraira le code d'authentification, et l'échangera pour des jetons. Il définira également l'état d'authentification à true après que l'utilisateur est authentifié.Créez un nouveau fichier hooks.ts et écrivez le code suivant:
Maintenant, vous avez créé le SDK React pour Logto. Vous pouvez l'utiliser dans votre application en enveloppant l'application avec le composant LogtoProvider et en utilisant les hooks pour vérifier l'état de auth, se connecter, et gérer le rappel. Vous pouvez consulter le projet d'échantillon officiel React ici.
Dans ce guide, nous vous avons guidé à travers les étapes pour créer un SDK React pour Logto mettant en œuvre le flux d'authentification de base. Le SDK fourni ici est un exemple de base. Vous pouvez l'étendre en ajoutant d'autres méthodes et fonctionnalités pour répondre aux besoins de votre application.
Vous pouvez suivre les mêmes étapes pour créer un SDK pour toute autre plateforme basée sur JavaScript qui fonctionne dans un navigateur.
Ressources: