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 > Marca. Esta sección te permite ajustar fácilmente los elementos clave de la marca.

Color de la marca

Define el color primario utilizado en toda la experiencia de inicio de sesión, incluidos los botones primarios, 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 estar 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 estar 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, ahora se utiliza el título del navegador para diferentes flujos (Iniciar sesión / Registrarse / Olvidó la contraseña, etc.) 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.

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

Ambas configuraciones de modo claro y oscuro están disponibles para la marca a nivel de organización. Las configuraciones de 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 usando 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.