Configuración de cuenta mediante la interfaz preconstruida del Centro de Cuenta

¿Qué es la interfaz preconstruida del Centro de Cuenta?

Logto proporciona una interfaz preconstruida del Centro de Cuenta que ofrece páginas listas para usar para que los usuarios finales gestionen la configuración de su cuenta. Esta interfaz preconstruida está alojada por Logto y gestiona tareas comunes de administración de cuentas, incluyendo:

Visualizar y editar el perfil de usuario (nombre, avatar y campos de perfil personalizados)
Actualizar dirección de correo electrónico y número de teléfono
Actualizar nombre de usuario
Establecer o actualizar la contraseña
Gestionar conexiones sociales (vincular y desvincular cuentas sociales)
Gestionar la configuración de MFA (aplicación autenticadora TOTP, claves de acceso, códigos de respaldo)
Activar o desactivar la verificación en dos pasos
Gestionar sesiones activas y aplicaciones autorizadas

La interfaz preconstruida del Centro de Cuenta está diseñada para funcionar perfectamente con tu aplicación, proporcionando una experiencia de usuario coherente sin que tengas que construir páginas personalizadas de gestión de cuentas.

Beneficios de usar la interfaz preconstruida

Esfuerzo de desarrollo nulo: Páginas listas para usar que funcionan desde el primer momento
Experiencia coherente: Coincide con el aspecto y la sensación de la experiencia de inicio de sesión de Logto
Seguridad incorporada: Todos los flujos de verificación y medidas de seguridad se gestionan automáticamente
Siempre actualizado: Las nuevas funciones y mejoras de seguridad están disponibles automáticamente

Páginas disponibles

La interfaz preconstruida del Centro de Cuenta proporciona las siguientes páginas, todas accesibles bajo la ruta /account del endpoint de tu tenant de Logto:

Ruta	Descripción
`/account/profile`	Página de perfil de usuario (nombre, avatar y campos de perfil personalizados)
`/account/security`	Centro de configuración de seguridad (verificación en dos pasos, cuentas sociales, sesiones)
`/account/email`	Actualizar o eliminar la dirección de correo electrónico principal
`/account/phone`	Actualizar o eliminar el número de teléfono principal
`/account/username`	Actualizar nombre de usuario
`/account/password`	Establecer o actualizar la contraseña
`/account/passkey/add`	Añadir una nueva clave de acceso (WebAuthn)
`/account/passkey/manage`	Ver y gestionar claves de acceso existentes
`/account/authenticator-app`	Configurar la aplicación autenticadora TOTP
`/account/authenticator-app/replace`	Reemplazar la aplicación autenticadora TOTP existente
`/account/backup-codes/generate`	Generar nuevos códigos de respaldo
`/account/backup-codes/manage`	Ver y gestionar códigos de respaldo

Por ejemplo, si el endpoint de tu tenant es https://example.logto.app, la página de actualización de correo electrónico estaría disponible en https://example.logto.app/account/email.

Cómo usar la interfaz preconstruida

Paso 1: Habilita Account API

La interfaz preconstruida del Centro de Cuenta depende de Account API. Navega a Consola > Inicio de sesión y cuenta > Centro de cuenta y habilita Account API.

Configura los permisos de los campos según tus necesidades:

Establece los campos en Edit para permitir que los usuarios los modifiquen
Establece los campos en ReadOnly si los usuarios solo deben visualizarlos
Establece los campos en Off para ocultarlos completamente

Configura los campos de perfil

El Centro de Cuenta muestra una página de Perfil donde los usuarios finales pueden ver y gestionar la información de su perfil. Para controlar qué campos de perfil aparecen en esta página:

Asegúrate de que el permiso del campo Name, Avatar, Profile o Custom data esté configurado en Edit o ReadOnly en las secciones de seguridad de la cuenta / perfil de usuario.
En la tarjeta Integrar interfaz preconstruida, añade los campos de perfil que deseas exponer desde el selector de campos de perfil. Estos campos se extraen del mismo catálogo utilizado por Recopilar perfil de usuario; cualquier campo definido allí también puede mostrarse en el Centro de Cuenta.
Arrastra y suelta para reordenar los campos como prefieras.

Solo los campos que estén tanto listados en los campos de perfil como cuyo permiso correspondiente no esté en Off aparecerán en la página de Perfil.

Paso 2: Enlaza a las páginas preconstruidas desde tu aplicación

