Saltar al contenido principal

Adapta a tu marca

Experiencia de inicio de sesión omni​

Personaliza el aspecto de tu página de inicio de sesión navegando a Consola > Experiencia de inicio de sesión > Branding. Esta sección te permite ajustar fácilmente los elementos clave de la marca.

Color de marca

Define el color principal utilizado en toda la experiencia de inicio de sesión, incluidos los botones principales, enlaces y otros componentes. Reemplaza el color púrpura predeterminado de Logto con el color de tu marca. Para el modo oscuro, se puede especificar un color de marca separado.

Logo de la empresa

El logo se mostrará en la página de inicio de sesión, la página de registro, la página de carga y otras interfaces con nuestra expansión.

  • Hay algunas limitaciones para las imágenes: deben ser de menos de 500KB y en formato SVG, PNG, JPG, JPEG o ICO.
  • Si dejas el campo del logo en blanco, el logo no se mostrará en la interfaz.
  • También se puede cargar una versión del logo para el modo oscuro.

Favicon

Un favicon es un pequeño icono que representa un sitio web y se muestra en la pestaña del navegador, marcadores y otras áreas de la interfaz del navegador.

  • La imagen debe ser de menos de 500KB y en formato SVG, PNG, JPG, JPEG o ICO. Se recomienda cargar una imagen cuadrada para asegurar un buen efecto de presentación.
  • También se puede cargar una versión del favicon para el modo oscuro.
  • Además, el título del navegador para diferentes flujos (Iniciar sesión / Registrarse / Olvidó la contraseña, etc.) se utiliza ahora en lugar de un título personalizado.

Modo oscuro

Habilita el modo oscuro para ajustar automáticamente la apariencia de la página de inicio de sesión según las preferencias del sistema del usuario.

Personalización específica de la aplicación​

Si tu negocio de múltiples aplicaciones necesita experiencias de inicio de sesión a nivel de aplicación, puedes configurarlo en la página de detalles de la aplicación. Navega a Consola > Aplicaciones.

Al activar la "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á según la configuración de la marca a nivel de aplicación; de lo contrario, se utilizará la configuración de la experiencia de inicio de sesión omni.

Están disponibles configuraciones tanto para el modo claro como para el modo oscuro para la marca a nivel de aplicación. Las configuraciones del modo oscuro solo tendrán efecto cuando el modo oscuro esté habilitado en la configuración de la experiencia de inicio de sesión omni.

Personalización específica de la organización​

Para mostrar dinámicamente el logo de la organización de tu cliente en la experiencia de inicio de sesión, puedes cargar los logos de la organización en la página de configuración de la organización. Navega a Consola > Organizaciones.

Luego, al iniciar un inicio de sesión, puedes pasar el ID de la organización en el parámetro organization_id para indicar a Logto qué logo de organización mostrar. Por ejemplo, para mostrar el logo de la organización con ID 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.

Están disponibles configuraciones tanto para el modo claro como para el modo oscuro para la marca a nivel de organización. Las configuraciones del modo oscuro solo tendrán efecto cuando el modo oscuro esté habilitado en la configuración de la experiencia de inicio de sesión omni.

Aquí tienes un ejemplo de cómo pasar el parámetro organization_id en el método signIn utilizando Logto browser SDK:

index.ts

logtoClient.signIn({
  // ...otros parámetros
  redirectUri: 'https://your-redirect-uri',
  extraParams: {
    organization_id: '123456',
  },
});
nota:

Estamos implementando gradualmente la función extraParams en todos los Logto SDKs. Si aún no la ves en tu SDK, por favor contáctanos.

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