跳到主要内容

通过预构建账户中心界面进行账户设置

什么是预构建账户中心界面​

Logto 提供了一个预构建的账户中心界面，为终端用户提供了可直接使用的页面来管理他们的账户设置。这个预构建界面由 Logto 托管，处理常见的账户管理任务，包括：

  • 更新邮箱地址
  • 更新手机号
  • 更新用户名
  • 设置或更新密码
  • 管理多因素认证 (MFA) 设置（TOTP 认证器应用、通行密钥、备份码）

预构建账户中心界面旨在与你的应用无缝协作，提供一致的用户体验，无需你自行开发自定义账户管理页面。

使用预构建界面的优势​

  • 零开发成本：开箱即用的页面
  • 一致的体验：与 Logto 登录体验风格一致
  • 内置安全性：所有验证流程和安全措施自动处理
  • 始终保持最新：新功能和安全改进会自动可用

可用页面​

预构建账户中心界面提供以下页面，均可通过你的 Logto 租户端点下的 /account 路径访问：

Path描述
/account/email更新主邮箱地址
/account/phone更新主手机号
/account/username更新用户名
/account/password设置或更新密码
/account/passkey/add添加新通行密钥 (WebAuthn)
/account/passkey/manage查看和管理现有通行密钥
/account/authenticator-app设置 TOTP 认证器应用
/account/backup-codes/generate生成新的备份码
/account/backup-codes/manage查看和管理备份码

例如，如果你的租户端点是 https://example.logto.app，邮箱更新页面的地址就是 https://example.logto.app/account/email。

如何使用预构建界面​

第一步：启用 Account API​

预构建账户中心界面依赖于 Account API。前往 控制台 > 登录与账户 > 账户中心 并启用 Account API。

根据你的需求配置字段权限：

  • 将字段设置为 Edit 允许用户修改
  • 将字段设置为 ReadOnly 仅允许用户查看
  • 将字段设置为 Off 完全隐藏字段

要使用预构建账户中心界面，你需要将用户从你的应用重定向到相应的 Logto 页面。有两种方式：

方式 A：直接链接并带上 redirect 参数​

在你的应用中添加链接，将用户重定向到预构建页面。添加 redirect 查询参数，用户完成操作后会返回你的应用：

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

当用户完成邮箱更新后，会被重定向回 https://your-app.com/settings。

方式 B：嵌入到你的账户设置流程中​

你可以将预构建页面集成到你现有的账户设置流程中：

  1. 在你的应用账户设置页展示用户当前信息
  2. 提供“编辑”或“更新”按钮，链接到对应的预构建页面
  3. 用户完成操作后会被重定向回你的应用

示例实现：

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

  return (
    <div>
      <h2>账户设置</h2>

      <div>
        <span>邮箱：user@example.com</span>
        <a href={`${tenantEndpoint}/account/email?redirect=${redirectUrl}`}>更新邮箱</a>
      </div>

      <div>
        <span>密码：••••••••</span>
        <a href={`${tenantEndpoint}/account/password?redirect=${redirectUrl}`}>修改密码</a>
      </div>

      <div>
        <span>MFA：未配置</span>
        <a href={`${tenantEndpoint}/account/authenticator-app?redirect=${redirectUrl}`}>
          设置认证器
        </a>
      </div>
    </div>
  );
}

第三步：处理成功重定向​

用户完成操作后，会被重定向到你指定的 URL，并带有可选的 show_success 查询参数。你可以用它来展示成功提示：

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

  return (
    <div>
      {showSuccess === 'email' && <div>邮箱更新成功！</div>}
      {showSuccess === 'password' && <div>密码更新成功！</div>}
      {/* ... 你的设置页面其他内容 */}
    </div>
  );
}

安全性说明​

预构建账户中心界面内置了安全措施：

  • 身份验证：在进行敏感更改（邮箱、手机号、密码、MFA）前，用户必须通过当前密码或现有验证方式验证身份
  • 验证码：邮箱和手机号更新需要向新地址 / 号码发送验证码
  • 会话校验：所有操作都会校验用户会话，防止未授权访问

个性化选项​

预构建账户中心界面会继承你的登录体验设置中的品牌，包括：

  • Logo 和配色
  • 深色 / 浅色模式
  • 语言设置

如果你需要超出预构建界面所能提供的自定义能力，可以考虑使用 Account API 自行开发账户管理页面。