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

組み込み Account Center UI とは

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

• メールアドレスや電話番号の更新
• ユーザー名の更新
• パスワードの設定または更新
• ソーシャル連携の管理（ソーシャルアカウントのリンク／解除）
• 多要素認証 (MFA) 設定の管理（TOTP 認証アプリ、パスキー、バックアップコード）
• 2段階認証のオン／オフ切り替え
• アクティブセッションや認可済みアプリの管理

組み込み Account Center UI は、アプリケーションとシームレスに連携し、一貫したユーザー体験を提供します。カスタムのアカウント管理ページを構築する必要はありません。

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

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

利用可能なページ

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

パス	説明
/account/security	セキュリティ設定ハブ（2段階認証、ソーシャルアカウント、セッション管理）
/account/email	メインメールアドレスの更新または削除
/account/phone	メイン電話番号の更新または削除
/account/username	ユーザー名の更新
/account/password	パスワードの設定または更新
/account/passkey/add	新しいパスキー（WebAuthn）の追加
/account/passkey/manage	既存パスキーの表示・管理
/account/authenticator-app	TOTP 認証アプリの設定
/account/authenticator-app/replace	既存 TOTP 認証アプリの置き換え
/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 center に移動し、Account API を有効化してください。

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

• Edit に設定するとユーザーが編集可能
• ReadOnly に設定するとユーザーは閲覧のみ可能
• Off に設定すると完全に非表示

ステップ 2: アプリから組み込みページへリンク

組み込み 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>Account Settings</h2>

      <div>
        <span>Email: user@example.com</span>
        <a href={`${tenantEndpoint}/account/email?redirect=${redirectUrl}`}>Update Email</a>
      </div>

      <div>
        <span>Password: ••••••••</span>
        <a href={`${tenantEndpoint}/account/password?redirect=${redirectUrl}`}>Change Password</a>
      </div>

      <div>
        <span>MFA: Not configured</span>
        <a href={`${tenantEndpoint}/account/authenticator-app?redirect=${redirectUrl}`}>
          Set up Authenticator
        </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>Email updated successfully!</div>}
      {showSuccess === 'password' && <div>Password updated successfully!</div>}
      {/* ... rest of your settings page */}
    </div>
  );
}

サポートされている URL パラメータ

Account Center の任意の URL に、以下のクエリパラメータを付与して体験をカスタマイズできます：

パラメータ	説明
redirect	操作完了後にユーザーを戻す絶対 URL。http(s) のみ許可。
show_success	true に設定すると、成功時の遷移先（例：redirect URL）に show_success クエリパラメータが付与され、確認メッセージの表示に利用可能。
identifier	対象ページ（/account/email, /account/phone, /account/username）の入力欄を事前入力。アプリからディープリンクする際にユーザー識別子が既知の場合に便利。
ui_locales	BCP-47 言語タグ（例：fr-CA fr en）のスペース区切りリストで、Account Center UI の言語を制御。省略時はユーザーのブラウザ言語にフォールバック。

例 — 現在のメールを事前入力し、UI をフランス語にしたメール更新ページへのディープリンク：

https://[tenant-id].logto.app/account/email?identifier=user@example.com&ui_locales=fr&redirect=https://your-app.com/settings

注記:

identifier の値はサインインリダイレクト前にセッションストレージへ保存され、対象ページで一度だけ利用されます。

アカウント削除リンク

Account Center ではアカウント削除を直接処理しません。代わりに、独自の削除フロー（通常は Management API を利用）への アカウント削除 URL を設定できます。設定すると、Account Center のセキュリティページに アカウントを削除 項目が表示され、ユーザーを指定 URL へ誘導します。

設定方法：コンソール > サインイン & アカウント > Account center で Account deletion URL フィールドを設定します。また、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"}'

フィールドを空にする（または deleteAccountUrl を null に設定）と、アカウント削除項目は非表示になります。

ソーシャル連携コールバック URL

ユーザーが Account Center からソーシャルアカウントを連携する際、Logto は通常のサインインフローとは異なるリダイレクト URI を使用します。Account Center のコールバック URL は次の形式です：

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

ここで {connectorId} はソーシャルコネクターの ID です（コンソール > コネクター > ソーシャルコネクター で確認可能）。

注意:

この URL を、ソーシャルプロバイダー（Google、GitHub、Facebook など）の開発者コンソールで 認可済みリダイレクト URI（または同等項目）リストに、標準サインインコールバック URL https://[your-tenant-endpoint]/callback/{connectorId} と 両方 登録してください。登録しない場合、リンクフローはリダイレクト URI 不一致エラーで失敗します。

セキュリティ上の注意点

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

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

カスタマイズオプション

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

カスタム CSS

さらに、カスタム CSS を追加して Account Center UI の外観を柔軟にカスタマイズできます。コンソール > サインイン & アカウント > Account center で Custom CSS エディタに CSS を追加してください。

組み込み Account Center UI では、主要な UI 要素（レイアウト、ヘッダー、セクション、カードなど）に logto_ac- プレフィックス付きの安定した CSS クラス名を付与しているため、リリース間でクラス名が変わる心配なくスタイルを上書きできます。

例：

/* Logto シグネチャを非表示 */
.logto_ac-logto-signature {
  display: none;
}

/* セキュリティセクションのカードをカスタマイズ */
.logto_ac-security-card {
  border-radius: 12px;
}

組み込み UI やカスタム CSS で実現できない高度なカスタマイズが必要な場合は、Account API を利用して独自のアカウント管理ページを構築することも検討してください。

関連リソース

• Account API によるアカウント設定 - API をフル活用したカスタムアカウント管理
• Management API によるアカウント設定 - 管理者向けアカウント管理
• MFA 設定 - 多要素認証の設定