Construye una aplicación SaaS multi-inquilino: Una guía completa desde el diseño hasta la implementación

¿Cómo se construyen aplicaciones como Notion, Slack o Figma? Estas aplicaciones SaaS multi-inquilino parecen simples de usar, pero ¿construir una tú mismo? Esa es otra historia.

Cuando pensé por primera vez en construir una bestia tan compleja, mi mente explotó:

• Los usuarios necesitan múltiples opciones de inicio de sesión (correo electrónico, Google, GitHub)
• Cada usuario puede crear y pertenecer a múltiples organizaciones
• Diferentes niveles de permiso dentro de cada organización
• Organizaciones empresariales que requieren auto-unión para dominios de correo electrónico específicos
• Requisitos de MFA para operaciones sensibles
• ...

"Jefe, hablemos sobre el diseño del producto en dos semanas. Estoy atascado en el barro en este momento."

Pero cuando realmente comencé a trabajar en ello, descubrí que no es tan desalentador como parece.

Simplemente construí un sistema con todas estas características en MENOS DE 2 HORAS!

Te mostraré exactamente cómo diseñar e implementar un sistema así desde cero, y te sorprenderá lo simple que realmente es en 2025 con herramientas modernas y el enfoque arquitectónico correcto.

El código fuente completo está disponible al final de este artículo. ¡Vamos a profundizar!

Comenzaremos con un producto SaaS de documentación AI llamado DocuMind.

DocuMind es un producto SaaS de documentación AI diseñado con un modelo multi-inquilino para apoyar a usuarios individuales, pequeñas empresas y empresas.

La plataforma proporciona potentes capacidades de AI para la gestión de documentos, incluyendo generación automática de resúmenes, extracción de puntos clave y recomendaciones inteligentes de contenido dentro de las organizaciones.

¿Qué características se requieren para la autenticación y autorización en SaaS?#

Primero, revisemos los requisitos necesarios. ¿Qué características necesitas?

Arquitectura multi-inquilino#

Para habilitar una arquitectura multi-inquilino, necesitarás una capa de entidad llamada organización. Imagina tener un único grupo de usuarios que pueden acceder a múltiples espacios de trabajo. Cada organización representa un espacio de trabajo, y los usuarios mantienen una única identidad mientras acceden a diferentes espacios de trabajo (organizaciones) según sus roles asignados.

Es una característica ampliamente utilizada en los proveedores de autenticación. Una organización en un sistema de gestión de identidades corresponde al espacio de trabajo, proyecto o inquilino de tu aplicación SaaS.

Membership#

Un miembro es un concepto temporal utilizado para indicar el estado de membresía de una identidad dentro de una organización.

Por ejemplo, Sarah se registra en tu aplicación usando su correo electrónico, [email protected]. Ella puede pertenecer a diferentes espacios de trabajo. Si Sarah es parte de Espacio de trabajo A pero no de Espacio de trabajo B, se considera miembro de Espacio de trabajo A pero no de Espacio de trabajo B.

Diseño de roles y permisos#

En una arquitectura multi-inquilino, los usuarios necesitan roles con permisos específicos para acceder a sus recursos de inquilino. Los permisos son controles de acceso detallados que definen acciones específicas, como leer: orden o escribir: orden. Determinan qué acciones se pueden realizar en recursos particulares.

Los roles son un conjunto de permisos asignados a los miembros en un entorno multi-inquilino.

Necesitarás definir estos roles y permisos, luego asignar roles a los usuarios, y a veces puede incluir procesos automatizados. Por ejemplo:

1. Los usuarios que se unan a una organización recibirán automáticamente el rol de miembro.
2. El primer usuario que cree un espacio de trabajo se asignará automáticamente el rol de administrador.

Flujo de registro e inicio de sesión#

Asegúrate de un proceso de registro y autenticación amigable para el usuario y seguro, incluyendo opciones básicas de inicio de sesión y registro:

1. Inicio de sesión con correo electrónico y contraseña: Método de inicio de sesión tradicional con correo electrónico y contraseña.
2. Inicio de sesión sin contraseña: Usa códigos de verificación por correo electrónico para un acceso fácil y seguro.
3. Gestión de cuenta: Un centro de cuentas donde los usuarios pueden actualizar su correo electrónico, contraseña y otros detalles.
4. Inicio de sesión social: Opciones como Google y GitHub para un inicio de sesión rápido.
5. Autenticación multifactor (MFA): Mejora la seguridad permitiendo el inicio de sesión a través de aplicaciones de autenticación como Duo.

