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

El logotipo 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 logotipo en blanco, el logotipo no se mostrará en la interfaz.
  • También se puede cargar una versión del logotipo 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.

Ocultar la marca Logto​

Por defecto, las páginas de experiencia de inicio de sesión listas para usar muestran "Powered by Logto" en la parte inferior. Activa la opción "Ocultar la marca Logto" para eliminar la marca de Logto y crear una experiencia de inicio de sesión limpia y profesional que muestre exclusivamente la identidad de tu propia marca.

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 "Experiencia de inicio de sesión a nivel de aplicación", puedes configurar logotipos, favicons, colores e incluso CSS personalizado específicos 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 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 logotipo de la organización de tu cliente en la experiencia de inicio de sesión, puedes cargar los logotipos de la organización en la página de configuración de la organización. Navega a Consola > Organizaciones.

Al activar "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 logotipos, favicons, colores y CSS personalizado específicos 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é logotipo de organización mostrar. Por ejemplo, para mostrar el logotipo de la organización con ID 123456:

  • Si utilizas Logto SDK, 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 de organización están habilitadas, la personalización a nivel de organización tendrá prioridad. El orden de precedencia completo 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 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 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?