Aprenda cómo crear un SDK personalizado para Logto usando `@logto/browser`.
Logto, una plataforma de autenticación de código abierto, ofrece una gran cantidad de SDKs oficiales diseñados para simplificar la integración para varios marcos de trabajo y plataformas. Sin embargo, aún hay muchas plataformas que no cuentan con SDKs oficiales.
Para cubrir esta brecha, Logto proporciona el paquete fundamental @logto/browser, diseñado para ayudar a los desarrolladores a crear SDK personalizados adaptados a requisitos específicos. Este paquete implementa las funcionalidades centrales de Logto, independientes de cualquier marco de trabajo o plataforma específica, siempre que soporte JavaScript y se ejecute en un entorno de navegador.
En esta guía, te guiaremos a través de los pasos para crear un SDK de React usando @logto/browser, este SDK implementará el flujo de inicio de sesión. Puedes seguir los mismos pasos para crear un SDK para cualquier otra plataforma basada en JavaScript que se ejecute en un navegador.
Antes de comenzar, entendamos el flujo de inicio de sesión en Logto. El flujo de inicio de sesión consta de los siguientes pasos:
@logto/browserEl paquete @logto/browser expone una clase LogtoClient que proporciona las funcionalidades centrales de Logto, incluyendo métodos para el flujo de inicio de sesión:
signIn(): Genera la URL de autenticación OIDC y redirige a ella.handleSignInCallback(): Verifica y analiza la URL de callback y extrae el código de autenticación, luego intercambia el código por tokens llamando al endpoint de token.isAuthenticated(): Verifica si el usuario está autenticado.En el SDK, proporcionaremos 2 hooks: useLogto y useHandleSignInCallback, y junto con un componente LogtoProvider:
useLogto: Un hook que proporciona el método signIn para desencadenar el flujo de inicio de sesión, y el estado isAuthenticated para verificar si el usuario está autenticado.useHandleSignInCallback: Un gancho que maneja la URL de callback e intercambia el código de autenticación por tokens, completa el flujo de inicio de sesión.Para usar el SDK, simplemente puedes envolver tu aplicación con el componente LogtoProvider y usar los hooks para verificar el estado de autenticación, iniciar sesión y manejar el callback.
Primero, instala el paquete @logto/browser usando npm u otros gestores de paquetes:
Define el contexto del proveedor, que contiene 3 partes:
LogtoClient que se inicializará en el proveedor y se utilizará en los hooks.Crea un nuevo archivo context.tsx y escribe el siguiente código:
Con el contexto listo, implementemos el proveedor. El proveedor inicializará la instancia de LogtoClient, verificará si el usuario está autenticado y proporcionará el contexto a sus hijos.
Crea un nuevo archivo provider.tsx:
Ahora, implementemos los hooks.
useLogto: En este hook, usamos el contexto para obtener la instancia de LogtoClient, y proporcionamos el método signIn y el estado isAuthenticated. Puedes seguir añadiendo más métodos a este hook.useHandleSignInCallback: Este hook leerá la URL de callback del navegador, extraerá el código de autenticación y lo intercambiará por tokens. También establecerá el estado de autenticación en true después de que el usuario esté autenticado.Crea un nuevo archivo hooks.ts y escribe el siguiente código:
Ahora, has creado el SDK de React para Logto. Puedes usarlo en tu aplicación envolviendo la aplicación con el componente LogtoProvider y usando los hooks para verificar el estado de autenticación, iniciar sesión y manejar el callback. Puedes consultar el proyecto de muestra oficial de React aquí.
En esta guía, te hemos guiado a través de los pasos para crear un SDK de React para Logto implementando el flujo básico de autenticación. El SDK proporcionado aquí es un ejemplo básico. Puedes extenderlo añadiendo más métodos y funcionalidades para satisfacer las necesidades de tu aplicación.
Puedes seguir los mismos pasos para crear un SDK para cualquier otra plataforma basada en JavaScript que se ejecute en un navegador.
Recursos: