プリビルト 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 セクションで Edit または ReadOnly になっていることを確認します。
プリビルト 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: 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 で アカウント削除 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 には、以下のセキュリティ対策が組み込まれています：

アイデンティティ確認：重要な変更（メール、電話、パスワード、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 設定 - 多要素認証の設定
MFA 信頼済みデバイス - 時間制限付きブラウザ信頼の設定と管理

プリビルト Account Center UI とは​

プリビルト UI を利用するメリット​

利用可能なページ​

プリビルト UI の利用方法​

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

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

ステップ 2: アプリケーションからプリビルトページへリンク​

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

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

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

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

アカウント削除リンク​

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

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

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

カスタム CSS​

関連リソース​