Saltar al contenido principal

Adapta a tu marca

Experiencia de inicio de sesión omni​

Personaliza el aspecto y la sensación 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 marca

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

Logo de la empresa

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

  • Hay algunas limitaciones para las imágenes: deben ser menores 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 menor de 500KB y estar en formato SVG, PNG, JPG, JPEG o ICO. Se recomienda subir 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 los diferentes flujos (Iniciar sesión / Registrarse / Olvidé mi contraseña, etc.) en lugar de un título personalizado.

Modo oscuro

Activa 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 multi-aplicación 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 logos de marca específicos, favicons, colores e incluso CSS personalizado para cada aplicación. Cuando se inicia un inicio de sesión desde una aplicación con la personalización a nivel de aplicación habilitada, la experiencia de inicio de sesión se personalizará según la configuración de marca de la aplicación; de lo contrario, se utilizarán los ajustes predeterminados de la experiencia de inicio de sesión omni.

Tanto los ajustes de modo claro como de modo oscuro están disponibles para la personalización a nivel de aplicación. Los ajustes de modo oscuro solo tendrán efecto cuando el modo oscuro esté habilitado en 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 subir los logos de la organización en la página de configuración de la organización. Navega a Consola > Organizaciones.

Al activar la "Experiencia de inicio de sesión a nivel de organización", al igual que la personalización a nivel de aplicación, también puedes configurar logos de marca específicos, favicons, colores y CSS personalizado para cada organización.

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 utilizas el SDK de Logto, puedes pasar el parámetro organization_id en el objeto extraParams del método signIn.
  • Si utilizas un cliente OIDC, puedes pasar el parámetro organization_id al solicitar el endpoint de autorización.

Tanto los ajustes de modo claro como de modo oscuro están disponibles para la personalización a nivel de organización. Los ajustes de modo oscuro solo tendrán efecto cuando el modo oscuro esté habilitado en la experiencia de inicio de sesión omni.

nota:

Si tanto la personalización a nivel de aplicación como la personalización a nivel de organización están habilitadas, la personalización a nivel de organización tendrá prioridad. El orden completo de precedencia es: Personalización a nivel de organización -> Personalización a nivel de aplicación -> 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 el SDK de navegador de Logto:

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 SDK de Logto. 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?