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

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

前提条件

ポータル。作成方法については、Universal Portalsクイックスタートをお読みください。
Management APIを使用する場合は、read:portalsおよびupdate:portalsスコープを持つManagement APIアクセストークンが必要です。

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

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

アカウントコンポーネントはMy Account APIを呼び出します。ユーザーMFA管理とパスキー管理が該当します。
OrganizationコンポーネントはMy Organization APIを呼び出します。Organization Details (詳細) 編集とドメインテーブルが該当します。
FormはAuth0 Formをレンダリングします。Formはどのポータルでも使用でき、情報の収集や更新に役立ちます。
コンテンツおよび構造コンポーネントはページのレイアウトを構成します。見出し、リッチテキスト、画像、セクションが該当します。

アカウントコンポーネントとOrganizationコンポーネントはユーザーに代わってリソースサーバーを呼び出すため、ポータルアプリケーションにはそのリソースサーバーへのアクセス権が必要です。詳細については、「ユニバーサルポータル用にアプリケーションを構成する」をお読みください。すべてのコンポーネントについては、「Portalコンポーネントライブラリリファレンス」をご覧ください。

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

Auth0 Dashboard
Management API

エディターを開く

Auth0 Dashboard > Portalsに移動して、ポータルを開きます。

ページを追加する

Pagesを開いてAdd Pageを選択し、NameとSlugを入力します。スラッグに使用できるのは小文字の英字、数字、ハイフンで、先頭は英字にする必要があります。

コンポーネントを追加する

Componentsを開いてコンポーネントをページにドラッグするか、先にSectionを選択してその中にコンポーネントを追加します。セクションには、コンポーネントの上にタイトルと説明が表示されます。

コンポーネントを変更する

ページ上のコンポーネントを選択して設定を開き、Saveを選択します。

pagesの値全体を指定してPATCH /api/v2/portals/{id}を呼び出します。APIはpagesフィールド全体を置き換えるため、残したいページもすべて含めて送信してください。次の例では、2つのセクションを含むSecurityページを作成します。

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」と表示されます。

Auth0 Dashboard
Management API

Pagesに移動します。ユーザーに最初に表示したいページのメニューを開き、Set as default pageを選択します。そのページにHome pageラベルが表示されます。

前の例と同様に、pages.defaultにいずれかのページのslugを設定します。

Auth0 Formを追加する

Universal Portalsで使用するAuth0 Formを作成します。Formは、プロファイルの更新や連絡設定などの情報収集に使用できます。

Auth0 Dashboard
Management API

Formコンポーネントを追加する

Componentsを開き、Formをページ内のセクションにドラッグします。

Formを設定する

コンポーネントを選択します。Form IDにFormのIDを入力します。Completion messageには、ユーザーがFormを送信した後に表示するメッセージを入力します。保存を選択します。

ページにpage:component:auth0:formコンポーネントを追加します。以下の例では、セクション内に配置しています。

{
  "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のコンテキスト変数」をお読みください。 MFA認証要素の一覧など、ユーザーに選択させる識別子をFormがブラウザーに送信し、選択された値をフローで使用する場合は、その値がサインイン中のユーザーのものであることをフロー内で検証してください。検証には、{{context.*}}、またはフローのアクションで取得して{{vars.*}}に保存した一覧と照合します。 FormがManagement APIを通じてユーザーを更新する場合、そのフローにはForms vault接続が必要です。この接続には、専用のマシンツーマシンアプリケーションを別途用意してください。ポータルアプリケーションにはclient_credentialsグラントを追加しないでください。詳細については、「Auth0 Vault Connections」をお読みください。

コンテンツを配置する

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

Auth0 Dashboard
Management API

項目を追加する

Navigationを開いてAdd Itemを選択し、ポータルページへのリンクか外部URLへのリンクを選びます。

リンクを設定する

ラベルを入力し、ページを選択するかURLを入力します。必要に応じてアイコン名も入力し、Add Itemを選択します。

項目を並べ替える

項目をドラッグして順序を変更します。

Portalのnavigationプロパティを設定します。ページと同様に、値は省略せずすべて送信してください。

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アイコンの名前をケバブケースで指定します。サイドバーのロゴには、テナントのブランディング設定が使用されます。

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

ポータルには、テナントのブランディング (ロゴ、色、フォント) が適用されます。Organizationのコンテキストでは、そのOrganizationのブランディングが使用されます。Auth0がOrganizationのブランディングを読み込めない場合は、テナントのブランディングが使用されます。

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

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

Auth0 Dashboard
Management API

Portal Settingsを開き、Custom codeの下にあるCustom HTML injection in <head>にHTMLを入力します。

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\">"
    }
  }'

カスタムコードが挿入されるのは、ユーザーがカスタムドメインでポータルを開いた場合のみです。コードは最大10,000文字まで指定できます。Auth0はコードの検証を行いません。コードのセキュリティとパフォーマンスへの影響については、お客様の責任となります。

公開とプレビュー

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

次のステップ

ポータルへのアクセス

Web アプリケーションやネイティブアプリケーションからユーザーをポータルに誘導します。

ポータルコンポーネントライブラリリファレンス

コンポーネントの種類、設定の上限、スコープを確認できます。

ブランドのカスタマイズ

コードをカスタマイズする

サードパーティによるカスタマイズ

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

前提条件

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

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

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

Auth0 Formを追加する

コンテンツを配置する

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

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

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

公開とプレビュー

次のステップ

ポータルへのアクセス

ポータルコンポーネントライブラリリファレンス

​前提条件

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

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

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

​Auth0 Formを追加する

​コンテンツを配置する

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

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

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

​公開とプレビュー

​次のステップ

ポータルへのアクセス

ポータルコンポーネントライブラリリファレンス

前提条件

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

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

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

Auth0 Formを追加する

コンテンツを配置する

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

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

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

公開とプレビュー

次のステップ