¿Cómo puedo personalizar la experiencia de inicio de sesión para cada aplicación u organización?

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,

1. Ejecutas un negocio con múltiples aplicaciones.
2. Tienes una aplicación multiinquilino que admite diferentes espacios de trabajo.

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.

Inicio de sesión a nivel de aplicación#

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:

1. Usan diferentes logotipos para indicar el producto específico.
2. Tienen apariencias distintas, como diferentes fuentes y estilos de botones.

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.

Inicio de sesión a nivel de organización#

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.

¿Cómo podemos personalizar la experiencia de inicio de sesión para cada aplicación u organización?#

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:

Configúralo directamente en Logto Cloud#

Esta es la solución rápida y más fácil si solo quieres personalizar el Logo y el color del botón.

Configurar a nivel de aplicació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.

Configurar a nivel de organización#

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:

• Si estás utilizando Logto SDK, puedes pasar el parámetro organization_id en el objeto extraParams del método signIn.
• Si estás utilizando un cliente OIDC, puedes pasar el parámetro 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:

Trae tu propia UI si necesitas una personalización más detallada#

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".