Creación de inquilinos e invitación#

En una aplicación SaaS multi-inquilino, una diferencia clave en el flujo de usuarios es la necesidad de soportar la creación de inquilinos y las invitaciones de miembros. Este proceso requiere una planificación y ejecución cuidadosa, ya que desempeña un papel clave en la activación y crecimiento del producto.

Aquí hay algunos flujos típicos de uso que necesitas considerar:

Aquí están algunos escenarios comunes encontrados en casi todas las aplicaciones SaaS. Úsalos como referencia para inspirar a tu equipo de producto y diseño, y siéntete libre de crear tus propios flujos según sea necesario.

Arquitectura técnica y diseño del sistema#

Una vez que entendemos todos los requisitos del producto, pasemos a la implementación.

Definir estrategia de autenticación#

La autenticación parece aterradora. Los usuarios necesitan:

• Registro/inicio de sesión con correo electrónico y contraseña
• Inicio de sesión con un clic con Google/Github
• Restablecimiento de contraseña cuando la olvidan
• Inicio de sesión a nivel de equipo para clientes empresariales
• ...

Implementar solo estas características básicas podría llevar semanas de desarrollo.

Pero ahora, ¡no necesitamos construir NADA de esto nosotros mismos!

Los proveedores de autenticación modernos (voy a elegir Logto esta vez) han empaquetado todas estas características para nosotros. El flujo de autenticación es sencillo:

¡De semanas de desarrollo a 15 minutos de configuración, Logto maneja todos los flujos complejos por nosotros! Cubriremos los pasos de integración en la sección de implementación más tarde. ¡Ahora podemos enfocarnos en construir las características principales de DocuMind!

Establecer arquitectura multi-inquilino#

El sistema de organización permite a los usuarios crear y unirse a múltiples organizaciones. Vamos a entender las relaciones centrales:

En este sistema, cada usuario puede pertenecer a múltiples organizaciones, y cada organización puede tener múltiples miembros.

Habilitar control de acceso en la aplicación multi-inquilino#

El Control de Acceso Basado en Roles (RBAC) es importante para asegurar la seguridad y escalabilidad en las aplicaciones SaaS multi-inquilino.

En una aplicación multi-inquilino, el diseño de permisos y roles suele ser consistente, ya que proviene del diseño del producto. Por ejemplo, en múltiples espacios de trabajo, generalmente hay un rol de administrador y un rol de miembro. Logto, como proveedor de auth, tiene el siguiente diseño de control de acceso basado en roles a nivel de organización:

1. Definiciones de permisos unificadas: Los permisos se definen a nivel del sistema y se aplican consistentemente en todas las organizaciones, asegurando una gestión de permisos mantenible y consistente
2. Plantillas de organización: Combinaciones predefinidas de roles y permisos a través de plantillas de organización, simplificando la inicialización de la organización

La relación de permisos se ve así:

Dado que cada usuario necesita sus propios roles dentro de cada organización, la relación entre roles y organizaciones debe reflejar los roles asignados a cada usuario:

Hemos diseñado el sistema de organización y el sistema de control de acceso, ¡y ahora podemos comenzar a construir nuestro producto!

Stack tecnológico#

Elegí un stack fácil de usar para principiantes y portátil:

1. Frontend: React (fácil de trasladar a Vue/Angular/Svelte)
2. Backend: Express (API simple e intuitiva)

¿Por qué separar el frontend y el backend? Porque tiene una arquitectura clara, es fácil de aprender y sencillo cambiar de stacks. Y para los proveedores de autenticación, uso Logto como ejemplo.

Y para las siguientes guías, sus patrones aquí funcionan con: Cualquier frontend, cualquier backend y cualquier sistema de autenticación.

Añadir flujo básico de autenticación a tu aplicación#

Este es el paso más fácil. Solo necesitamos integrar Logto en nuestro proyecto. Luego podemos configurar métodos de inicio de sesión/registro de usuarios en la Consola de Logto según nuestras necesidades.

