Cómo configurar experiencias de inicio de sesión personalizadas para negocios con múltiples aplicaciones y múltiples inquilinos.
Configurar un flujo de inicio de sesión para tu aplicación es bastante común, pero a veces te encuentras con un escenario un poco complejo,
El enfoque más sencillo es mantener una experiencia de inicio de sesión universal para todas las aplicaciones y organizaciones. Por ejemplo, HubSpot ofrece una amplia gama de productos, pero su experiencia de inicio de sesión es consistente en todos ellos. Esto ayuda a enfatizar la marca matriz, como HubSpot, en lugar de productos individuales como Marketing Hub.
Algunas empresas siguen una estrategia multiproducto pero prefieren mantener un único grupo de usuarios. Por ejemplo, Atlassian, una conocida empresa SaaS, ofrece múltiples productos de software como Jira y Confluence. Aquí está su pantalla de inicio de sesión.
La URL de inicio de sesión incluye el parámetro ?bundle=jira-software para indicar que esta es la interfaz de inicio de sesión para el producto Jira.
La URL de inicio de sesión incluye el parámetro ?bundle=confluence para especificar que esta es la interfaz de inicio de sesión para el producto Confluence.
Diferencias en la UI de inicio de sesión entre las aplicaciones:
Sin embargo, los métodos de autenticación clave se mantienen consistentes en todas las aplicaciones. Esto asegura que los usuarios tengan un perfil unificado, incluidos sus identificadores (correo electrónico, cuentas sociales) y factores de autenticación (por ejemplo, contraseñas), para una gestión de identidad más efectiva.
Otro ejemplo es Notion, una aplicación multiinquilino que permite a diferentes clientes alojar espacios de trabajo separados. Por ejemplo, si ingresas
Si "Silverhand" es el nombre del espacio de trabajo, Notion mostrará la UI de inicio de sesión específica de la organización. La única diferencia es el logo; todo lo demás permanece igual.
Primero, necesitas una solución de identidad y autenticación como base para construir. Tomemos a Logto como ejemplo para mostrar las soluciones. Logto ofrece varias opciones para lograr esto:
Esta es la solución rápida y más fácil si solo quieres personalizar el Logo y el color del botón.
Activando "experiencia de inicio de sesión a nivel de aplicación", puedes configurar una marca y colores específicos para cada aplicación. Cuando se inicia un inicio de sesión desde una aplicación con la marca a nivel de aplicación habilitada, la experiencia de inicio de sesión se personalizará de acuerdo con las configuraciones de marca a nivel de aplicación; de lo contrario, será predeterminada a las configuraciones de experiencia de inicio de sesión omnicanal.
Ambas configuraciones de modo claro y oscuro están disponibles para la marca a nivel de aplicación. Las configuraciones de modo oscuro solo tendrán efecto cuando el modo oscuro esté habilitado en las configuraciones de experiencia de inicio de sesión omnicanal.
Luego, al activar un inicio de sesión, puedes pasar la ID de la organización en el parámetro organization_id para indicar a Logto qué logotipo de organización mostrar. Por ejemplo, para mostrar el logotipo de la organización para la ID de organización 123456:
organization_id en el objeto extraParams del método signIn.organization_id al solicitar el endpoint de autorización.Aquí hay un ejemplo de cómo pasar el parámetro organization_id en el método signIn usando Logto browser SDK:
Si personalizar el logo y el color no es suficiente, por ejemplo, si quieres ocultar opciones específicas de inicio de sesión social o cambiar por completo la apariencia, puedes subir tu propia UI a Logto Cloud.
Para mostrar diferentes UIs basadas en la aplicación u organización, utiliza organization_id y app_id de los parámetros de búsqueda. Luego, escribe un script para controlar la UI según estos parámetros. Para más detalles, consulta el tutorial "Bring Your Own UI".