> ## 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.

# My Organization API を使用して委任管理インターフェイスを構築する

> Universal Components を使用して、Auth0 の My Organization API で委任管理インターフェイスを構築する方法について説明します。

Universal Components を使用すると、自社のアプリケーション内にセルフサービスの管理ダッシュボードを構築できます。これにより、[Auth0 組織](/ja/docs/manage-users/organizations) の管理者権限を委任された B2B 顧客は、Auth0 Dashboard へアクセスしたり、基本的な管理作業のためにサポートチームへ依頼したりしなくても、自社のブランディング、IDプロバイダー、検証済みドメインを管理できます。

<div id="how-it-works">
  ## 仕組み
</div>

Universal Components は、ユーザー スコープのトークンで動作する [My Organization API](/ja/docs/api/myorganization) を利用して、[セルフサービス SSO 管理ダッシュボード](/ja/docs/authenticate/enterprise-connections/self-service-enterprise-configuration) を作成します。管理者がアプリケーションに埋め込まれたダッシュボードにログインすると、Auth0 SDK は、管理者権限用の組織固有のスコープを含むアクセストークンを取得します。コンポーネントはこのトークンを使用して、ログインしているユーザーとして API を呼び出します。これにより、委任された管理者は、自身が属する特定の Auth0 組織に対してのみ変更を加えられるようになります。

<div id="available-components">
  ### 利用可能なコンポーネント
</div>

各コンポーネントは、管理タスクを実行するために [My Organization API](/ja/docs/api/myorganization) 内の特定のエンドポイントにマッピングされています。

| **コンポーネント**                                                                                                           | **API エンドポイント**                       |
| :-------------------------------------------------------------------------------------------------------------------- | :------------------------------------ |
| **OrganizationDetailsEdit** — 組織の名前、表示名、ブランディングカラー、ロゴを編集します。                                                          | `/my-org/details`                     |
| **SsoProviderTable** — SSO IDプロバイダーの一覧表示、有効化、無効化、削除、関連付けの解除を行います。                                                     | `/my-org/identity-providers`          |
| **SsoProviderCreate** — SSOプロバイダー (Okta、ADFS、SAML、OIDC、Google Workspace、Azure AD、Ping Federate) を作成するための複数ステップのウィザード。 | `/my-org/identity-providers`          |
| **SsoProviderEdit** — 認証設定の構成、プロビジョニングの有効化、SCIM トークンとドメインの関連付けの管理を行います。                                               | `/my-org/identity-providers/{idp_id}` |
| **DomainTable** — ドメインの作成、検証、削除、IDプロバイダーとの関連付けを行います。                                                                  | `/my-org/domains`                     |

<div id="configure-auth0-dashboard">
  ## Auth0 Dashboard を設定する
</div>

My Organization コンポーネントを使用する前に、必要な [API](/ja/docs/api)、アプリケーション、[スコープ](/ja/docs/api/myorganization) を使用するように Auth0 テナントを設定する必要があります。