Instalar Logto en tu aplicación#

Primero, inicia sesión en Logto Cloud. Puedes registrarte para obtener una cuenta gratuita si no tienes una. Crea un Inquilino de Desarrollo para realizar pruebas.

En la Consola de Inquilino, haz clic en el botón "Aplicación" a la izquierda. Luego selecciona React para comenzar a construir nuestra aplicación.

Sigue la guía en la página. Puedes completar la integración de Logto en ¡aproximadamente 5 minutos!

Aquí está mi código de integración:

Aquí hay un truco útil: Nuestra página de inicio de sesión tiene botones de "Iniciar sesión" y "Registrarse". El botón de "Registrarse" lleva directamente a la página de registro de Logto. Esto funciona a través de la primera pantalla de Logto, que determina qué paso del flujo de autenticación ven los usuarios primero.

Puedes predefinir la página de registro cuando se espera que tu producto tenga muchos nuevos usuarios.

Después de hacer clic en iniciar sesión, irás a la página de inicio de sesión de Logto. ¡Tras un inicio de sesión exitoso (o registro), felicidades! ¡Tu aplicación tiene su primer usuario (tú)!

Y llama a la función signOut desde el hook useLogto para cerrar sesión al usuario cuando lo desees.

Personalizar métodos de inicio de sesión y registro#

En la Consola de Logto, haz clic en "Experiencia de inicio de sesión" en el menú de la izquierda. Luego haz clic en la pestaña "Registro y inicio de sesión". En esta página, sigue las instrucciones para configurar los métodos de inicio de sesión/registro de Logto.

Y el flujo de inicio de sesión se verá así:

Habilitar autenticación multifactor#

Con Logto, habilitar MFA es simple. Solo haz clic en el botón "Autenticación multifactor" en la Consola de Logto. Luego habilítalo en la página de autenticación multifactor.

Y el flujo de MFA se verá así:

¡Todo es tan simple! ¡Hemos configurado un sistema de autenticación de usuario complejo en solo unos minutos!

Añadiendo experiencia de organización multi-inquilino#

¡Ahora tenemos a nuestro primer usuario! Sin embargo, este usuario aún no pertenece a ninguna organización, y no hemos creado ninguna organización.

Logto proporciona soporte incorporado para multi-tenancy. Puedes crear cualquier número de organizaciones en Logto. Cada organización puede tener múltiples miembros.

Cada usuario puede obtener su información de organización de Logto. Esto permite el soporte multi-tenancy

Obtener información de la organización de un usuario#

Para obtener la información de la organización de un usuario de Logto, sigue estos dos pasos:

Declara el acceso a información de la organización en el Config de Logto. Esto se hace configurando los scopes y resources apropiados.

Utiliza el método fetchUserInfo de Logto para obtener información del usuario, incluyendo datos de la organización.

Después de completar estos pasos, necesitas cerrar sesión e iniciar sesión nuevamente. Esto es necesario porque modificamos el alcance y recurso solicitados.

Ahora mismo, no has creado ninguna organización. El usuario tampoco se ha unido a ninguna organización. El panel mostrará "Aún no perteneces a ninguna organización".

A continuación, crearemos una organización para nuestros usuarios y los agregaremos a ella.

Gracias a Logto, no necesitamos construir relaciones complejas de organizaciones. Solo necesitamos crear una organización en Logto y agregar usuarios a ella. Logto maneja toda la complejidad por nosotros. Hay dos formas de crear organizaciones:

1. Crear organizaciones manualmente a través de la Consola de Logto
2. Usar la API de Gestión de Logto para crear organizaciones, especialmente cuando diseñas un flujo SaaS que permite a los usuarios crear sus propias organizaciones (espacios de trabajo).

Crear organización en la consola de Logto#

Haz clic en el botón "Organizaciones" en el menú de la izquierda de la Consola de Logto. Crea una organización.

Ahora tienes tu primera organización.

A continuación, agreguemos al usuario a esta organización.

Ve a la página de detalles de la organización. Cambia a la pestaña de Miembros. Haz clic en el botón "+ Agregar miembro". Selecciona tu usuario de inicio de sesión de la lista izquierda. Haz clic en el botón "Agregar miembros" en la esquina inferior derecha. Ahora has agregado exitosamente al usuario a esta organización.

