Saltar al contenido principal

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
  • Actualizar número de teléfono
  • Actualizar nombre de usuario
  • Establecer o actualizar contraseña
  • Gestionar la configuración de MFA (aplicación autenticadora TOTP, passkeys, códigos de respaldo)

La interfaz preconstruida del Centro de Cuenta está diseñada para funcionar perfectamente con tu aplicación, proporcionando una experiencia de usuario consistente 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 consistente: 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:

RutaDescripción
/account/emailActualizar dirección de correo principal
/account/phoneActualizar número de teléfono principal
/account/usernameActualizar nombre de usuario
/account/passwordEstablecer o actualizar contraseña
/account/passkey/addAñadir una nueva passkey (WebAuthn)
/account/passkey/manageVer y gestionar passkeys existentes
/account/authenticator-appConfigurar aplicación autenticadora TOTP
/account/backup-codes/generateGenerar nuevos códigos de respaldo
/account/backup-codes/manageVer 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

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 existente 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>
  );
}

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 evitar 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

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