Español

oidc
supabase
auth
rls
jwt

Integración con Supabase

Aprende cómo integrar Logto con Supabase para mejorar la experiencia de autenticación de tus aplicaciones.

Yijun

Developer

5/16/2024

Deja de perder semanas en la autenticación de usuarios

Lanza aplicaciones seguras más rápido con Logto. Integra la autenticación de usuarios en minutos y concéntrate en tu producto principal.

Comenzar

Logto es un proveedor moderno de servicios de autenticación de identidad que ofrece soporte de inicio de sesión seguro, completo y fácil de usar para aplicaciones. Además, proporciona una gran cantidad de SDKs y guías de integración en múltiples frameworks y lenguajes de programación, lo que te permite integrar sin problemas servicios de autenticación de identidad de nivel empresarial en tu aplicación en cuestión de minutos.

Este artículo se centra principalmente en detallar cómo integrar Supabase con Logto.

Fundamentos de Supabase

Supabase utiliza la Seguridad a Nivel de Fila de Postgres para controlar los permisos de acceso a los datos. En términos simples, al crear políticas de Seguridad a Nivel de Fila para las tablas en la base de datos, podemos restringir y gestionar quién puede leer, escribir y actualizar datos en una tabla.

Supongamos que tienes una tabla llamada "posts" en tu base de datos, con el siguiente contenido:

El campo user_id en la tabla representa al usuario al que pertenece cada dato de post. Puedes restringir a cada usuario para que solo acceda a sus propios datos de post basándote en el campo user_id.

Sin embargo, antes de que esto pueda implementarse, Supabase necesita poder identificar al usuario actual que está accediendo a la base de datos.

Agregar datos del usuario a las solicitudes de Supabase

Gracias al soporte de Supabase para JWT, cuando nuestra aplicación interactúa con Supabase, podemos generar un JWT que contenga los datos del usuario utilizando el secreto JWT proporcionado por Supabase. Luego usamos este JWT como el encabezado de Autenticación al realizar solicitudes. Al recibir la solicitud, Supabase verifica automáticamente la validez del JWT y permite el acceso a los datos contenidos en él durante los procesos posteriores.

Primero, podemos obtener el secreto JWT proporcionado por Supabase desde la “Configuración del Proyecto” en el panel de control de Supabase:

Página de configuración de la API de Supabase

Luego, cuando usamos el SDK de Supabase para hacer solicitudes a Supabase, utilizamos este secreto para generar nuestro JWT y adjuntarlo como el encabezado de Autenticación a la solicitud. (Ten en cuenta que este proceso ocurre dentro del servicio backend de tu aplicación, y el secreto JWT nunca debería ser expuesto a terceros).

A continuación, navega al Editor de SQL en el panel de control de Supabase y crea una función para recuperar el userId llevado en la solicitud:

El código utilizado en la imagen es el siguiente:

Como muestra el código, en Supabase, puedes recuperar la carga útil del JWT que generamos llamando a request.jwt.claims. El campo userId dentro de la carga útil es el valor que hemos establecido.

Con esta función, Supabase puede determinar el usuario que está accediendo actualmente a la base de datos.

Crear una política de Seguridad a Nivel de Fila

A continuación, podemos crear una política de Seguridad a Nivel de Fila para restringir a cada usuario para que solo acceda a sus propios datos de posts basándose en el campo user_id en la tabla de posts.

Navega a la página del Editor de Tablas en el panel de control de Supabase y selecciona la tabla de posts.
Haz clic en "Agregar Política RLS" en la parte superior de la tabla.
En la ventana que aparece, haz clic en "Crear política".
Ingresa un Nombre para la Política y elige el comando SELECT en la Política.
En el bloque using del código a continuación, ingresa:

Al aprovechar estas políticas, el control de acceso a los datos dentro de Supabase se logra.

En aplicaciones del mundo real, crearías varias políticas para restringir acciones de usuario como la inserción y modificación de datos. Sin embargo, esto está fuera del alcance de este artículo. Para más información sobre la Seguridad a Nivel de Fila (RLS), consulta Asegura tus datos usando Seguridad a Nivel de Fila de Postgres.

Proceso básico de integración con Logto

Como se mencionó anteriormente, dado que Supabase utiliza RLS para su control de acceso, la clave para integrarse con Logto (u otro servicio de autenticación) radica en obtener el id de usuario del usuario autorizado y enviarlo a Supabase. Todo el proceso se ilustra en el siguiente diagrama:

A continuación, explicaremos cómo integrar Logto con Supabase basándonos en este diagrama de proceso.

Integración con Logto

Logto ofrece guías de integración para varios frameworks y lenguajes de programación.

En general, las aplicaciones construidas con estos frameworks y lenguajes se dividen en categorías tales como Aplicaciones Nativas, SPAs (aplicaciones de una sola página), aplicaciones web tradicionales y aplicaciones M2M (máquina a máquina). Puedes visitar la página de Inicio rápido de Logto para integrar Logto en tu aplicación según la pila tecnológica que estés utilizando. Después, sigue las instrucciones a continuación para integrar Logto en tu proyecto según el tipo de aplicación que estés desarrollando.

Aplicación Nativa o SPA

Tanto las aplicaciones nativas como las SPAs se ejecutan en tu dispositivo, y las credenciales (token de acceso) obtenidas después del inicio de sesión se almacenan localmente en tu dispositivo.

Por lo tanto, al integrar tu aplicación con Supabase, necesitas interactuar con Supabase a través de tu servicio backend porque no puedes exponer información sensible (como el secreto JWT de Supabase) en el dispositivo de cada usuario.