Actualiza tu página APP. ¡Verás que el usuario ahora pertenece a una organización!

Implementar experiencia de creación de organización auto-servida#

Crear una organización en la consola no es suficiente. Tu aplicación SaaS necesita un flujo que permita a los usuarios finales crear y gestionar sus propios espacios de trabajo fácilmente. Para implementar esta funcionalidad, utiliza la API de Gestión de Logto.

Para orientación, consulta la documentación de Interactúa con la API de Gestión para configurar la comunicación de API con Logto.

Comprender el flujo de interacción de auth de la organización#

Tomemos el flujo de creación de organización como ejemplo. Así funciona el proceso de creación de la organización:

Este flujo tiene dos requisitos de autenticación clave:

1. Proteger la API del servicio backend:
   • El acceso del Frontend a nuestra API del Servicio Backend requiere autenticación
   • Los puntos finales de la API están protegidos validando el Token de Acceso de Logto del usuario
   • Asegura que solo los usuarios autenticados puedan acceder a nuestros servicios
2. Acceder a la API de Gestión de Logto:
   • El Servicio Backend necesita llamar de manera segura a la API de Gestión de Logto
   • Sigue la guía Interactúa con la API de Gestión para configurarlo
   • Usa autenticación Máquina-a-Máquina para obtener credenciales de acceso

Proteger tu API backend#

Primero, creamos un punto final de API en nuestro servicio backend para crear organizaciones.

Nuestra API del Servicio Backend solo permite a los usuarios autenticados. Necesitamos usar Logto para proteger nuestra API. También necesitamos saber la información del usuario actual (como el ID de usuario).

En el concepto de Logto (y OAuth 2.0), nuestro servicio backend actúa como un servidor de recursos. Los usuarios acceden al servidor de recursos de DocuMind con un Token de Acceso desde el frontend. El servidor de recursos verifica este token. Si es válido, devuelve los recursos solicitados.

Creemos un Recurso API para representar nuestro servicio backend.

Ve a la Consola de Logto.

1. Haz clic en el botón "Recursos API" a la derecha.
2. Haz clic en "Crear recurso API". Selecciona Express en el popup.
3. Ingresa "API de DocuMind" como el nombre del API. Usa "https://api.documind.com" como el identificador del API.
4. Haz clic en crear.

No te preocupes por esta URL del identificador del API. Es solo un identificador único para tu API en Logto. No está relacionado con la URL real de tu servicio backend.

Verás un tutorial para usar el recurso API. Puedes seguir ese tutorial o nuestros pasos a continuación.

Cria un middleware requireAuth para proteger nuestro endpoint POST /organizations.

Para usar este middleware, necesitamos estas variables de entorno:

• LOGTO_JWKS_URL
• LOGTO_ISSUER

Obtén estas variables desde el endpoint de Configuración OpenID de tu inquilino de Logto. Visita https://<tu-id-inquilino>.logto.app/oidc/.well-known/openid-configuration. Encontrarás la información necesaria en el JSON devuelto:

Ahora usa el middleware requireAuth en nuestro endpoint POST /organizations.

Esto protege nuestro endpoint POST /organizations. Solo usuarios con tokens de acceso de Logto válidos pueden acceder a él.

Ahora podemos obtener el token de Logto en nuestro frontend. Los usuarios pueden crear organizaciones a través de nuestra API del servicio backend con este token. El middleware también nos da el ID del usuario, lo cual ayuda al agregar usuarios a organizaciones.

En el código de frontend, declara este recurso API en el config de Logto. Agrega su identificador al array de recursos.

Como antes, los usuarios necesitan iniciar sesión nuevamente después de actualizar el config de Logto.

En el Tablero, obtiene el Token de Acceso de Logto al crear una organización. Usa este token para acceder a nuestra API del servicio backend.

Ahora podemos acceder correctamente a la API del servicio backend de DocuMind.

Llamando a la API de Gestión de Logto#

Implementemos la creación de organizaciones usando la API de Gestión de Logto.

Al igual que las solicitudes de frontend al servicio backend, las solicitudes del servicio backend a Logto necesitan tokens de acceso.

En Logto, usamos autenticación Máquina-a-Máquina para los tokens de acceso. Consulta Interactúa con la API de Gestión.

