> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ユニバーサルポータルを構成する

> Auth0 DashboardまたはManagement APIを使用して、ユニバーサルポータルにページ、コンポーネント、Auth0 Forms、ナビゲーション、ブランディング、カスタムコードを追加します。

> [!WARNING]
>
> **Auth0 Universal Portals機能は現在、です。**

Portalは、ナビゲーションとページで構成されています。ナビゲーションは、リンクが並んだサイドバーです。各ページは、見出し、MFA管理コンポーネント、Auth0 Formなどのコンポーネントで構成されます。セクションもコンポーネントの一種で、中に他のコンポーネントを配置できます。

Portalは、[Auth0 Dashboard](https://manage.auth0.com/dashboard/#/universal-portals)のビジュアルエディターか、[Management API](https://auth0.com/docs/ja-jp/api/management/v2.md)を使って編集できます。

エンドユーザーポータルのワイヤーフレーム。上部バーとサイドバーがナビゲーションです。サイドバーの横のページにはコンポーネントが配置されています。1つのコンポーネントの中には、さらに2つのコンポーネントが含まれています。

## 前提条件

* ポータル。作成方法については、[Universal Portalsクイックスタート](https://auth0.com/docs/ja-jp/customize/portals/quickstart.md)をお読みください。
* Management APIを使用する場合は、`read:portals`および`update:portals`スコープを持つ[Management APIアクセストークン](https://auth0.com/docs/ja-jp/secure/tokens/access-tokens/management-api-access-tokens.md)が必要です。

## コンポーネントを選択する

Portalではコンポーネントを自由に組み合わせて使用できるため、個人アカウント用のPortal、Organization用のPortal、またはその両方を構築できます。コンポーネントは次の4つのグループに分類されます。

* **アカウントコンポーネント**は[My Account API](https://auth0.com/docs/ja-jp/manage-users/my-account-api.md)を呼び出します。[ユーザーMFA管理](https://auth0.com/docs/ja-jp/customize/portals/portal-components.md#user-mfa-management)と[パスキー管理](https://auth0.com/docs/ja-jp/customize/portals/portal-components.md#passkey-management)が該当します。
* **Organizationコンポーネント**は[My Organization API](https://auth0.com/docs/ja-jp/manage-users/my-organization-api.md)を呼び出します。[Organization Details (詳細) 編集](https://auth0.com/docs/ja-jp/customize/portals/portal-components.md#organization-details-edit)と[ドメインテーブル](https://auth0.com/docs/ja-jp/customize/portals/portal-components.md#domain-table)が該当します。
* **Form**は[Auth0 Form](https://auth0.com/docs/ja-jp/customize/forms.md)をレンダリングします。Formはどのポータルでも使用でき、情報の収集や更新に役立ちます。
* **[コンテンツおよび構造コンポーネント](https://auth0.com/docs/ja-jp/customize/portals/portal-components.md#content-and-structure-components)**はページのレイアウトを構成します。見出し、リッチテキスト、画像、セクションが該当します。

アカウントコンポーネントとOrganizationコンポーネントはユーザーに代わってリソースサーバーを呼び出すため、ポータルアプリケーションにはそのリソースサーバーへのアクセス権が必要です。詳細については、「[ユニバーサルポータル用にアプリケーションを構成する](https://auth0.com/docs/ja-jp/customize/portals/configure-portal-application.md)」をお読みください。すべてのコンポーネントについては、「[Portalコンポーネントライブラリリファレンス](https://auth0.com/docs/ja-jp/customize/portals/portal-components.md)」をご覧ください。

## ページとコンポーネントを追加する

> [tab] Auth0 Dashboard
>
> **1. エディターを開く**
>
> [**Auth0 Dashboard > Portals**](https://manage.auth0.com/dashboard/#/universal-portals)に移動して、ポータルを開きます。
>
> **2. ページを追加する**
>
> **Pages**を開いて**Add Page**を選択し、**Name**と**Slug**を入力します。スラッグに使用できるのは小文字の英字、数字、ハイフンで、先頭は英字にする必要があります。
>
> **3. コンポーネントを追加する**
>
> **Components**を開いてコンポーネントをページにドラッグするか、先に**Section**を選択してその中にコンポーネントを追加します。セクションには、コンポーネントの上にタイトルと説明が表示されます。
>
> **4. コンポーネントを変更する**
>
> ページ上のコンポーネントを選択して設定を開き、**Save**を選択します。
>
> Componentsパネルを開いた状態のビジュアルエディター。Formコンポーネントをパネルからドラッグしてページにドロップすると、新しいブロック内に表示されます。

> [tab] Management API
>
> `pages`の値全体を指定して`PATCH /api/v2/portals/{id}`を呼び出します。APIは`pages`フィールド全体を置き換えるため、残したいページもすべて含めて送信してください。次の例では、2つのセクションを含むSecurityページを作成します。
>
> ```bash wrap lines theme={null}
> curl --request PATCH \
>   --url "https://YOUR_DOMAIN/api/v2/portals/{portalId}" \
>   --header "authorization: Bearer {managementApiToken}" \
>   --header "content-type: application/json" \
>   --data '{
>     "pages": {
>       "default": "security",
>       "standard": [
>         {
>           "title": "Security",
>           "slug": "security",
>           "components": [
>             {
>               "type": "page:component:auth0:structure:section",
>               "config": {
>                 "variant": "card",
>                 "title": "Multi-factor authentication",
>                 "description": "Add or remove the ways you verify your sign-in.",
>                 "children": [
>                   { "type": "page:component:auth0:my_account:mfa_management" }
>                 ]
>               }
>             },
>             {
>               "type": "page:component:auth0:structure:section",
>               "config": {
>                 "variant": "card",
>                 "title": "Passkeys",
>                 "description": "Sign in without a password.",
>                 "children": [
>                   { "type": "page:component:auth0:my_account:passkey_management" }
>                 ]
>               }
>             }
>           ]
>         }
>       ]
>     }
>   }'
> ```
>
> すべてのページを削除するには、`"pages": null`を送信します。ページを変更せずそのままにする場合は、`pages`を省略します。

## デフォルトページを設定する

ポータルのURL `https://YOUR_DOMAIN/portals/{slug}` を開くと、Portalのデフォルトページが表示されます。Portalにデフォルトページが設定されていない場合は、このURLにアクセスすると「Page not found」と表示されます。

> [tab] Auth0 Dashboard
>
> **Pages**に移動します。ユーザーに最初に表示したいページのメニューを開き、**Set as default page**を選択します。そのページに**Home page**ラベルが表示されます。
>
> Pagesパネルを開いた状態のビジュアルエディター。ページの三点メニューを開くと、「Set as default page」と「Delete」のオプションが表示されます。「Set as default page」を選択すると、ホームアイコンがそのページに移動します。

> [tab] Management API
>
> 前の例と同様に、`pages.default`にいずれかのページのslugを設定します。

## Auth0 Formを追加する

Universal Portalsで使用する[Auth0 Form](https://auth0.com/docs/ja-jp/customize/forms.md)を作成します。Formは、プロファイルの更新や連絡設定などの情報収集に使用できます。

> [tab] Auth0 Dashboard
>
> **1. Formコンポーネントを追加する**
>
> **Components**を開き、**Form**をページ内のセクションにドラッグします。
>
> **2. Formを設定する**
>
> コンポーネントを選択します。**Form ID**にFormのIDを入力します。**Completion message**には、ユーザーがFormを送信した後に表示するメッセージを入力します。**保存**を選択します。
>
> セクション内のFormコンポーネントを選択した状態のビジュアルエディター。右側のFormパネルには「Form ID」と「Completion message」のフィールドがあり、左下に保存ボタン、右下に削除アイコンがあります。

> [tab] Management API
>
> ページに`page:component:auth0:form`コンポーネントを追加します。以下の例では、セクション内に配置しています。
>
> ```json wrap lines theme={null}
> {
>   "type": "page:component:auth0:structure:section",
>   "config": {
>     "variant": "card",
>     "title": "Personal information",
>     "description": "Update the details we have about you.",
>     "children": [
>       {
>         "type": "page:component:auth0:form",
>         "config": {
>           "form_id": "{formId}",
>           "completion_message": "Your profile has been updated."
>         }
>       }
>     ]
>   }
> }
> ```

Portal内のFormは、ログイン取引ではなくユーザーのIDトークンからコンテキストを受け取ります。常に利用できるのは`{{context.user.user_id}}`のみです。詳細については、「[Formsのコンテキスト変数](https://auth0.com/docs/ja-jp/customize/portals/portal-components.md#forms-context-variables)」をお読みください。

MFA認証要素の一覧など、ユーザーに選択させる識別子をFormがブラウザーに送信し、選択された値をフローで使用する場合は、その値がサインイン中のユーザーのものであることをフロー内で検証してください。検証には、`{{context.*}}`、またはフローのアクションで取得して`{{vars.*}}`に保存した一覧と照合します。

FormがManagement APIを通じてユーザーを更新する場合、そのフローにはForms vault接続が必要です。この接続には、専用のマシンツーマシンアプリケーションを別途用意してください。ポータルアプリケーションには`client_credentials`グラントを追加しないでください。詳細については、「[Auth0 Vault Connections](https://auth0.com/docs/ja-jp/customize/forms/vaults/auth0.md)」をお読みください。

## コンテンツを配置する

関連するコンポーネントは **Section** にまとめます。セクションはカードのように、コンポーネントの上にタイトルと説明を表示するため、ページの内容がひと目で把握しやすくなります。テキストには **Heading** と **Rich Text** を、ロゴなどのブランド素材には **Image** を使用します。

## ナビゲーションを設定する

サイドバーには、ポータルページまたは外部URLへのリンクが表示されます。

> [tab] Auth0 Dashboard
>
> **1. 項目を追加する**
>
> **Navigation**を開いて**Add Item**を選択し、ポータルページへのリンクか外部URLへのリンクを選びます。
>
> **2. リンクを設定する**
>
> ラベルを入力し、ページを選択するかURLを入力します。必要に応じてアイコン名も入力し、**Add Item**を選択します。
>
> **3. 項目を並べ替える**
>
> 項目をドラッグして順序を変更します。
>
> Navigationパネルを開いた状態のビジュアルエディター。パネルには、サイドバー項目の上に「Add Item」ボタンがあります。パネルとポータルのプレビューの両方でProfileとSecurityの項目が入れ替わり、パネルでの並び順がそのままサイドバーの並び順になることを示しています。

> [tab] Management API
>
> Portalの`navigation`プロパティを設定します。ページと同様に、値は省略せずすべて送信してください。
>
> ```bash wrap lines theme={null}
> curl --request PATCH \
>   --url "https://YOUR_DOMAIN/api/v2/portals/{portalId}" \
>   --header "authorization: Bearer {managementApiToken}" \
>   --header "content-type: application/json" \
>   --data '{
>     "navigation": {
>       "sidebar": {
>         "components": [
>           {
>             "type": "sidebar:component:auth0:internal_link:v2",
>             "config": { "label": "Security", "page_slug": "security", "icon": "shield" }
>           },
>           {
>             "type": "sidebar:component:auth0:external_link:v2",
>             "config": { "label": "Help center", "href": "https://example.com/help" }
>           }
>         ]
>       }
>     }
>   }'
> ```

アイコンには、`user`や`shield`のように[Lucideアイコン](https://lucide.dev/icons)の名前をケバブケースで指定します。サイドバーのロゴには、テナントのブランディング設定が使用されます。

## ブランディングを適用する

ポータルには、テナントの[ブランディング](https://auth0.com/docs/ja-jp/customize/login-pages/universal-login/customize-themes.md) (ロゴ、色、フォント) が適用されます。Organizationのコンテキストでは、そのOrganizationのブランディングが使用されます。Auth0がOrganizationのブランディングを読み込めない場合は、テナントのブランディングが使用されます。

## headにカスタムコードを追加する

すべてのポータルページの`<head>`にHTMLを追加できます。フォントや分析用スクリプトの読み込みなどに使用します。

> [tab] Auth0 Dashboard
>
> **Portal Settings**を開き、**Custom code**の下にある\*\*Custom HTML injection in \<head>\*\*にHTMLを入力します。
>
> Portal Settingsパネルを開いた状態のビジュアルエディター。パネルには一般、アプリケーション、カスタムコードの各セクションがあり、カスタムコードのセクションにはコードエディターがあります。

> [tab] Management API
>
> ```bash wrap lines theme={null}
> curl --request PATCH \
>   --url "https://YOUR_DOMAIN/api/v2/portals/{portalId}" \
>   --header "authorization: Bearer {managementApiToken}" \
>   --header "content-type: application/json" \
>   --data '{
>     "custom_code": {
>       "head": "<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">"
>     }
>   }'
> ```

> [!WARNING]
>
> カスタムコードが挿入されるのは、ユーザーが[カスタムドメイン](https://auth0.com/docs/ja-jp/customize/custom-domains.md)でポータルを開いた場合のみです。コードは最大10,000文字まで指定できます。Auth0はコードの検証を行いません。コードのセキュリティとパフォーマンスへの影響については、お客様の責任となります。

## 公開とプレビュー

ビジュアルエディターでは、**Publish** を選択するまで上部バーに **Unpublished changes** と表示されます。**Preview** を選択すると、最後に公開されたバージョンの Portal が新しいタブで開きます。そのため、プレビューの前に必ず公開してください。

## 次のステップ

> [card] [ポータルへのアクセス](https://auth0.com/docs/ja-jp/customize/portals/access-portals.md)
>
> Web アプリケーションやネイティブアプリケーションからユーザーをポータルに誘導します。

> [card] [ポータルコンポーネントライブラリリファレンス](https://auth0.com/docs/ja-jp/customize/portals/portal-components.md)
>
> コンポーネントの種類、設定の上限、スコープを確認できます。