Para usar la interfaz preconstruida del Centro de Cuenta, necesitas redirigir a los usuarios desde tu aplicación a las páginas correspondientes de Logto. Hay dos enfoques:

Enfoque A: Enlace directo con parámetro de redirección

Añade enlaces en tu aplicación que redirijan a los usuarios a las páginas preconstruidas. Incluye un parámetro de consulta redirect para devolver a los usuarios a tu aplicación después de completar la acción:

https://[tenant-id].logto.app/account/email?redirect=https://your-app.com/settings

Cuando los usuarios completen la actualización de su correo electrónico, serán redirigidos de vuelta a https://your-app.com/settings. Los usuarios que abandonen la página con el botón de retroceso regresan a la misma URL.

Enfoque B: Integración en tu flujo de configuración de cuenta

Puedes integrar las páginas preconstruidas en el flujo de configuración de cuenta de tu aplicación:

En la página de configuración de cuenta de tu aplicación, muestra la información actual del usuario
Proporciona botones de "Editar" o "Actualizar" que enlacen a las páginas preconstruidas correspondientes
Después de que el usuario complete o abandone la acción, será redirigido de vuelta a tu aplicación

Ejemplo de implementación:

function AccountSettings() {
  const tenantEndpoint = 'https://example.logto.app';
  const redirectUrl = encodeURIComponent(window.location.href);

  return (
    <div>
      <h2>Configuración de cuenta</h2>

      <div>
        <span>Email: user@example.com</span>
        <a href={`${tenantEndpoint}/account/email?redirect=${redirectUrl}`}>Actualizar email</a>
      </div>

      <div>
        <span>Contraseña: ••••••••</span>
        <a href={`${tenantEndpoint}/account/password?redirect=${redirectUrl}`}>
          Cambiar contraseña
        </a>
      </div>

      <div>
        <span>MFA: No configurado</span>
        <a href={`${tenantEndpoint}/account/authenticator-app?redirect=${redirectUrl}`}>
          Configurar autenticador
        </a>
      </div>
    </div>
  );
}

Paso 3: Gestiona el retorno a tu aplicación

Los usuarios regresan a tu URL de redirect tanto después de completar una acción como cuando la abandonan con el botón de retroceso, y la URL es la misma en ambos casos. No trates el retorno en sí como prueba de que el cambio se realizó con éxito; en su lugar, obtén los datos más recientes del usuario, por ejemplo, con Account API.

Para confirmar una acción completada al usuario, añade show_success=true a la URL del Centro de Cuenta. El Centro de Cuenta mostrará su propia página de éxito tras la acción, y regresará a tu URL de redirect cuando el usuario haga clic en Listo:

https://[tenant-id].logto.app/account/password?redirect=https://your-app.com/settings&show_success=true

Parámetros de URL soportados

Puedes añadir los siguientes parámetros de consulta a cualquier URL del Centro de Cuenta para personalizar la experiencia:

Parámetro	Descripción
`redirect`	La URL absoluta a la que enviar al usuario después de completar la acción, o cuando la abandone con el botón de retroceso. Solo se aceptan URLs `http(s)`.
`show_success`	Cuando se establece en `true`, el Centro de Cuenta muestra una página de éxito tras la acción y regresa a tu URL de `redirect` cuando el usuario hace clic en Listo. Sin esto, el usuario regresa de inmediato.
`identifier`	Rellena previamente el campo de identificador en la página de destino (`/account/email`, `/account/phone`, `/account/username`). Útil para enlaces profundos desde tu aplicación cuando ya conoces el identificador del usuario.
`ui_locales`	Lista separada por espacios de etiquetas de idioma BCP-47 (por ejemplo, `fr-CA fr en`) que controla el idioma de la interfaz del Centro de Cuenta. Si se omite, se utiliza el idioma del navegador del usuario.

Ejemplo — enlace profundo a la página de actualización de correo electrónico con el email actual pre-rellenado y la interfaz en francés:

https://[tenant-id].logto.app/account/email?identifier=user@example.com&ui_locales=fr&redirect=https://your-app.com/settings

nota:

El valor de identifier se almacena en el almacenamiento de sesión antes de la redirección de inicio de sesión y es consumido una sola vez por la página de destino.

Enlace de eliminación de cuenta

El Centro de Cuenta no gestiona la eliminación de cuentas directamente. En su lugar, puedes configurar una URL de eliminación de cuenta que apunte a tu propio flujo de eliminación (normalmente respaldado por Management API). Cuando se configura, aparece una entrada Eliminar tu cuenta en la página de seguridad del Centro de Cuenta y enlaza al usuario a tu URL.

