組み込み 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/profile`	ユーザープロフィールページ（名前、アバター、カスタムプロフィールフィールド）
`/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 に設定すると完全に非表示

プロフィールフィールドの設定

Account Center には プロフィール ページがあり、エンドユーザーがプロフィール情報を閲覧・管理できます。このページに表示するプロフィールフィールドを制御するには：

Account security / User profile セクションで、Name、Avatar、Profile、または Custom data のフィールド権限を Edit または ReadOnly に設定してください。
Integrate prebuilt UI カードで、プロフィールフィールドセレクターから表示したいフィールドを追加します。これらのフィールドはユーザープロフィールの収集で使われるカタログと同じものから選択できます — そこで定義したフィールドは Account Center でも表示可能です。
ドラッグ & ドロップでフィールドの表示順を変更できます。

プロフィールフィールドにリストされ、かつ対応するフィールド権限が 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: アカウント設定フローへの組み込み

既存のアカウント設定ワークフローに組み込みページを統合することも可能です：

アプリのアカウント設定ページで、ユーザーの現在の情報を表示
「編集」や「更新」ボタンを設置し、対応する組み込みページへリンク
ユーザーが操作を完了すると、アプリへリダイレクト

実装例：

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

  return (
    <div>
      <h2>Account Settings</h2>

      <div>
        <span>Email: [email protected]</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 protected]&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 に設定）と、アカウント削除エントリは非表示になります。

ユーザーが 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

Account Center UI の見た目は、カスタム CSS を追加することでさらに調整できます。コンソール > サインイン & アカウント > 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 設定 - 多要素認証の設定

組み込み Account Center UI とは​

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

利用可能なページ​

組み込み UI の利用方法​

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

プロフィールフィールドの設定​

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

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

方法 B: アカウント設定フローへの組み込み​

ステップ 3: 成功時のリダイレクト処理​

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

アカウント削除リンク​

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

セキュリティ上の注意点​

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

カスタム CSS​

関連リソース​