Logto x Hasura: Cómo utilizar una solución de autenticación de código abierto + GraphQL para impulsar tu proyecto

Introducción#

Cuando se trata de un nuevo proyecto, generalmente no puedes saltarte varias cosas: APIs, autenticación + autorización, identidad, y flujo de inicio de sesión del usuario final. Solía ser difícil poner en marcha estas cosas porque hay muchos conceptos y tecnologías que se extienden ampliamente: RESTful/GraphQL, frontend web, cliente nativo, conectar clientes con APIs, mejores prácticas de autenticación para equilibrar seguridad y experiencia de usuario, etc.

Además, la mayoría de los trabajos son “repetitivos”. Quiero decir, son necesarios y similares para casi todos los proyectos, con algunas modificaciones.

¿Suena aterrador y tedioso? No entres en pánico. Hoy tenemos el código abierto. Con los dos proyectos de código abierto a continuación, las cosas se vuelven menos complicadas:

• Logto: Te ayuda a construir el inicio de sesión, autenticación e identidad del usuario en minutos.
• Hasura: APIs GraphQL en tiempo real y ultrarrápidas en tu base de datos con control de acceso detallado.

En este artículo, nos centraremos en conectar Logto y Hasura, lo que te permitirá implementar autenticación, autorización y APIs GraphQL sin complicaciones. Así podrás adentrarte rápidamente en tu negocio sin necesidad de aprender ciencia de cohetes.

Comenzar#

Prerrequisitos#

Dado que tanto Logto como Hasura tienen una buena guía para empezar, asumimos que los has leído y tienes una idea básica. Se necesita acceso a una instancia en funcionamiento de ambos.

Asumimos que los endpoints accesibles son:

• Logto: http://localhost:3001
• Hasura: http://localhost:8080

También asumimos que tienes una plataforma y un marco de trabajo preferidos para construir la aplicación cliente, digamos React o Next.js.

Configurar API en Logto#

En la barra lateral de navegación izquierda de tu Consola de Administración de Logto, haz clic en “Recursos de API”, y verás la página de gestión de Recursos de API.

Luego haz clic en el enorme botón “+ Crear Recurso de API” en la esquina superior derecha. En la ventana modal que se abre, ingresa Hasura para el nombre de la API y https://hasura.api para el identificador de la API.

Usaremos este identificador de API para el resto de nuestro artículo. Pero siéntete libre de cambiar los valores según tu preferencia.

Haz clic en “Crear Recurso de API”, y se mostrará un mensaje que indica que el recurso se ha creado correctamente. Eso es todo lo que necesitamos en Logto por ahora.

Crear rol para Hasura#

Para aprovechar la gestión de permisos de Hasura, vamos a crear roles en Logto, esos roles se mapearán a los roles de Hasura.

Recuerda asignar el rol a los usuarios.

Habilitar la autenticación de webhook en Hasura#

Hasura utiliza la gestión de acceso basada en roles, que maneja la autorización. Así que, solo necesitamos resolver la autenticación. Admite dos métodos: Webhook y JWT. Elegimos webhook ya que es más flexible.

Para habilitar la autenticación de webhook, debes establecer el secreto de administrador y el endpoint del webhook de autenticación.

• El secreto de administrador es la clave para tener acceso de administrador de Hasura al enviar solicitudes. Es necesario antes de habilitar la autenticación de webhook. Recuerda mantenerlo en un lugar seguro y no usarlo en producción.
• El endpoint del webhook de autenticación es una URL para enviar solicitudes de autenticación.

Puedes configurarlos mediante variables de entorno:

Puedes notar que usamos el identificador de la API llenado en Logto para construir el endpoint del webhook de autenticación. Esto asegura que el usuario esté pasando el token de portador correcto en lugar de uno aleatorio que pueda ser de un malicioso.

Necesitas actualizar el endpoint del webhook de autenticación si tienes un endpoint o indicador de API diferente en Logto. Digamos que tienes https://logto.domain.com como el endpoint de Logto y https://graphql.domain.com como el identificador de la API, entonces será:

A partir de ahora, para cada solicitud de GraphQL, Hasura llevará todos los encabezados de solicitud al endpoint del webhook de autenticación de Logto, y Logto responderá adecuadamente.

Enviar solicitudes de GraphQL seguras#

Resumen#

Dado que no usaremos el secreto de administrador de Hasura en producción, cada solicitud de GraphQL está asegurada por los siguientes encabezados:

• Authorization El token de portador estándar que genera Logto.
• Expected-Role El rol que quieres que Logto muestre en la respuesta del webhook de autenticación.

El encabezado Authorization requiere un Token de Acceso válido en formato JWT con el indicador de la API de Hasura para la audiencia. Espera, es bastante difícil recordar y componer todas estas cosas. Afortunadamente, tenemos los SDKs de Logto para simplificar la parte geek.

Integrar Logto SDK#

Sigue la guía de integración para integrar un SDK de Logto en tu aplicación cliente. No solo habilita la capacidad de generar un Token de Acceso válido para las solicitudes de GraphQL, sino también una experiencia de inicio de sesión fluida para tus usuarios finales.

Una vez que termines la guía, necesitamos una pequeña modificación en el LogtoConfig: Agregar el indicador de API que creaste en la Consola de Administración de Logto a resources. Tomando el SDK de React como ejemplo:

Enviar solicitudes#

¡Finalmente! Después de que el usuario ha iniciado sesión, usa getAccessToken() en Logto SDK para obtener el Token de Acceso para las solicitudes de GraphQL de Hasura:

Recapitulación#

Con el esfuerzo anterior, implementamos con éxito todas las cosas ineludibles en la introducción:

• Un endpoint de API GraphQL impulsado por esquema de base de datos
• Un servicio de autenticación e identidad sobre el protocolo OIDC
• El flujo completo de inicio de sesión del usuario final y la gestión del estado de autenticación
• Acceso seguro a la API basado en la identidad del usuario y roles

¿No fue tan difícil, verdad? Si encuentras algún problema, no dudes en unirte al servidor de discord de Logto o Hasura para chatear en vivo con el equipo.