Créer un SDK web pour Logto en quelques minutes

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.

Le flux de connexion#

Avant de commencer, comprenons le flux de connexion dans Logto. Le flux de connexion se compose des étapes suivantes:

1. Redirection vers Logto: L'utilisateur est redirigé vers la page de connexion de Logto.
2. Authentification: L'utilisateur entre ses identifiants et s'authentifie avec Logto.
3. Redirection vers votre application: Après une authentification réussie, l'utilisateur est redirigé vers votre application avec un code d'authentification.
4. Échange de code: Votre application échange le code d'authentification pour des jetons.

Brève introduction de @logto/browser#

Le 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:

1. signIn(): Génère l'URL d'authentification OIDC et redirige vers celle-ci.
2. 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.
3. isAuthenticated(): Vérifie si l'utilisateur est authentifié.

Création du SDK React#

Dans le SDK, nous fournirons 2 hooks: useLogto et useHandleSignInCallback, ainsi qu'un composant LogtoProvider:

1. 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é.
2. 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.

Étape 1: Installer le package#

Premièrement, installez le package @logto/browser en utilisant npm ou d'autres gestionnaires de packages:

Étape 2: Définir le contexte de React#

Définissez le contexte du fournisseur, contenant 3 parties:

1. L'instance de LogtoClient sous-jacente qui sera initialisée dans le fournisseur et utilisée dans les hooks.
2. L'état d'authentification.
3. La méthode pour définir l'état d'authentification.

Créez un nouveau fichier context.tsx et écrivez le code suivant:

Étape 3: Implémenter le fournisseur#

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:

Étape 4: Implémenter les hooks#

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:

Point de contrôle: utilisation du SDK#

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.

Conclusion#

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:

1. Logto Browser SDK
2. Logto React SDK