My Organization API を使用して Delegated Admin インターフェースを構築する

Universal Components を使用すると、自社のアプリケーション内にセルフサービス型の管理ダッシュボードを構築できます。これにより、Auth0 Organization の管理者として委任された B2B 顧客は、Auth0 Dashboard にアクセスしたり、基本的な管理作業でサポートチームに依頼したりすることなく、自社のブランディング、アイデンティティプロバイダー、検証済みドメインを管理できます。

仕組み

Universal Components は、ユーザースコープのトークンで動作する My Organization API を使用して、セルフサービス SSO 管理ダッシュボードを作成します。アプリケーションに埋め込まれたダッシュボードに管理者がログインすると、Auth0 SDK は組織固有の管理者権限スコープを含むアクセストークンを取得します。コンポーネントはこのトークンを使用して、ログイン中のユーザーとして API を呼び出します。これにより、委任された管理者は所属する特定の Auth0 Organization のみを変更できます。

利用可能なコンポーネント

各コンポーネントは、管理タスクを実行するために My Organization API の特定のエンドポイントに対応付けられています。

コンポーネント	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`
OrganizationMemberManagement — organizationのメンバー、招待、ロールの割り当てを管理します。	`/my-org/members`, `/my-org/invitations`
OrganizationMemberDetail — 個々のメンバーのプロフィールと割り当てられたロールを表示・管理します。	`/my-org/members/{user_id}`, `/my-org/members/{user_id}/roles`

権限に応じたコントロール

My Organization コンポーネントは、サインイン中の管理者に付与された My Organization 権限に基づき、利用可能なコントロールを自動的に調整します。コンポーネントと操作に応じて、利用できないコントロールは非表示になるか、理由を示すフィードバックとともに無効化されます。ミューテーション Handler では、リクエストを送信する前にクライアント側で権限チェックも行われます。 React SPA アプリケーションでは、コンポーネントは IDトークンのクレームから urn:auth0:my_org_current_user_permissions クレームを読み取ります。プロキシモードを使用する Next.js アプリケーションでは、プロキシプロファイルのレスポンスから権限を読み取ります。アクセストークンは My Organization API へのリクエストを認可します。My Organization API は引き続き、認可の信頼できる境界となります。 readOnly prop は、管理者が必要な権限を持っている場合でもミューテーションを無効にする、独立したアプリケーションレベルのコントロールです。メンバーに対するミューテーションでは、対象メンバーのアクセスレベルが limited または full であることも必要です。

コンポーネント領域	制限付き操作に使用される権限
Organization の詳細	`update:my_org:details`
ドメイン	`create:my_org:domains`, `update:my_org:domains`, `delete:my_org:domains`, `create:my_org:identity_providers_domains`, `delete:my_org:identity_providers_domains`
SSO プロバイダー	`create:my_org:identity_providers`, `update:my_org:identity_providers`, `delete:my_org:identity_providers`, `update:my_org:identity_providers_detach`、および選択した設定で必要となるドメイン、プロビジョニング、SCIM トークンの権限
メンバーと招待	`create:my_org:member_invitations`, `delete:my_org:member_invitations`, `create:my_org:member_roles`, `delete:my_org:member_roles`, `delete:my_org:memberships`

Auth0 Dashboard を設定する

My Organization のコンポーネントを使用する前に、適切な API、アプリケーション、スコープを使用して Auth0 テナントを設定する必要があります。

React
Next.js
shadcn

Auth0 Dashboard の設定—My Organization コンポーネントを使用する前に、以下の手順をすべて完了してください。

アプリケーションを作成する

この例では、Single Page Application (SPA) を使用します。サーバーサイドレンダリングのReactフレームワークについては、Next.jsタブを参照してください。

Auth0 Dashboard > アプリケーション > アプリケーションに移動し、Create Application を選択します。
Single Page Web Applications を選択します。
設定タブで、次のフィールドに http://localhost:5173 を追加します。
- Allowed Callback URLs
- Allowed Logout URLs
Login Experience で、次を選択します。
- ビジネスユーザー。
- (任意) 組織の入力を求める。

My Organization API を有効にする

Dashboard > アプリケーション > APIs に移動します。
My Organization API を選択し、テナントで有効になっていることを確認します。

アプリケーションへのアクセスを設定する

Application Accessタブに移動します。
使用するアプリケーションの編集を選択します。
以下の設定を行ってください。
- Connection Profile: 接続属性マッピングを含むプロファイルを選択または作成します。
- User Attribute Profile: ユーザー属性マッピングを含むプロファイルを選択または作成します。
- サポート対象のIdentity Providers: 顧客が利用できるプロバイダーを有効にします。
- 接続削除時の動作: Allow または Allow if Empty を選択します。
  - Allow: ユーザーは接続を削除できます。削除すると、その接続のすべてのユーザーも削除されます。
  - Allow if Empty: ユーザーが存在しない接続のみ削除できます。
- ユーザーアクセスの認可: Unauthorized、Authorized、または All を選択します。
  - Unauthorized: 権限は許可されません。
  - Authorized: 特定の権限を選択します。
  - All: 既存および今後のすべての権限を含めます。
- クライアント認証情報アクセスの認可: Unauthorized、Authorized、または All を選択します。
保存を選択します。

データベースとユーザーを設定する

Auth0 Dashboard > Authentication > Databaseに移動し、データベース接続を作成します。
接続のアプリケーションタブを選択し、新しいSPAアプリケーションを有効にします。
初期テスト用に、このデータベースにテストユーザーを作成します。

ロールを設定する

ロール (例：“Organization Admin”) を作成します。
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
    read:my_org:permissions
    read:my_org:user_stores
    read:my_org:members
    delete:my_org:memberships
    read:my_org:member_roles
    create:my_org:member_roles
    delete:my_org:member_roles
    read:my_org:member_invitations
    create:my_org:member_invitations
    delete:my_org:member_invitations
    read:my_org:roles

ユーザーのトークンには、割り当てられたロールと前のステップで設定した User Access Authorization 設定の両方に含まれる権限のみが含まれます。

組織を作成する

Organizations > Create Organization に移動します。
Auth0 Organizationを設定します。
- Membersでテストユーザーを追加し、“Organization Admin”ロールを割り当てます。
- Connectionsでデータベース接続を有効にします。

環境変数を設定する

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

VITE_AUTH0_DOMAIN=your-domain.auth0.com
  VITE_AUTH0_CLIENT_ID=your-spa-client-id

My Organization コンポーネントには、My Organization API のオーディエンスに対するアクセストークンが必要です。React SPA の設定については、Auth0ComponentProvider を設定するを参照してください。

My Organization API および埋め込み可能な UI コンポーネントの使用が、エンドユーザーに付与された権限を含め、お客様のセキュリティポリシーおよび適用法令に準拠していることを確認する責任は、お客様にあります。

ユーザーは認証済みで、Auth0 Organization のメンバーである必要があります。コンポーネントは現在のユーザーコンテキストから組織データを自動的に読み込みます。詳細については、インストール方法と Auth0ComponentProvider の設定について Auth0 Universal Components をご覧ください

Auth0 Dashboard の設定—My Organization コンポーネントを使用する前に、以下の手順をすべて完了してください。

アプリケーションを作成する

この例では、Next.js 向けに Regular Web Application を使用します。同様の手順で Single Page Application を設定することもできます。

Auth0 Dashboard > アプリケーション > アプリケーション に移動し、Create Application を選択します。
Regular Web Application を選択します。
設定タブで、次のフィールドに http://localhost:5173 を追加します。
- Allowed Callback URLs
- Allowed Logout URLs
Login Experience で、次を選択します。
- ビジネスユーザー。
- (任意) 組織の入力を求める。

My Organization API を有効にする

Dashboard > アプリケーション > APIs に移動します。
My Organization API を選択し、テナントで有効になっていることを確認します。

アプリケーションへのアクセスを設定する

Application Accessタブに移動します。
使用するアプリケーションの編集を選択します。
以下の設定を行ってください。
- Connection Profile: 接続属性マッピングを含むプロファイルを選択または作成します。
- User Attribute Profile: ユーザー属性マッピングを含むプロファイルを選択または作成します。
- サポート対象のIdentity Providers: 顧客が利用できるプロバイダーを有効にします。
- 接続削除時の動作: Allow または Allow if Empty を選択します。
  - Allow: ユーザーは接続を削除できます。削除すると、その接続のすべてのユーザーも削除されます。
  - Allow if Empty: ユーザーが存在しない接続のみ削除できます。
- ユーザーアクセスの認可: Unauthorized、Authorized、または All を選択します。
  - Unauthorized: 権限は許可されません。
  - Authorized: 特定の権限を選択します。
  - All: 既存および今後のすべての権限を含めます。
- クライアント認証情報アクセスの認可: Unauthorized、Authorized、または All を選択します。
保存を選択します。

データベースとユーザーを設定する

Auth0 Dashboard > Authentication > Databaseに移動し、データベース接続を作成します。
接続のアプリケーションタブを選択し、新しいSPAアプリケーションを有効にします。
初期テスト用に、このデータベースにテストユーザーを作成します。

ロールを設定する

ロール (例：“Organization Admin”) を作成します。
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
    read:my_org:permissions
    read:my_org:user_stores
    read:my_org:members
    delete:my_org:memberships
    read:my_org:member_roles
    create:my_org:member_roles
    delete:my_org:member_roles
    read:my_org:member_invitations
    create:my_org:member_invitations
    delete:my_org:member_invitations
    read:my_org:roles

ユーザーのトークンには、割り当てられたロールと前のステップで設定した User Access Authorization 設定の両方に含まれる権限のみが含まれます。

組織を作成する

Organizations > Create Organization に移動します。
Auth0 Organizationを設定します。
- Membersでテストユーザーを追加し、“Organization Admin”ロールを割り当てます。
- Connectionsでデータベース接続を有効にします。

環境変数を設定する

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

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 のドキュメントを参照してください。

Auth0 Dashboard の設定—My Organization コンポーネントを使用する前に、以下の手順をすべて完了してください。

アプリケーションを作成する

この例では Single Page Application を使用しますが、同様の手順で Regular Web Application (RWA) を設定することもできます。

Auth0 Dashboard > アプリケーション > アプリケーションに移動し、Create Application を選択します。
Single Page Web Applications を選択します。
設定タブで、次のフィールドに http://localhost:5173 を追加します。
- Allowed Callback URLs
- Allowed Logout URLs
Login Experience で、次を選択します。
- ビジネスユーザー。
- (任意) 組織の入力を求める。

My Organization API を有効にする

Dashboard > アプリケーション > APIs に移動します。
My Organization API を選択し、テナントで有効になっていることを確認します。

アプリケーションへのアクセスを設定する

Application Accessタブに移動します。
使用するアプリケーションの編集を選択します。
以下の設定を行ってください。
- Connection Profile: 接続属性マッピングを含むプロファイルを選択または作成します。
- User Attribute Profile: ユーザー属性マッピングを含むプロファイルを選択または作成します。
- サポート対象のIdentity Providers: 顧客が利用できるプロバイダーを有効にします。
- 接続削除時の動作: Allow または Allow if Empty を選択します。
  - Allow: ユーザーは接続を削除できます。削除すると、その接続のすべてのユーザーも削除されます。
  - Allow if Empty: ユーザーが存在しない接続のみ削除できます。
- ユーザーアクセスの認可: Unauthorized、Authorized、または All を選択します。
  - Unauthorized: 権限は許可されません。
  - Authorized: 特定の権限を選択します。
  - All: 既存および今後のすべての権限を含めます。
- クライアント認証情報アクセスの認可: Unauthorized、Authorized、または All を選択します。
保存を選択します。

データベースとユーザーを設定する

Auth0 Dashboard > Authentication > Databaseに移動し、データベース接続を作成します。
接続のアプリケーションタブを選択し、新しいSPAアプリケーションを有効にします。
初期テスト用に、このデータベースにテストユーザーを作成します。

ロールを設定する

ロール (例：“Organization Admin”) を作成します。
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
    read:my_org:permissions
    read:my_org:user_stores
    read:my_org:members
    delete:my_org:memberships
    read:my_org:member_roles
    create:my_org:member_roles
    delete:my_org:member_roles
    read:my_org:member_invitations
    create:my_org:member_invitations
    delete:my_org:member_invitations
    read:my_org:roles

ユーザーのトークンには、割り当てられたロールと前のステップで設定した User Access Authorization 設定の両方に含まれる権限のみが含まれます。

組織を作成する

Organizations > Create Organization に移動します。
Auth0 Organizationを設定します。
- Membersでテストユーザーを追加し、“Organization Admin”ロールを割り当てます。
- Connectionsでデータベース接続を有効にします。

環境変数を設定する

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

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

VITE_AUTH0_DOMAIN=your-domain.auth0.com
VITE_AUTH0_CLIENT_ID=your-spa-client-id

ユーザーは認証済みで、Auth0 Organization のメンバーである必要があります。コンポーネントは、現在のユーザーコンテキストから Organization のデータを自動的に読み込みます。詳細は、インストール方法と Auth0ComponentProvider の設定について説明した Auth0 Universal Components をお読みください

Webコンポーネント

iOSコンポーネント

Androidコンポーネント

My Organization API を使用して Delegated Admin インターフェースを構築する

仕組み

利用可能なコンポーネント

権限に応じたコントロール

Auth0 Dashboard を設定する

アプリケーションを作成する

My Organization API を有効にする

アプリケーションへのアクセスを設定する

データベースとユーザーを設定する

ロールを設定する

組織を作成する

環境変数を設定する

アプリケーションを作成する

My Organization API を有効にする

アプリケーションへのアクセスを設定する

データベースとユーザーを設定する

ロールを設定する

組織を作成する

環境変数を設定する

アプリケーションを作成する

My Organization API を有効にする

アプリケーションへのアクセスを設定する

データベースとユーザーを設定する

ロールを設定する

組織を作成する

環境変数を設定する

​仕組み

​利用可能なコンポーネント

​権限に応じたコントロール

​Auth0 Dashboard を設定する

​アプリケーションを作成する

​My Organization API を有効にする

​アプリケーションへのアクセスを設定する

​データベースとユーザーを設定する

​ロールを設定する

​組織を作成する

​環境変数を設定する

​アプリケーションを作成する

​My Organization API を有効にする

​アプリケーションへのアクセスを設定する

​データベースとユーザーを設定する

​ロールを設定する

​組織を作成する

​環境変数を設定する

​アプリケーションを作成する

​My Organization API を有効にする

​アプリケーションへのアクセスを設定する

​データベースとユーザーを設定する

​ロールを設定する

​組織を作成する

​環境変数を設定する

仕組み

利用可能なコンポーネント

権限に応じたコントロール

Auth0 Dashboard を設定する

アプリケーションを作成する

My Organization API を有効にする

アプリケーションへのアクセスを設定する

データベースとユーザーを設定する

ロールを設定する

組織を作成する

環境変数を設定する

アプリケーションを作成する

My Organization API を有効にする

アプリケーションへのアクセスを設定する

データベースとユーザーを設定する

ロールを設定する

組織を作成する

環境変数を設定する

アプリケーションを作成する

My Organization API を有効にする

アプリケーションへのアクセスを設定する

データベースとユーザーを設定する

ロールを設定する

組織を作成する

環境変数を設定する