## 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](https://github.com/logto-io/logto): Te ayuda a construir el inicio de sesión, autenticación e identidad del usuario en minutos. - [Hasura](https://github.com/hasura/graphql-engine): 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](https://docs.logto.io/docs/tutorials/get-started/) como [Hasura](https://hasura.io/docs/latest/getting-started/index/) 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` Si estás usando Docker/Docker Compose, para acceder al `localhost` de tu máquina (host), puedes usar la cadena mágica de Docker `host.docker.internal`. En este caso, el endpoint de Logto será `http://host.docker.internal:3001`. 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. Modal Crear 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.

El nombre del rol debe ser igual al nombre del rol en la página "Permisos" 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](https://hasura.io/docs/latest/auth/index/), que maneja la autorización. Así que, solo necesitamos resolver la autenticación. Admite dos métodos: Webhook y JWT. Elegimos [webhook](https://hasura.io/docs/latest/auth/authentication/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](https://hasura.io/docs/latest/auth/authentication/webhook/#configuring-webhook-mode): ```yaml HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey # Reemplaza con tu propio secreto HASURA_GRAPHQL_AUTH_HOOK: http://localhost:3001/api/authn/hasura?resource=https://hasura.api ``` 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á: ```yaml HASURA_GRAPHQL_AUTH_HOOK: https://logto.domain.com/api/authn/hasura?resource=https://graphql.domain.com ``` 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. Si el usuario que indica el encabezado `Authorization` no tiene el `Expected-Role`, Logto responderá con `401 No autorizado`. 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](https://docs.logto.io/docs/recipes/integrate-logto/) 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: ```tsx const config: LogtoConfig = { endpoint: 'http://localhost:3001', appId: '', resources: ['https://hasura.api'], // Agrega esta línea }; ``` ### 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: ```tsx const accessToken = await logto.getAccessToken('https://hasura.api'); // Antes de enviar la solicitud request.headers.set('Authorization', `Bearer ${accessToken}`); request.headers.set('Expected-Role', 'user'); ``` ## 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](https://discord.gg/vRvwuwgpVX) o [Hasura](https://discord.gg/hasura) para chatear en vivo con el equipo.