Para configurarlo, navega a Consola > Inicio de sesión y cuenta > Centro de cuenta y establece el campo URL de eliminación de cuenta. También puedes actualizarlo mediante Management API:

curl -X PATCH https://[tenant-id].logto.app/api/account-center \
  -H 'authorization: Bearer <access_token>' \
  -H 'content-type: application/json' \
  --data-raw '{"deleteAccountUrl":"https://your-app.com/delete-account"}'

Deja el campo vacío (o establece deleteAccountUrl en null) para ocultar la entrada de eliminación de cuenta.

Vincular una cuenta social desde el Centro de Cuenta utiliza la URL de callback del conector:

https://[your-tenant-endpoint]/callback/{connectorId}

Donde {connectorId} es el ID del conector social. Esta es la Callback URI que se muestra en la página de detalles del conector en Consola > Conectores > Conectores sociales, que registras con tu proveedor social al configurar el conector.

Consideraciones de seguridad

La interfaz preconstruida del Centro de Cuenta incluye medidas de seguridad integradas:

Autenticación escalonada OIDC: Los cambios sensibles (correo electrónico, teléfono, nombre de usuario, contraseña, cuentas sociales, MFA, sesiones y dispositivos de confianza) requieren autenticación reciente del usuario (urn:logto:acr:1fa o superior) dentro de la ventana de Autenticación reciente configurada en tu tenant (10 minutos por defecto, configurable de 1 a 120 minutos en Consola > Inicio de sesión y cuenta > Centro de cuenta). Cuando un usuario acaba de iniciar sesión o registrarse con un método válido, no se muestra ningún aviso adicional; cuando el inicio de sesión carece de 1fa (como el inicio de sesión social) o ha pasado el tiempo de la ventana, el Centro de Cuenta ejecuta automáticamente la autenticación escalonada OIDC y reanuda la acción pendiente.
Códigos de verificación: Las actualizaciones de correo electrónico y teléfono requieren códigos de verificación enviados a la nueva dirección/número
Validación de sesión: Todas las operaciones validan la sesión del usuario para prevenir accesos no autorizados

Opciones de personalización

La interfaz preconstruida del Centro de Cuenta hereda la marca de la configuración de tu experiencia de inicio de sesión, incluyendo:

Logo y colores
Modo oscuro/claro
Configuración de idioma

CSS personalizado

Puedes personalizar aún más la apariencia de la interfaz del Centro de Cuenta añadiendo CSS personalizado. Navega a Consola > Inicio de sesión y cuenta > Centro de cuenta y añade tu CSS personalizado en el editor Custom CSS.

La interfaz preconstruida del Centro de Cuenta proporciona nombres de clase CSS estables con el prefijo logto_ac- en los elementos clave de la interfaz (contenedores de diseño, encabezados de página, secciones, tarjetas, etc.) para facilitar la personalización. Esto te permite sobrescribir los estilos predeterminados sin preocuparte por cambios de nombres de clase entre versiones.

Ejemplo:

/* Ocultar la firma de Logto */
.logto_ac-logto-signature {
  display: none;
}

/* Personalizar la tarjeta de la sección de seguridad */
.logto_ac-security-card {
  border-radius: 12px;
}

Si necesitas más personalización de la que ofrece la interfaz preconstruida y el CSS personalizado, considera usar Account API para construir tus propias páginas personalizadas de gestión de cuentas.

Configuración de cuenta mediante Account API - Crea gestión de cuentas personalizada con control total de la API
Configuración de cuenta mediante Management API - Gestión de cuentas a nivel de administrador
Configuración de MFA - Configura la autenticación multifactor
Dispositivos de confianza para MFA - Configura y gestiona la confianza temporal en el navegador

¿Qué es la interfaz preconstruida del Centro de Cuenta?​

Beneficios de usar la interfaz preconstruida​

Páginas disponibles​

Cómo usar la interfaz preconstruida​

Paso 1: Habilita Account API​

Configura los campos de perfil​

Paso 2: Enlaza a las páginas preconstruidas desde tu aplicación​

Enfoque A: Enlace directo con parámetro de redirección​

Enfoque B: Integración en tu flujo de configuración de cuenta​

Paso 3: Gestiona el retorno a tu aplicación​

Parámetros de URL soportados​

Enlace de eliminación de cuenta​

URL de callback de conexión social​

Consideraciones de seguridad​

Opciones de personalización​

CSS personalizado​

Recursos relacionados​