跳至主要內容

透過預建帳號中心 UI 進行帳號設定

什麼是預建帳號中心 UI​

Logto 提供預建的帳號中心 UI，為終端使用者提供現成的帳號設定管理頁面。這個預建 UI 由 Logto 託管，並處理常見的帳號管理任務，包括：

  • 更新電子郵件地址
  • 更新手機號碼
  • 更新使用者名稱
  • 設定或更新密碼
  • 管理 MFA 設定（TOTP 驗證器 App、通行密鑰、備用代碼）

預建帳號中心 UI 設計上可與你的應用程式無縫整合，提供一致的使用體驗，無需自行開發帳號管理頁面。

使用預建 UI 的好處​

  • 零開發成本：現成可用的頁面，開箱即用
  • 一致體驗：與 Logto 登入體驗風格一致
  • 內建安全性：所有驗證流程與安全措施自動處理
  • 隨時保持最新：新功能與安全性改進自動獲得

可用頁面​

預建帳號中心 UI 提供以下頁面，皆可透過你的 Logto 租戶端點下的 /account 路徑存取：

路徑說明
/account/email更新主要電子郵件地址
/account/phone更新主要手機號碼
/account/username更新使用者名稱
/account/password設定或更新密碼
/account/passkey/add新增通行密鑰（WebAuthn）
/account/passkey/manage檢視與管理現有通行密鑰
/account/authenticator-app設定 TOTP 驗證器 App
/account/backup-codes/generate產生新的備用代碼
/account/backup-codes/manage檢視與管理備用代碼

例如，若你的租戶端點為 https://example.logto.app，則電子郵件更新頁面為 https://example.logto.app/account/email。

如何使用預建 UI​

步驟 1：啟用 Account API​

預建帳號中心 UI 依賴 Account API。請前往 控制台 > 登入與帳號 > 帳號中心 並啟用 Account API。

根據需求設定欄位權限：

  • 欄位設為 Edit 允許使用者修改
  • 欄位設為 ReadOnly 僅允許檢視
  • 欄位設為 Off 完全隱藏

要使用預建帳號中心 UI，你需要將使用者從你的應用程式導向對應的 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>
  );
}

步驟 3：處理成功導回​

使用者完成操作後，會被導回你指定的 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>
  );
}

安全性考量​

預建帳號中心 UI 內建多項安全措施：

  • 身分驗證：進行敏感變更（電子郵件、手機、密碼、MFA）前，使用者必須透過現有密碼或驗證方式驗證身分
  • 驗證碼：電子郵件與手機更新需輸入發送至新地址／號碼的驗證碼
  • 工作階段驗證：所有操作都會驗證使用者的工作階段，防止未授權存取

客製化選項​

預建帳號中心 UI 會繼承你的登入體驗設定，包括：

  • 標誌與配色
  • 深色／淺色模式
  • 語言設定

若你需要超出預建 UI 的自訂化，請考慮使用 Account API 自行打造帳號管理頁面。