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

# Universal Portals Quickstart

> Auth0 CLI、Auth0 Agent Skills、またはAuth0 Dashboardを使用して、初めてのポータルを設定する方法を説明します。

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "Beta",
    "ea": "早期アクセス"
  };
  const stageText = stageTextMap[stage] || "製品リリース段階";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>この機能は{linkify(`${plans}プラン`, "https://auth0.com/pricing")}でご利用いただけます。 </>}
            {contact && "参加をご希望の場合は、" + contact + "までお問い合わせください。 "}
            {terms && <>この機能を使用することにより、Oktaの該当する無料トライアル規約および{linkify("Master Subscription Agreement", "https://www.okta.com/legal")}に同意したものとみなされます。</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>{feature}機能は現在、{linkify(stageText, prsLink)}です。</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

<ReleaseStageNotice feature="Auth0 Universal Portals" stage="beta" terms="true" contact="Auth0 Support" />

ポータルは、以下の方法で作成できます。

* [Auth0 CLI](/docs/ja-jp/deploy-monitor/auth0-cli#auth0-cli) を使用して、1 つのコマンドでアプリケーションとポータルをプロビジョニングおよび設定する。
* [Auth0 Agent Skills](https://github.com/auth0/agent-skills) を使用して、お好みの AI アシスタントにアプリケーションとポータルのプロビジョニングおよび設定を依頼する。
* [Auth0 Dashboard](/docs/ja-jp/get-started/auth0-overview/dashboard#auth0-dashboard) を使用して、手順に沿ってアプリケーションとポータルを作成する。

<div id="prerequisites">
  ## 前提条件
</div>

* Universal Portals ベータ版へのアクセスがプロビジョニングされている [Development](/docs/ja-jp/get-started/tenant-settings#environment-tag) Auth0 テナント。

<Tabs>
  <Tab title="Auth0 CLI">
    ## ステップ1: Auth0 CLI Beta をインストールする

    お使いのプラットフォーム用の[インストール手順](https://github.com/auth0/auth0-cli/#linux-and-macos-1)に従ってインストールし、tenantで認証します。

    ```bash theme={null}
    auth0-beta login
    ```

    ## ステップ2：設定コマンドを実行する

    ```bash theme={null}
    auth0-beta universal-portals setup
    ```

    別名 `auth0-beta up setup` も使用できます。Auth0 CLI コマンドにより、次の項目が作成されます。

    * **My Account API**: ユーザーアカウント操作用のリソースサーバー
    * **My Organization API**: 組織管理操作用のリソースサーバー
    * **A Regular Web App**: ポータルにリンクされたアプリケーション
    * **3 つのクライアントグラント**: My Account、My Organization、Management API 操作へのスコープが設定されたアクセス
    * **ポータル**: デフォルトのテンプレートで事前設定され、すぐにテストを開始できます

    コマンドが完了すると、ポータルの URL が出力されます。ブラウザーで開いてポータルをテストしてください。
  </Tab>

  <Tab title="Auth0 Agent Skills">
    ## ステップ 1: Auth0 Agent Skills をインストールする

    ```bash theme={null}
    npx skills add auth0/agent-skills
    ```

    ## ステップ2：AI agent に Universal Portals の設定を依頼する

    ```bash theme={null}
    Auth0 テナントで Universal Portals を設定する
    ```

    AI agent により、以下が作成されます。

    * **My Account API**: ユーザーアカウント操作用のリソースサーバー
    * **My Organization API**: organization 管理操作用のリソースサーバー
    * **通常の Web アプリ**: ポータルにリンクされたアプリケーション
    * **3 つのクライアントグラント**: My Account、My Organization、Management API 操作へのスコープが設定されたアクセス
    * **ポータル**: すぐにテストを開始できるよう、デフォルトのテンプレートが事前設定されています

    コマンドが完了すると、ポータルの URL が出力されます。ブラウザーで URL を開いて、ポータルをテストしてください。

    詳細については、[Auth0 Agent Skills](https://github.com/auth0/agent-skills) を参照してください。
  </Tab>

  <Tab title="Auth0 Dashboard">
    ## ステップ1: 従来型Webアプリケーションを作成する

    1. [**Auth0 Dashboard > アプリケーション > アプリケーション**](https://manage.auth0.com/#/applications)に移動し、**Create Application** を選択します。
    2. **従来型Webアプリケーション** を選択し、名前を付けます。
    3. **Create** を選択します。

    ## ステップ2: アプリケーションを設定する

    アプリケーションの **設定** タブで、次の操作を行います。

    1. **Allowed Callback URLs** に `https://YOUR_AUTH0_DOMAIN/portals/auth/callback` を、**Allowed Logout URLs** に `https://YOUR_AUTH0_DOMAIN/portals/YOUR_PORTAL_SLUG` を設定します。

    2. **Advanced Settings > Grant Types** までスクロールし、次の項目を有効にします。
       * 認可コード
       * リフレッシュトークン
       * Client Credentials
       * MFA

    3. **変更を保存** を選択します。

    ## ステップ3: API アクセスを設定する

    アプリケーションの **API Access** タブで、次の API とそのスコープを有効にします。

    **My Account API** (`https://YOUR_AUTH0_DOMAIN/me/`) ユーザー委譲アクセス:

    | **スコープ**                           | **説明**              |
    | ---------------------------------- | ------------------- |
    | `create:me:authentication_methods` | 認証方法を登録する           |
    | `read:me:authentication_methods`   | 認証方法を一覧表示する         |
    | `update:me:authentication_methods` | 認証方法を更新する           |
    | `delete:me:authentication_methods` | 認証方法を削除する           |
    | `read:me:factors`                  | 利用可能な MFA 認証要素を読み取る |

    **My Organization API** (`https://YOUR_AUTH0_DOMAIN/my-org/`) ユーザー委譲アクセス:

    | **スコープ**                    | **説明**                |
    | --------------------------- | --------------------- |
    | `read:my_org:configuration` | organization の設定を読み取る |
    | `read:my_org:details`       | organization の詳細を読み取る |
    | `update:my_org:details`     | organization の詳細を更新する |

    **Auth0 Management API** クライアントアクセス:

    | **スコープ**             | **説明**                       |
    | -------------------- | ---------------------------- |
    | `read:branding`      | tenant のブランディング設定とテーマを読み取る   |
    | `read:organizations` | organization のブランディング設定を読み取る |

    各 API を有効にした後、**Save** を選択します。

    ## ステップ4: Multi-Resource Refresh Token を有効にする

    **設定** タブに戻り、**Multi-Resource Refresh Token** までスクロールします。ステップ3で設定したユーザー委譲 API とスコープ (My Account API および My Organization API) に対して有効にします。

    **変更を保存** を選択します。

    ## ステップ5: ポータルを作成する

    1. Auth0 Dashboard のサイドバーから **Portals** を選択します。

    <Frame>
      <img src="https://mintcdn.com/translations/oyf5dwefQkpFhecP/docs/images/customize/portals/portal-list.png?fit=max&auto=format&n=oyf5dwefQkpFhecP&q=85&s=5e855d4af8363e8c304781d270f65009" alt="Dashboard の Portals セクション" width="3818" height="1826" data-path="docs/images/customize/portals/portal-list.png" />
    </Frame>

    2. **Create Portal** を選択します。
    3. ポータルの **Name** と **Slug** を入力します。スラッグはポータル URL の一部になります。

    <Frame>
      <img src="https://mintcdn.com/translations/oyf5dwefQkpFhecP/docs/images/customize/portals/portal-create.png?fit=max&auto=format&n=oyf5dwefQkpFhecP&q=85&s=48a2d7ea8d766ac6ac8d322dd2f612b2" alt="Create Portal ダイアログ" width="3820" height="1810" data-path="docs/images/customize/portals/portal-create.png" />
    </Frame>

    4. **Create** を選択します。
    5. ポータル設定で、ステップ1で作成したアプリケーションをリンクします。

    ステップ2でコールバック URL とログアウト URL をまだ設定していない場合は、ポータル設定からコピーしてアプリケーションに設定します。

    ## ステップ6: ページを作成する

    ポータルの作成後、ビジュアルエディターが開きます。左側のパネルからコンポーネントをキャンバスにドラッグして、ページを構成します。

    <Frame>
      <img src="https://mintcdn.com/translations/oyf5dwefQkpFhecP/docs/images/customize/portals/portal-editor.png?fit=max&auto=format&n=oyf5dwefQkpFhecP&q=85&s=5403d4a10f8215df81af2526d26ba982" alt="Universal Portals ビジュアルエディター" width="3826" height="1836" data-path="docs/images/customize/portals/portal-editor.png" />
    </Frame>

    ## ステップ7: プレビューして公開する

    **Preview** を選択すると、新しいタブでポータルが開きます。準備ができたら、**Publish** を選択します。
  </Tab>
</Tabs>

<div id="learn-more">
  ## 詳細情報
</div>

<Card title="Universal Portals の概要" icon="key" href="/docs/ja-jp/customize/portals/overview" horizontal>
  Universal Portals のユースケース、仕組み、主な機能について説明します。
</Card>

<Card title="Universal Components" icon="key" href="/docs/ja-jp/get-started/universal-components/universal-components-overview" horizontal>
  ポータルで使用する Universal Components ライブラリについて説明します。
</Card>

<Card title="Auth0 フォーム" icon="key" href="/docs/ja-jp/customize/forms" horizontal>
  ポータルでプロファイルの更新、ポリシーへの同意、マーケティングコミュニケーションの設定など、エンドユーザーから情報を収集するためのフォームについて説明します。
</Card>