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:

• Actualizar dirección de correo electrónico y número de teléfono
• Actualizar nombre de usuario
• Establecer o actualizar 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 requerir que construyas 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 de tu endpoint de inquilino de Logto:

Ruta	Descripción
/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 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 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 tu endpoint de inquilino es https://example.logto.app, la página para actualizar el 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 verlos
• Establece los campos en Off para ocultarlos completamente

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.

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:

1. En la página de configuración de cuenta de tu aplicación, muestra la información actual del usuario
2. Proporciona botones de "Editar" o "Actualizar" que enlacen a las páginas preconstruidas correspondientes
3. Después de que el usuario complete 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 correo electrónico
        </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 las redirecciones de éxito

Después de que los usuarios completen una acción, serán redirigidos a la URL que especificaste con un parámetro de consulta opcional show_success. Puedes usar esto para mostrar un mensaje de éxito:

function SettingsPage() {
  const searchParams = new URLSearchParams(window.location.search);
  const showSuccess = searchParams.get('show_success');

  return (
    <div>
      {showSuccess === 'email' && <div>¡Correo electrónico actualizado correctamente!</div>}
      {showSuccess === 'password' && <div>¡Contraseña actualizada correctamente!</div>}
      {/* ... resto de tu página de configuración */}
    </div>
  );
}

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. Solo se aceptan URLs http(s).
show_success	Cuando se establece en true, el destino de éxito (por ejemplo, tu URL de redirect) recibe un parámetro de consulta show_success para que puedas mostrar un mensaje de confirmación.
identifier	Rellena previamente el campo de identificador en la página de destino (/account/email, /account/phone, /account/username). Útil para enlaces directos desde tu app 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 usará el idioma del navegador del usuario.

Ejemplo — enlace directo a la página de actualización de correo electrónico con el correo 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 la 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 la 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.

URL de callback para conexión social

Cuando un usuario vincula una cuenta social desde el Centro de Cuenta, Logto utiliza un URI de redirección diferente al del flujo de inicio de sesión regular. La URL de callback del Centro de Cuenta tiene el siguiente formato:

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

Donde {connectorId} es el ID del conector social (puedes encontrarlo en Consola > Conectores > Conectores sociales).

precaución:

Debes añadir esta URL a la lista de URIs de redirección autorizados (o equivalente) en la consola de desarrolladores de tu proveedor social (Google, GitHub, Facebook, etc.) además de la URL estándar de callback de inicio de sesión https://[your-tenant-endpoint]/callback/{connectorId}. De lo contrario, el flujo de vinculación fallará con un error de incompatibilidad de URI de redirección.

Consideraciones de seguridad

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

• Verificación de identidad: Antes de realizar cambios sensibles (correo electrónico, teléfono, contraseña, MFA), los usuarios deben verificar su identidad usando su contraseña actual o un método de verificación existente
• 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 personalización de 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 CSS personalizado.

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 la Account API para construir tus propias páginas personalizadas de gestión de cuentas.

Recursos relacionados

• 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 autenticación multifactor (MFA)