> ## 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 を使用して Delegated Admin インターフェースを構築する > Universal Components を使用して、Auth0 の My Organization API で委任管理インターフェースを構築する方法を説明します。 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 {text}; }; const includeDetails = (plans, contact, terms) => { const hasDetails = terms || plans || contact; if (!hasDetails) return null; return {plans && <>この機能は{linkify(`${plans}プラン`, "https://auth0.com/pricing")}でご利用いただけます。 } {contact && "参加をご希望の場合は、" + contact + "までお問い合わせください。 "} {terms && <>この機能を使用することにより、Oktaの該当する無料トライアル規約および{linkify("Master Subscription Agreement", "https://www.okta.com/legal")}に同意したものとみなされます。} ; }; return {feature}機能は現在、{linkify(stageText, prsLink)}です。 {includeDetails(plans, contact, terms)} ; }; Universal Components を使用すると、自社のアプリケーション内にセルフサービス型の管理ダッシュボードを構築できます。これにより、[Auth0 Organization](/docs/ja-jp/manage-users/organizations) の管理者として委任された B2B 顧客は、Auth0 Dashboard にアクセスしたり、基本的な管理作業でサポートチームに依頼したりすることなく、自社のブランディング、アイデンティティプロバイダー、検証済みドメインを管理できます。
## 仕組み
Universal Components は、ユーザースコープのトークンで動作する [My Organization API](/docs/ja-jp/api/myorganization) を使用して、[セルフサービス SSO 管理ダッシュボード](/docs/ja-jp/authenticate/enterprise-connections/self-service-enterprise-configuration)を作成します。アプリケーションに埋め込まれたダッシュボードに管理者がログインすると、Auth0 SDK は組織固有の管理者権限スコープを含むアクセストークンを取得します。コンポーネントはこのトークンを使用して、ログイン中のユーザーとして API を呼び出します。これにより、委任された管理者は所属する特定の Auth0 Organization のみを変更できます。
### 利用可能なコンポーネント
各コンポーネントは、管理タスクを実行するために [My Organization API](/docs/ja-jp/api/myorganization) の特定のエンドポイントに対応付けられています。 | **コンポーネント** | **APIエンドポイント** | | :---------------------------------------------------------------------------------------------------------------------- | :------------------------------------ | | **OrganizationDetailsEdit** — organization名、表示名、ブランドカラー、ロゴを編集します。 | `/my-org/details` | | **SsoProviderTable** — SSO アイデンティティプロバイダーの一覧表示、有効化、無効化、削除、関連付け解除を行います。 | `/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** — ドメインの作成、検証、削除、およびアイデンティティプロバイダーとの関連付けを行います。 | `/my-org/domains` |
## Auth0 Dashboard を設定する
My Organization のコンポーネントを使用する前に、適切な [API](/docs/ja-jp/api)、アプリケーション、[スコープ](/docs/ja-jp/api/myorganization)を使用して Auth0 テナントを設定する必要があります。 **Auth0 Dashboard の設定**—My Organization コンポーネントを使用する前に、以下の手順をすべて完了してください。 ## アプリケーションを作成する この例では、Single Page Application (SPA) を使用します。サーバーサイドレンダリングのReactフレームワークについては、Next.jsタブを参照してください。 1. [**Auth0 Dashboard > アプリケーション > アプリケーション**](https://manage.auth0.com/#/applications)に移動し、**Create Application** を選択します。 2. **Single Page Web Applications** を選択します。 3. **設定** タブで、次のフィールドに `http://localhost:5173` を追加します。 * Allowed Callback URLs * Allowed Logout URLs 4. **Login Experience** で、次を選択します。 * ビジネスユーザー * (任意) 組織の入力を求める ## My Organization API を有効にする 1. [**Auth0 Dashboard > アプリケーション > API**](https://manage.auth0.com/#/applications) に移動します。 2. **[My Organization API](/docs/ja-jp/api/myorganization)** を選択し、テナントで有効になっていることを確認します。 ## アプリケーションへのアクセスを設定する 1. **Application Access**タブに移動します。 2. 使用するアプリケーションの**編集**を選択します。 3. 以下の設定を行ってください。 * [Connection Profile](/docs/ja-jp/authenticate/enterprise-connections/connection-profile#connection-profile): 接続の属性マッピングを含むプロファイルを選択または作成します。 * [User Attribute Profile](/docs/ja-jp/authenticate/enterprise-connections/user-attribute-profile#user-attribute-profile): ユーザー属性のマッピングを含むプロファイルを選択または作成します。 * サポート対象の[Identity Providers](/docs/ja-jp/authenticate/identity-providers): 顧客が利用できるプロバイダーを有効にします。 * 接続の削除時の動作: **Allow** または **Allow if Empty** を選択します。 * **Allow**: ユーザーは接続を削除できます。削除すると、その接続のすべてのユーザーも削除されます。 * **Allow if Empty**: ユーザーが存在しない接続のみ削除できます。 * ユーザーアクセスの認可: **未認可**、**Authorized**、または **All** を選択します。 * **未認可**: 権限は許可されません。 * **Authorized**: 特定の権限を選択します。 * **All**: 現在および今後のすべての権限を含めます。 * クライアント資格情報アクセスの認可: **未認可**、**Authorized**、または **All** を選択します。 4. **保存**を選択します。 ## データベースとユーザーを設定する 1. [**Auth0 Dashboard > Authentication > Database**](https://manage.auth0.com/#/connections/database)に移動し、データベース接続を作成します。 2. 接続の**アプリケーション**タブを選択し、新しいSPAアプリケーションを有効にします。 3. 初期テスト用に、このデータベースにテストユーザーを作成します。 ## ロールを設定する 1. ロール (例："Organization Admin") を作成します。 2. My Organization API で必要なスコープをロールに追加します。 ``` 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 ``` ユーザーのトークンには、割り当てられたロールと前のステップで設定した User Access Authorization 設定の両方に含まれる権限のみが含まれます。 ## 組織を作成する 1. [**Organizations > 組織を作成**](https://manage.auth0.com/#/organizations) に移動します。 2. Auth0 Organizationを設定します。 * **Members**でテストユーザーを追加し、"Organization Admin"ロールを割り当てます。 * **Connections**でデータベース接続を有効にします。 ## 環境変数を設定する 1. React プロジェクトのルートディレクトリに `.env` ファイルを作成します。 ```bash wrap lines theme={null} VITE_AUTH0_DOMAIN=your-domain.auth0.com VITE_AUTH0_CLIENT_ID=your-spa-client-id ``` My Organization API および埋め込み可能な UI コンポーネントの利用が、エンドユーザーに付与された権限を含め、お客様のセキュリティポリシーおよび適用法に準拠していることを確認する責任は、お客様にあります。 ユーザーは認証済みで、Auth0 Organization のメンバーである必要があります。コンポーネントは現在のユーザーコンテキストから組織データを自動的に読み込みます。詳細については、インストール方法と `Auth0ComponentProvider` の設定について [Auth0 Universal Components](/docs/ja-jp/get-started/universal-components/universal-components-overview) をご覧ください **Auth0 Dashboard の設定**—My Organization コンポーネントを使用する前に、以下の手順をすべて完了してください。 ## アプリケーションを作成する この例では、Next.js 向けに Regular Web Application を使用します。同様の手順で Single Page Application を設定することもできます。 1. [**Auth0 Dashboard > アプリケーション > アプリケーション**](https://manage.auth0.com/#/applications) に移動し、**Create Application** を選択します。 2. **Regular Web Application** を選択します。 3. **設定**タブで、以下のフィールドに`http://localhost:5173`を追加します。 * 許可するコールバック URL * 許可するログアウト URL 4. **Login Experience** で、以下を選択します。 * Business Users * (任意) Prompt for Organization ## My Organization API を有効にする 1. [**Auth0 Dashboard > アプリケーション > APIs**](https://manage.auth0.com/#/applications)に移動します。 2. \*\*[My Organization API](/docs/ja-jp/api/myorganization)\*\*を選択し、テナントで有効になっていることを確認します。 ## アプリケーションへのアクセスを設定する 1. **アプリケーションアクセス**タブに移動します。 2. 使用するアプリケーションの **編集** を選択します。 3. 以下の設定を行います。 * [Connection Profile](/docs/ja-jp/authenticate/enterprise-connections/connection-profile#connection-profile): 接続属性マッピングを含むプロファイルを選択または作成します。 * [User Attribute Profile](/docs/ja-jp/authenticate/enterprise-connections/user-attribute-profile#user-attribute-profile): ユーザー属性マッピングを含むプロファイルを選択または作成します。 * サポート対象の[Identity Providers](/docs/ja-jp/authenticate/identity-providers): 顧客が使用できるプロバイダーを有効にします。 * 接続の削除動作: **Allow** または **Allow if Empty** を選択します。 * **Allow**: 接続を削除すると、その接続のすべてのユーザーも削除されます。 * **Allow if Empty**: ユーザーが存在しない接続のみ削除できます。 * ユーザーアクセスの認可: **Unauthorized**、**Authorized**、または **All** を選択します。 * **Unauthorized**: 権限は許可されません。 * **Authorized**: 特定の権限を選択します。 * **All**: 既存および今後のすべての権限を含めます。 * クライアント認証情報アクセスの認可: **Unauthorized**、**Authorized**、または **All** を選択します。 4. **保存**を選択します。 ## データベースとユーザーを設定する 1. [**Auth0 Dashboard > Authentication > Database**](https://manage.auth0.com/#/connections/database)に移動し、データベース接続を作成します。 2. 接続の**アプリケーション**タブを選択し、新しいSPAアプリケーションを有効にします。 3. 初期テスト用に、このデータベースにテストユーザーを作成します。 ## ロールを設定する 1. ロール (例："Organization Admin") を作成します。 2. My Organization API で必要なスコープをロールに追加します。 ``` 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 ``` ユーザーのtokenには、割り当てられたroleと前のStepで設定したUser Access Authorizationの設定の両方に含まれるpermissionsのみが含まれます。 ## 組織を作成する 1. [**Organizations > 組織を作成**](https://manage.auth0.com/#/organizations)に移動します。 2. Auth0 Organizationを設定します。 * **Members**で、テストユーザーを追加し、"Organization Admin" ロールを割り当てます。 * **Connections**で、データベース接続を有効にします。 ## 環境変数を設定する 1. React プロジェクトのルートに `.env` ファイルを作成します。 ```bash wrap lines 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)を参照してください。 My Organization API および埋め込み可能な UI コンポーネントの使用が、エンドユーザーに付与する権限を含め、お客様のセキュリティポリシーおよび適用法令に準拠していることを確認する責任は、お客様にあります。 ユーザーは認証済みで、Auth0 Organization のメンバーである必要があります。コンポーネントは、現在のユーザーコンテキストから Organization のデータを自動的に読み込みます。詳細は、インストール方法と `Auth0ComponentProvider` の設定について説明した [Auth0 Universal Components](/docs/ja-jp/get-started/universal-components/universal-components-overview) をお読みください **Auth0 Dashboard の設定**—My Organization のコンポーネントを使用する前に、以下の手順をすべて完了してください。 ## アプリケーションを作成する この例では Single Page Application を使用しますが、同様の手順で Regular Web Application (RWA) を設定することもできます。 1. [**Auth0 Dashboard > アプリケーション > アプリケーション**](https://manage.auth0.com/#/applications)に移動し、**Create Application** を選択します。 2. **Single Page Web Applications** を選択します。 3. **設定** タブで、以下のフィールドに `http://localhost:5173` を追加します。 * Allowed Callback URLs * Allowed Logout URLs 4. **Login Experience**で、次を選択します。 * ビジネスユーザー。 * (任意) 組織の入力を求める。 ## My Organization API を有効にする 1. [**Dashboard > アプリケーション > APIs**](https://manage.auth0.com/#/applications) に移動します。 2. **[My Organization API](/docs/ja-jp/api/myorganization)** を選択し、テナントで有効になっていることを確認します。 ## アプリケーションへのアクセスを設定する 1. **Application Access** タブに移動します。 2. 使用するアプリケーションの **Edit** を選択します。 3. 次の設定を行います。 * [Connection Profile](/docs/ja-jp/authenticate/enterprise-connections/connection-profile#connection-profile): 接続属性マッピングを含むプロファイルを選択または作成します。 * [User Attribute Profile](/docs/ja-jp/authenticate/enterprise-connections/user-attribute-profile#user-attribute-profile): ユーザー属性マッピングを含むプロファイルを選択または作成します。 * サポート対象の[Identity Providers](/docs/ja-jp/authenticate/identity-providers): 顧客が利用できるプロバイダーを有効にします。 * 接続の削除動作: **Allow** または **Allow if Empty** を選択します。 * **Allow**: 接続を削除でき、接続内のすべてのユーザーも削除されます。 * **Allow if Empty**: ユーザーがいない接続のみ削除できます。 * ユーザーアクセスの認可: **Unauthorized**、**Authorized**、または **All** を選択します。 * **Unauthorized**: permissionsは一切許可されません。 * **Authorized**: 特定のpermissionsを選択します。 * **All**: 現在および今後のすべてのpermissionsを含めます。 * クライアント認証情報アクセスの認可: **Unauthorized**、**Authorized**、または **All** を選択します。 4. **保存**を選択します。 ## データベースとユーザーを設定する 1. [**Auth0 Dashboard > Authentication > Database**](https://manage.auth0.com/#/connections/database)に移動し、データベース接続を作成します。 2. 接続の**アプリケーション**タブを選択し、新しいSPAアプリケーションを有効にします。 3. 初期テスト用に、このデータベースにテストユーザーを作成します。 ## ロールを設定する 1. ロール (例："Organization Admin") を作成します。 2. My Organization API の必要なスコープをロールに追加します。 ``` 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 ``` ユーザーのtokenには、割り当てられたroleと前のステップで設定したUser Access Authorizationの両方に含まれるpermissionsのみが含まれます。 ## 組織を作成する 1. [**Organizations > Create Organization**](https://manage.auth0.com/#/organizations) に移動します。 2. Auth0 Organizationを設定します。 * **Members**で、テストユーザーを追加し、「Organization Admin」ロールを割り当てます。 * **Connections**で、データベース接続を有効にします。 ## 環境変数を設定する 環境変数の設定は、フレームワークや構成によって異なります。具体的な実装例については、リポジトリ内の`examples/`ディレクトリを確認してください。 React プロジェクトのルートに `.env` ファイルを作成します。 ```bash wrap lines theme={null} VITE_AUTH0_DOMAIN=your-domain.auth0.com VITE_AUTH0_CLIENT_ID=your-spa-client-id ``` My Organization API および埋め込み可能な UI コンポーネントの使用が、エンドユーザーに付与された権限を含め、お客様のセキュリティポリシーおよび適用法令に準拠するようにする責任は、お客様にあります。 ユーザーは認証済みで、Auth0 Organization のメンバーである必要があります。コンポーネントは、現在のユーザーコンテキストから Organization のデータを自動的に読み込みます。インストールと `Auth0ComponentProvider` の設定については、[Auth0 Universal Components](/docs/ja-jp/get-started/universal-components/universal-components-overview) を参照してください。