Creando un SDK web para Logto en minutos

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.

El flujo de inicio de sesión#

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:

1. Redireccionar a Logto: El usuario es redirigido a la página de inicio de sesión de Logto.
2. Autenticar: El usuario ingresa sus credenciales y se autentica con Logto.
3. Redireccionar de nuevo a tu app: Después de una autenticación exitosa, el usuario es redirigido de vuelta a tu aplicación con un código de autenticación.
4. Intercambio de código: Tu aplicación intercambia el código de autenticación por tokens.

Breve introducción de @logto/browser#

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

1. signIn(): Genera la URL de autenticación OIDC y redirige a ella.
2. 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.
3. isAuthenticated(): Verifica si el usuario está autenticado.

Creando el SDK de React#

En el SDK, proporcionaremos 2 hooks: useLogto y useHandleSignInCallback, y junto con un componente LogtoProvider:

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

Paso 1: Instala el paquete#

Primero, instala el paquete @logto/browser usando npm u otros gestores de paquetes:

Paso 2: Define el contexto de React#

Define el contexto del proveedor, que contiene 3 partes:

1. La instancia subyacente de LogtoClient que se inicializará en el proveedor y se utilizará en los hooks.
2. El estado de autenticación.
3. El método para establecer el estado de autenticación.

Crea un nuevo archivo context.tsx y escribe el siguiente código:

Paso 3: Implementar el proveedor#

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:

Paso 4: Implementar los hooks#

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:

Punto de control: usando el SDK#

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í.

Conclusión#

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:

1. SDK de navegación para Logto
2. SDK de React para Logto