Supongamos que estás construyendo tu SPA usando React y Express. Has integrado con éxito Logto en tu aplicación siguiendo la Guía de SDK de React de Logto (puedes consultar el código en nuestro ejemplo de react). Además, has añadido la validación del token de acceso de Logto a tu servidor backend según la documentación de Protege tu API en Node (Express).

A continuación, usarás el token de acceso obtenido de Logto para solicitar datos de usuario a tu servidor backend:

En tu servidor backend, ya has extraído el id de usuario del usuario que ha iniciado sesión a partir del token de acceso utilizando middleware:

Ahora, puedes usar el getSupabaseClient descrito anteriormente para adjuntar el userId al JWT utilizado en solicitudes posteriores a Supabase. Alternativamente, puedes crear un middleware para crear un cliente de Supabase para solicitudes que necesitan interactuar con Supabase:

En el flujo de procesamiento posterior, puedes llamar directamente a ctx.supabase para interactuar con Supabase:

En este código, Supabase devolverá solo los datos de posts que pertenezcan al usuario actual según las políticas establecidas anteriormente.

Aplicación web tradicional

La principal diferencia entre una aplicación web tradicional y una aplicación Nativa o SPA es que una aplicación web tradicional renderiza y actualiza páginas únicamente en el servidor web. Por lo tanto, las credenciales de usuario son gestionadas directamente por el servidor web, mientras que en las aplicaciones Nativas y SPAs, residen en el dispositivo del usuario.

Al integrar Logto con una aplicación web tradicional en Supabase, puedes recuperar directamente el id de usuario del usuario que ha iniciado sesión desde el backend.

Tomando como ejemplo un proyecto de Next.js, después de integrar Logto en tu proyecto siguiendo la Guía de SDK para Next.js, puedes usar el SDK de Logto para recuperar la información del usuario y construir el JWT correspondiente para interactuar con Supabase.

Aplicación máquina a máquina (M2M)

Máquina a máquina (M2M) se utiliza a menudo cuando tu aplicación necesita comunicarse directamente con servidores de recursos, como un servicio estático que recupera posts diarios, etc.

Puedes utilizar la Guía de autenticación de máquina a máquina: Auth con Logto para la autenticación de la aplicación M2M. La integración entre Supabase y aplicaciones máquina a máquina es similar a la de aplicaciones Nativas y SPAs (como se describe en la sección "Aplicación Nativa o SPA"). Involucra la obtención de un token de acceso de Logto y luego validarlo a través de una API backend protegida.

Sin embargo, es importante tener en cuenta que las aplicaciones Nativas y SPAs suelen estar diseñadas para usuarios finales, por lo que el id de usuario obtenido representa al usuario en sí. Sin embargo, el token de acceso para aplicaciones máquina a máquina representa la aplicación en sí, y el campo sub en la carga del token de acceso es el id del cliente de la aplicación M2M, no un usuario específico. Por lo tanto, durante el desarrollo, es crucial distinguir qué datos están destinados a las aplicaciones M2M.

Además, si deseas que una aplicación M2M específica acceda a Supabase en nombre de todo el servicio para evitar las restricciones de RLS, puedes usar el service_role secreto de Supabase para crear un cliente de Supabase. Es útil cuando deseas realizar tareas administrativas o automatizadas que requieren acceso a todos los datos sin estar restringido por las políticas de Seguridad a Nivel de Fila configuradas para usuarios individuales.

El secreto de service_role se puede encontrar en la misma página que el secreto JWT:

Al crear un cliente de Supabase, usa el secreto de service_role, luego este cliente puede acceder a todos los datos en la base de datos:

Resumen

En este artículo, profundizamos en la integración de Logto con Supabase, arrojando luz sobre ideas clave y aspectos críticos de la integración. Exploramos conceptos como la autenticación JWT y las políticas de Seguridad a Nivel de Fila, guiándote a través del proceso de incorporar sin problemas Logto en tus aplicaciones potenciadas por Supabase. Con este conocimiento, esperamos que puedas mejorar con confianza la seguridad de tu aplicación, funcionalidad e incluso expandir tus proyectos con características adicionales.

Prueba Logto Cloud gratis

Fundamentos de Supabase#

Agregar datos del usuario a las solicitudes de Supabase#

Crear una política de Seguridad a Nivel de Fila#

Proceso básico de integración con Logto#

Integración con Logto#

Aplicación Nativa o SPA#

Aplicación web tradicional#

Aplicación máquina a máquina (M2M)#

Resumen#

Fundamentos de Supabase#

Agregar datos del usuario a las solicitudes de Supabase#

Crear una política de Seguridad a Nivel de Fila#

Proceso básico de integración con Logto#

Integración con Logto#

Aplicación Nativa o SPA#

Aplicación web tradicional#

Aplicación máquina a máquina (M2M)#

Resumen#

Fundamentos de Supabase

Agregar datos del usuario a las solicitudes de Supabase

Crear una política de Seguridad a Nivel de Fila

Proceso básico de integración con Logto

Integración con Logto

Aplicación Nativa o SPA

Aplicación web tradicional

Aplicación máquina a máquina (M2M)

Resumen

Fundamentos de Supabase

Agregar datos del usuario a las solicitudes de Supabase

Crear una política de Seguridad a Nivel de Fila

Proceso básico de integración con Logto

Integración con Logto

Aplicación Nativa o SPA

Aplicación web tradicional

Aplicación máquina a máquina (M2M)

Resumen