<Tabs>
  <Tab title="React">
    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 Dashboard の設定** - My
      Organization コンポーネントを使用する前に、以下の手順をすべて完了してください。
    </Callout>

    ## **アプリケーションの作成**

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      この例では、Single Page Application (SPA) を使用します。サーバーサイドレンダリングの React フレームワークについては、Next.js タブを参照してください。
    </Callout>

    1. [**Auth0 Dashboard > Applications > Applications**](https://manage.auth0.com/#/applications) に移動し、**Create Application** を選択します。

    2. **シングルページWebアプリケーション**を選択します。

    3. **Settings** タブで、次のフィールドに `http://localhost:5173` を追加します。
       <br />A. Allowed Callback URLs
       <br />B. Allowed Logout URLs

    4. **Login Experience** で、次を選択します。
       <br />A. Business users
       <br />B.  (任意) Prompt for Organization

    ## **My Organization APIを有効にする**

    1. [**Dashboard > Applications > APIs**](https://manage.auth0.com/#/applications) に移動します。
    2. **[My Organization API](/ja/docs/api/myorganization)** を選択し、その API がテナントで有効になっていることを確認します。

    ## **アプリケーションアクセスの設定**

    1. **Application Access** タブに移動します。
    2. 使用するアプリケーションの**Edit**を選択します。
    3. 以下の設定を行います:
       <br />A. [接続プロファイル](/ja/docs/authenticate/enterprise-connections/connection-profile#connection-profile): 接続属性のマッピングが設定されたプロファイルを選択または作成します。
       <br />B. [ユーザー属性プロファイル](/ja/docs/authenticate/enterprise-connections/user-attribute-profile#user-attribute-profile): ユーザー属性のマッピングが設定されたプロファイルを選択または作成します。
       <br />C. サポート対象の [IDプロバイダー](/ja/docs/authenticate/identity-providers): 顧客が使用できるプロバイダーを有効にします。
       <br />D. 接続削除時の動作: **Allow** または **Allow if Empty** を選択します。
       <br />    • **許可**: ユーザーは接続を削除できます。この操作により、その接続のすべてのユーザーも削除されます。
       <br />    • **空の場合のみ許可**: ユーザーが削除できるのは、ユーザーが存在しない接続のみです。
       <br />E. ユーザーアクセス認可: **Unauthorized**、**Authorized**、または **All** を選択します。
       <br />    • **Unauthorized**: 権限は一切許可されません。
       <br />    • **Authorized**: 特定の権限を選択します。
       <br />    • **All**: 現在ある権限と今後追加される権限をすべて含めます。
       <br />F. クライアントクレデンシャルアクセス認可: **Unauthorized**、**Authorized**、または **All** を選択します。
    4. **保存** を選択します。

    ## **データベースとユーザーのセットアップ**

    1. データベース接続を作成するには、[**Auth0 Dashboard > Authentication > Database**](https://manage.auth0.com/#/connections/database) に移動します。
    2. 接続の**Applications**タブを選択し、新しいSPAアプリケーションを有効化します。
    3. 初期テスト用に、このデータベースにテストユーザーを作成します。

    ## **ロールの設定**

    1. ロール (例: "組織管理者") を作成します。
    2. ロールに My Organization API で必要なスコープを追加します。

    <Accordion title="必要なスコープ">
      ```
          read:my_org:details
          update:my_org:details
          create:my_org:identity_providers
          read:my_org:identity_providers
          update:my_org:identity_providers
          delete:my_org:identity_providers
          update:my_org:identity_providers_detach
          create:my_org:identity_providers_domains
          delete:my_org:identity_providers_domains
          read:my_org:domains
          delete:my_org:domains
          create:my_org:domains
          update:my_org:domains
          read:my_org:identity_providers_scim_tokens
          create:my_org:identity_providers_scim_tokens
          delete:my_org:identity_providers_scim_tokens
          create:my_org:identity_providers_provisioning
          read:my_org:identity_providers_provisioning
          delete:my_org:identity_providers_provisioning
          read:my_org:configuration
      ```
    </Accordion>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      ユーザーのトークンには、割り当てられたロールと前の手順で設定した User Access Authorization の設定の両方に含まれる権限のみが含まれます。
    </Callout>

    ## **組織の作成**

    1. [**組織 > 組織を作成**](https://manage.auth0.com/#/organizations) に移動します。
    2. Auth0 組織を設定します。
       <br />A. **Members**: テストユーザーを追加し、"Organization Admin" ロールを割り当てます。
       <br />B. **Connections**: データベース接続を有効にします。

    ## **環境変数を設定する**

    1. React プロジェクトのルートに `.env` ファイルを作成します。

    ```bash theme={null}
    VITE_AUTH0_DOMAIN=your-domain.auth0.com
      VITE_AUTH0_CLIENT_ID=your-spa-client-id
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      お客様は、My Organization API および Embeddable UI Components の利用が、お客様のセキュリティ ポリシーおよび適用される
      法令 (エンドユーザーに付与されたあらゆる権限を含む) に準拠するよう確保する責任を負います。
    </Callout>

    <Check>
      ユーザーは認証済みで、Auth0 の組織のメンバーである必要があります。コンポーネントは、現在のユーザーコンテキストから組織データを自動的に読み込みます。インストール方法と`Auth0ComponentProvider`の設定について詳しくは、[Auth0 Universal Components](/ja/docs/get-started/universal-components/universal-components-overview)を参照してください
    </Check>
  </Tab>

  <Tab title="Next.js">
    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 Dashboard の設定** - My Organization コンポーネントを使用する前に、以下の手順をすべて完了してください。
    </Callout>

    ## **アプリケーションの作成**

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      この例では、Next.js 向けに Regular Web Application を使用します。同様の手順で Single Page Application を設定することもできます。
    </Callout>

    1. [**Auth0 Dashboard > Applications > Applications**](https://manage.auth0.com/#/applications) に移動し、**Create Application** を選択します。

    2. **Regular Web Application** を選択します。

    3. **Settings** タブで、次のフィールドに `http://localhost:5173` を追加します。
       <br />A. Allowed Callback URLs
       <br />B. Allowed Logout URLs

    4. **Login Experience** で、次を選択します。
       <br />A. Business users
       <br />B.  (任意) Prompt for Organization

    ## **My Organization APIを有効にする**

    1. [**Dashboard > Applications > APIs**](https://manage.auth0.com/#/applications) に移動します。
    2. **[My Organization API](/ja/docs/api/myorganization)** を選択し、その API がテナントで有効になっていることを確認します。

    ## **アプリケーションアクセスの設定**

    1. **Application Access** タブに移動します。
    2. 使用するアプリケーションの**Edit**を選択します。
    3. 以下の設定を行います:
       <br />A. [接続プロファイル](/ja/docs/authenticate/enterprise-connections/connection-profile#connection-profile): 接続の属性マッピングが設定されたプロファイルを選択または作成します。
       <br />B. [ユーザー属性プロファイル](/ja/docs/authenticate/enterprise-connections/user-attribute-profile#user-attribute-profile): ユーザー属性マッピングが設定されたプロファイルを選択または作成します。
       <br />C. サポート対象の [IDプロバイダー](/ja/docs/authenticate/identity-providers): 顧客が利用できるプロバイダーを有効にします。
       <br />D. 接続の削除動作: **Allow** または **Allow if Empty** を選択します。
       <br />    • **許可**: ユーザーは接続を削除できます。接続を削除すると、その接続内のすべてのユーザーも削除されます。
       <br />    • **空の場合に許可**: ユーザーが削除できるのは、ユーザーが存在しない接続のみです。
       <br />E. ユーザーのアクセス認可: **Unauthorized**、**Authorized**、または **All** を選択します。
       <br />    • **Unauthorized**: 権限は一切許可されません。
       <br />    • **Authorized**: 特定の権限を選択します。
       <br />    • **All**: 現在および今後のすべての権限を含めます。
       <br />F. クライアント資格情報のアクセス認可: **Unauthorized**、**Authorized**、または **All** を選択します。
    4. **保存** を選択します。

    ## **データベースとユーザーのセットアップ**

    1. データベース接続を作成するには、[**Auth0 Dashboard > Authentication > Database**](https://manage.auth0.com/#/connections/database) に移動します。
    2. 接続の**Applications**タブを選択し、新しいSPAアプリケーションを有効化します。
    3. 初期テスト用に、このデータベースにテストユーザーを作成します。

    ## **ロールの設定**

    1. ロール (例: "組織管理者") を作成します。
    2. ロールに、My Organization API に必要なスコープを追加します。

    <Accordion title="必要なスコープ">
      ```
          read:my_org:details
          update:my_org:details
          create:my_org:identity_providers
          read:my_org:identity_providers
          update:my_org:identity_providers
          delete:my_org:identity_providers
          update:my_org:identity_providers_detach
          create:my_org:identity_providers_domains
          delete:my_org:identity_providers_domains
          read:my_org:domains
          delete:my_org:domains
          create:my_org:domains
          update:my_org:domains
          read:my_org:identity_providers_scim_tokens
          create:my_org:identity_providers_scim_tokens
          delete:my_org:identity_providers_scim_tokens
          create:my_org:identity_providers_provisioning
          read:my_org:identity_providers_provisioning
          delete:my_org:identity_providers_provisioning
          read:my_org:configuration
      ```
    </Accordion>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      ユーザーのトークンには、割り当てられたロールと前の手順で設定した User Access Authorization の設定の両方に含まれる権限のみが含まれます。
    </Callout>

    ## **組織の作成**

    1. [**組織 > 組織を作成**](https://manage.auth0.com/#/organizations) に移動します。
    2. Auth0 組織を設定します。
       <br />A. **Members**: テストユーザーを追加し、"Organization Admin" ロールを割り当てます。
       <br />B. **Connections**: データベース接続を有効にします。

    ## **環境変数を設定する**

    1. React プロジェクトのルートに `.env` ファイルを作成します。

    ```bash theme={null}
    NEXT_PUBLIC_AUTH0_DOMAIN=your-domain.auth0.com
    NEXT_PUBLIC_AUTH0_CLIENT_ID=your-client-id
    AUTH0_SECRET=your-secret
    AUTH0_ISSUER_BASE_URL=https://your-domain.auth0.com
    ```

    @auth0/nextjs-auth0 SDKを使用したNext.jsの場合は、[Auth0 Next.js SDKドキュメント](https://auth0.com/docs/quickstart/webapp/nextjs)でセットアップの詳細手順を確認してください。

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      お客様は、My Organization API および埋め込み可能な UI コンポーネントの利用が、お客様のセキュリティポリシーおよび適用される
      法令 (エンドユーザーに付与したあらゆる権限を含む) に準拠するよう確保する責任を負います。
    </Callout>

    <Check>
      ユーザーは認証済みで、Auth0 の組織のメンバーである必要があります。コンポーネントは、現在のユーザーコンテキストから組織データを自動的に読み込みます。インストール方法と`Auth0ComponentProvider`の設定について詳しくは、[Auth0 Universal Components](/ja/docs/get-started/universal-components/universal-components-overview)を参照してください
    </Check>
  </Tab>

  <Tab title="shadcn">
    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 Dashboard の設定** - My Organization コンポーネントを使用する前に、以下の手順をすべて完了してください。
    </Callout>

    ## **アプリケーションの作成**

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      この例では Single Page Application を使用していますが、同様の手順で Regular Web Application (RWA) を設定することもできます。
    </Callout>

    1. [**Auth0 Dashboard > Applications > Applications**](https://manage.auth0.com/#/applications) に移動し、**Create Application** を選択します。

    2. **シングルページWebアプリケーション**を選択します。

    3. **Settings** タブで、次のフィールドに `http://localhost:5173` を追加します。
       <br />A. Allowed Callback URLs
       <br />B. Allowed Logout URLs

    4. **Login Experience** で、次を選択します。
       <br />A. Business users
       <br />B.  (任意) Prompt for Organization

    ## **My Organization APIを有効にする**

    1. [**Dashboard > Applications > APIs**](https://manage.auth0.com/#/applications) に移動します。
    2. **[My Organization API](/ja/docs/api/myorganization)** を選択し、その API がテナントで有効になっていることを確認します。

    ## **アプリケーションアクセスの設定**

    1. **Application Access** タブに移動します。
    2. 使用するアプリケーションの**Edit**を選択します。
    3. 次の設定を行います。
       <br />A. [接続プロファイル](/ja/docs/authenticate/enterprise-connections/connection-profile#connection-profile): 接続の属性マッピングを含むプロファイルを選択するか、新規作成します。
       <br />B. [ユーザー属性プロファイル](/ja/docs/authenticate/enterprise-connections/user-attribute-profile#user-attribute-profile): ユーザー属性マッピングを含むプロファイルを選択するか、新規作成します。
       <br />C. サポート対象の [Identity Providers](/ja/docs/authenticate/identity-providers): 顧客が利用できるプロバイダーを有効にします。
       <br />D. 接続削除時の動作: **Allow** または **Allow if Empty** を選択します。
       <br />    • **Allow**: ユーザーは接続を削除できます。削除すると、その接続のすべてのユーザーも削除されます。
       <br />    • **Allow if Empty**: ユーザーが存在しない接続のみ削除できます。
       <br />E. ユーザーのアクセス認可: **Unauthorized**、**Authorized**、または **All** を選択します。
       <br />    • **Unauthorized**: 権限は付与されません。
       <br />    • **Authorized**: 特定の権限を選択します。
       <br />    • **All**: 現在および今後のすべての権限を含めます。
       <br />F. クライアント認証情報のアクセス認可: **Unauthorized**、**Authorized**、または **All** を選択します。
    4. **保存** を選択します。

    ## **データベースとユーザーのセットアップ**

    1. データベース接続を作成するには、[**Auth0 Dashboard > Authentication > Database**](https://manage.auth0.com/#/connections/database) に移動します。
    2. 接続の**Applications**タブを選択し、新しいSPAアプリケーションを有効化します。
    3. 初期テスト用に、このデータベースにテストユーザーを作成します。

    ## **ロールの設定**

    1. ロール (例: "組織管理者") を作成します。
    2. ロールに、My Organization API に必要なスコープを追加します。

    <Accordion title="必要なスコープ">
      ```
          read:my_org:details
          update:my_org:details
          create:my_org:identity_providers
          read:my_org:identity_providers
          update:my_org:identity_providers
          delete:my_org:identity_providers
          update:my_org:identity_providers_detach
          create:my_org:identity_providers_domains
          delete:my_org:identity_providers_domains
          read:my_org:domains
          delete:my_org:domains
          create:my_org:domains
          update:my_org:domains
          read:my_org:identity_providers_scim_tokens
          create:my_org:identity_providers_scim_tokens
          delete:my_org:identity_providers_scim_tokens
          create:my_org:identity_providers_provisioning
          read:my_org:identity_providers_provisioning
          delete:my_org:identity_providers_provisioning
          read:my_org:configuration
      ```
    </Accordion>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      ユーザーのトークンには、割り当てられたロールと前の手順で設定した User Access Authorization の設定の両方に含まれる権限のみが含まれます。
    </Callout>

    ## **組織の作成**

    1. [**組織 > 組織を作成**](https://manage.auth0.com/#/organizations) に移動します。
    2. Auth0 組織を設定します。
       <br />A. **Members**: テストユーザーを追加し、"Organization Admin" ロールを割り当てます。
       <br />B. **Connections**: データベース接続を有効にします。

    ## **環境変数を設定する**

    <Warning>
      環境変数の設定は、使用するフレームワークや構成によって異なります。具体的な実装例については、リポジトリ内の `examples/` ディレクトリを参照してください。
    </Warning>

    React プロジェクトのルートに `.env` ファイルを作成します。

    ```bash theme={null}
    VITE_AUTH0_DOMAIN=your-domain.auth0.com
    VITE_AUTH0_CLIENT_ID=your-spa-client-id
    ```

    <Warning>
      お客様は、My Organization API および Embeddable UI Components の利用が、お客様のセキュリティ ポリシーおよび適用される
      法令 (エンドユーザーに付与されたあらゆる権限を含む) に準拠するよう確保する責任を負います。
    </Warning>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      ユーザーは認証済みで、Auth0 の組織のメンバーである必要があります。コンポーネントは、現在のユーザーコンテキストから組織データを自動的に読み込みます。インストール方法と`Auth0ComponentProvider`の設定について詳しくは、[Auth0 Universal Components](/ja/docs/get-started/universal-components/universal-components-overview)を参照してください
    </Callout>
  </Tab>
</Tabs>