組み込み 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 にリダイレクトされます。ページの戻るボタンで離脱した場合も同じ URL に戻ります。

方法 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: アプリへのリダイレクト処理

ユーザーは、操作完了後も戻るボタンで離脱した場合も、redirect URL に戻ります。リダイレクト自体を変更成功の証拠とせず、Account API などで最新のユーザーデータを取得してください。

操作完了をユーザーに明示したい場合は、Account Center の URL に show_success=true を追加します。Account Center は操作後に独自の成功ページを表示し、ユーザーが完了をクリックすると redirect URL に戻ります：

https://[tenant-id].logto.app/account/password?redirect=https://your-app.com/settings&show_success=true

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

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

パラメータ	説明
`redirect`	操作完了時や戻るボタンで離脱した際にユーザーを戻す絶対 URL。`http(s)` のみ許可されます。
`show_success`	`true` の場合、Account Center は操作後に成功ページを表示し、ユーザーが完了をクリックすると `redirect` URL に戻ります。指定しない場合は即座に戻ります。
`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 で アカウント削除 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 からソーシャルアカウントをリンクする際は、コネクターのコールバック URL を利用します：

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

{connectorId} はソーシャルコネクターの ID です。これはコンソール > コネクター > ソーシャルコネクターのコネクター詳細ページに表示される Callback URI であり、コネクター設定時にソーシャルプロバイダーへ登録します。

セキュリティ上の注意点

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

OIDC ステップアップ認証：機密性の高い変更（メール、電話、ユーザー名、パスワード、ソーシャルアカウント、MFA、セッション、信頼済みデバイス）は、テナントで設定された 最近の認証 ウィンドウ（デフォルト 10 分、1～120 分で設定可能）内での直近のユーザー認証（urn:logto:acr:1fa 以上）が必要です。該当する方法で直前にサインイン / 登録した場合は追加プロンプトなし、1fa を満たさない（例：ソーシャルサインイン）またはウィンドウを超過した場合は、Account Center が自動で OIDC ステップアップ認証を実行し、保留中の操作を再開します。
認証コード：メールや電話番号の更新には、新しいアドレス / 番号への認証コード送信が必要です
セッション検証：すべての操作でユーザーセッションを検証し、不正アクセスを防止します

カスタマイズオプション

組み込み 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 設定 - 多要素認証の設定
MFA 信頼済みデバイス - 有効期限付きブラウザ信頼の設定と管理

組み込み Account Center UI とは​

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

利用可能なページ​

組み込み UI の利用方法​

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

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

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

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

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

ステップ 3: アプリへのリダイレクト処理​

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

アカウント削除リンク​

ソーシャル接続コールバック URL​

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

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

カスタム CSS​

関連リソース​