メインコンテンツまでスキップ

組み込み Account Center UI によるアカウント設定

組み込み Account Center UI とは​

Logto では、エンドユーザーがアカウント設定を管理できる、すぐに使えるページを提供する組み込み Account Center UI を用意しています。この組み込み UI は Logto によってホストされ、以下のような一般的なアカウント管理タスクを処理します：

  • メールアドレスの更新
  • 電話番号の更新
  • ユーザー名の更新
  • パスワードの設定または更新
  • MFA 設定の管理（TOTP 認証アプリ、パスキー、バックアップコード）

組み込み Account Center UI は、アプリケーションとシームレスに連携し、カスタムのアカウント管理ページを作成することなく、一貫したユーザー体験を提供します。

組み込み UI を利用するメリット​

  • 開発不要：すぐに使えるページで、追加開発は不要
  • 一貫した体験：Logto のサインイン体験と統一されたデザイン
  • セキュリティ内蔵：すべての認証フローやセキュリティ対策が自動で処理される
  • 常に最新：新機能やセキュリティ改善が自動で反映される

利用可能なページ​

組み込み Account Center UI では、Logto テナントエンドポイントの /account パス配下で、以下のページが利用できます：

パス説明
/account/emailメインメールアドレスの更新
/account/phoneメイン電話番号の更新
/account/usernameユーザー名の更新
/account/passwordパスワードの設定または更新
/account/passkey/add新しいパスキー（WebAuthn）の追加
/account/passkey/manage既存パスキーの表示・管理
/account/authenticator-appTOTP 認証アプリの設定
/account/backup-codes/generate新しいバックアップコードの生成
/account/backup-codes/manageバックアップコードの表示・管理

たとえば、テナントエンドポイントが https://example.logto.app の場合、メールアドレス更新ページは https://example.logto.app/account/email で利用できます。

組み込み UI の利用方法​

ステップ 1: Account API を有効化​

組み込み Account Center UI は Account API に依存しています。コンソール > サインイン & アカウント > アカウントセンター に移動し、Account API を有効化してください。

必要に応じてフィールド権限を設定します：

  • ユーザーが編集できるようにする場合はフィールドを Edit に設定
  • 閲覧のみ許可する場合は ReadOnly に設定
  • 完全に非表示にする場合は Off に設定

組み込み Account Center UI を利用するには、アプリケーションから該当する Logto ページへユーザーをリダイレクトする必要があります。方法は 2 つあります：

方法 A: リダイレクトパラメータ付きの直接リンク​

アプリケーション内に、組み込みページへリダイレクトするリンクを追加します。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>
  );
}

セキュリティに関する考慮事項​

組み込み Account Center UI には、以下のセキュリティ対策が組み込まれています：

  • アイデンティティ確認：機密性の高い変更（メール、電話、パスワード、MFA）を行う前に、ユーザーは現在のパスワードまたは既存の認証方法で本人確認が必要
  • 認証コード：メールや電話番号の更新時には、新しいアドレス／番号に認証コードが送信される
  • セッション検証：すべての操作でユーザーのセッションを検証し、不正アクセスを防止

カスタマイズオプション​

組み込み Account Center UI は、サインイン体験設定のブランディング（ロゴやカラー、ダーク／ライトモード、言語設定など）を継承します。

組み込み UI 以上のカスタマイズが必要な場合は、Account API を利用して独自のアカウント管理ページを構築できます。