Ve a la página de aplicaciones en la Consola de Logto. Crea una aplicación Máquina-a-Máquina. Asigna el rol "Acceso a la API de Gestión de Logto". Copia el Endpoint de Token, ID de la App y App Secret. Usaremos estos para los tokens de acceso.

Ahora podemos obtener tokens de acceso de la API de Gestión de Logto a través de esta aplicación M2M.

Usa este token de acceso para llamar a la API de Gestión de Logto.

Usaremos estas APIs de Gestión:

• POST /api/organizations: Crear organización (ver: Referencia de API de crear organización)
• POST /api/organizations/{id}/users: Agregar usuarios a la organización (ver: Referencia de API de agregar usuarios)

Ahora hemos implementado la creación de organizaciones a través de la API de Gestión de Logto. También podemos agregar usuarios a organizaciones.

Probemos esta función en el Tablero.

haz clic en "Crear Organización"

¡Creación exitosa!

El siguiente paso sería invitar a usuarios a una organización. Aún no implementaremos esta función en nuestro tutorial. Ya sabes cómo usar la API de Gestión. Puedes consultar este Creación y invitación de inquilinos como referencia de diseño de producto y fácilmente implementar esta función siguiendo esta publicación en el blog: Cómo implementamos la colaboración de usuarios dentro de una app multi-inquilino.

Implementar control de acceso en tu aplicación multi-inquilino#

Ahora pasemos al control de acceso de la organización.

Queremos lograr:

• Los usuarios solo pueden acceder a los recursos que pertenecen a sus propias organizaciones: Esto se puede hacer a través del token de organización de Logto
• Los usuarios tienen roles específicos dentro de las organizaciones (que contienen diferentes permisos) para realizar acciones autorizadas: Esto se puede implementar a través de la función de plantilla de organización de Logto

Veamos cómo implementar estas características.

Usando el token de organización de Logto#

Similar al token de acceso de Logto que mencionamos anteriormente, Logto emite un token de acceso correspondiente a un recurso específico, y los usuarios usan este token para acceder a recursos protegidos en el servicio backend. Correspondientemente, Logto emite un token de organización correspondiente a una organización específica, y los usuarios usan este token para acceder a recursos de organización protegidos en el servicio backend.

En la aplicación frontend, podemos usar el método getOrganizationToken de Logto para obtener un token para acceder a una organización específica.

Aquí, organizationId es el id de la organización a la que el usuario pertenece.

Antes de usar getOrganization o cualquier característica de organización, necesitamos asegurarnos de que el scope urn:logto:scope:organizations y el recurso urn:logto:resource:organization estén incluidos en el config de Logto. Como ya lo hemos declarado anteriormente, no lo repetiremos.

En nuestra página de organización, usamos el token de organización para obtener documentos dentro de la organización.

Hay dos puntos importantes a tener en cuenta en esta implementación:

1. Si el organizationId pasado a getOrganizationToken no es un id de organización que pertenece al usuario actual, este método no podrá obtener un token, asegurando así que los usuarios solo puedan acceder a sus propias organizaciones.
2. Al solicitar recursos de organización, usamos el token de organización en lugar del token de acceso porque para los recursos que pertenecen a una organización, queremos usar control de permisos de organización en lugar de control de permisos de usuario (comprenderás mejor esto cuando implementemos la API GET /documents más adelante).

A continuación, creamos una API GET /documents en nuestro servicio backend. Similar a cómo usamos el recurso API para proteger la API POST /organizations, usamos indicadores de recursos específicos de organización para proteger la API GET /documents.

Primero, creemos un middleware requireOrganizationAccess para proteger los recursos de la Organización.

Luego usamos el middleware requireOrganizationAccess para proteger la API GET /documents.

De esta manera, hemos implementado el uso de tokens de organización para acceder a los recursos de la organización. En el servicio backend, puedes recuperar recursos correspondientes de la base de datos según el id de la organización.

Algunos softwares requieren aislamiento de datos entre organizaciones. Para una discusión e implementación más detallada, puedes referirte a la publicación en el blog: Implementación de multi-inquilinato con PostgreSQL: Aprende a través de un ejemplo simple de la vida real.

Implementar diseño de control de acceso basado en roles a nivel de organización#

Hemos implementado el uso de tokens de organización para acceder a los recursos de la organización. A continuación, implementaremos el control de permisos de usuario dentro de las organizaciones usando RBAC.

Supongamos que DocuMind tiene dos roles: Administrador y Colaborador.

Los administradores pueden crear y acceder a documentos, mientras que los colaboradores solo pueden acceder a documentos.

Por lo tanto, nuestra Organización necesita tener estos dos roles: Administrador y Colaborador.

Administrador tiene tanto los permisos read:documents como create:documents, mientras que Colaborador solo tiene el permiso read:documents.

• Administrador
  • read:documents
  • create:documents
• Colaborador
  • read:documents

Aquí es donde entra la función de plantilla de organización de Logto.

Una plantilla de organización es una hoja de ruta del modelo de control de acceso para cada organización: define los roles y permisos que se aplican a todas las organizaciones.

¿Por qué plantilla de organización?

Porque la escalabilidad es uno de los requisitos más importantes para los productos SaaS. En otras palabras, lo que funciona para un cliente debería funcionar para todos los clientes.

Vayamos a Logto Console > Organization Templates > Permisos de organización y creemos dos permisos: read:documents y create:documents.

Luego ve a la pestaña de roles de organización para crear dos roles de usuario: Administrador y Colaborador, y asigna permisos correspondientes a estos roles.

De esta manera, hemos creado un modelo de permisos RBAC para cada organización.

A continuación, vamos a nuestra página de detalles de la organización para asignar roles apropiados a nuestros miembros.

¡Ahora los usuarios de nuestra organización tienen roles! Puedes lograr estos pasos a través de la API de Gestión de Logto:

Ahora podemos implementar el control de permisos de usuario verificando sus permisos.

En nuestro código, necesitamos hacer que el token de organización del usuario lleve información de permisos y luego verificar estos permisos en el backend.

En el config de Logto del código frontend, necesitamos declarar los permisos que los usuarios necesitan solicitar dentro de la organización. Agreguemos los permisos read:documents y create:documents al scopes.

Como de costumbre, inicia sesión nuevamente con tu usuario para que estas configuraciones surtan efecto.

Luego, en el middleware requireOrganizationAccess del backend, agregamos la verificación de permisos del usuario.

Luego creamos una API POST /documents y usamos el middleware requireOrganizationAccess con configuración de requiredScopes para proteger esta API y la API anterior GET /documents.

De esta manera, hemos implementado el control de permisos de usuario verificando los permisos del usuario.

En el frontend, puedes obtener información de permisos del usuario decodificando el token de organización o llamando al método getOrganizationTokenClaims de Logto.

Controla los elementos de la página según los permisos del usuario verificando los scopes en las claims.

Añadir más características de aplicación multi-inquilino#

Hasta ahora, hemos implementado las características básicas de usuario y organización en un sistema SaaS multi-inquilino. Sin embargo, todavía hay algunas características que no hemos cubierto, como personalizar el branding de la página de inicio de sesión para cada Organización, añadir automáticamente usuarios con emails de dominio específico a ciertas organizaciones e integrar la funcionalidad SSO a nivel empresarial.

Estas son todas características listas para usar, y puedes encontrar más información sobre estas características en la documentación de Logto.

Resumen#

¿Recuerdas lo abrumador que parecía al principio? Usuarios, organizaciones, permisos, características empresariales... parecía una montaña interminable por escalar.

Pero mira lo que hemos logrado:

• Un sistema completo de autenticación con múltiples opciones de inicio de sesión y soporte MFA
• Un sistema organizativo flexible que soporta múltiples membresías
• Control de acceso basado en roles dentro de las organizaciones

¿Y lo mejor? No tuvimos que reinventar la rueda. Aprovechando herramientas modernas como Logto, transformamos lo que podría haber sido meses de desarrollo en cuestión de horas.

El código fuente completo de este tutorial está disponible en: Ejemplo de SaaS Multi-inquilino.

Este es el poder del desarrollo moderno en 2025: podemos centrarnos en construir características únicas del producto en lugar de luchar con la infraestructura. ¡Ahora es tu turno de construir algo increíble!

Explora todas las características de Logto, desde Logto Cloud hasta Logto OSS, en el sitio web de Logto o regístrate en Logto cloud hoy.