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

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

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

​

Auth0 Dashboard を設定する

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

React

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

​

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

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

1. Auth0 Dashboard > アプリケーション > アプリケーションに移動し、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 に移動します。
2. My Organization API を選択し、テナントで有効になっていることを確認します。

​

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

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

​

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

1. Auth0 Dashboard > Authentication > 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 > 組織を作成 に移動します。
2. Auth0 Organizationを設定します。
   • Membersでテストユーザーを追加し、“Organization Admin”ロールを割り当てます。
   • Connectionsでデータベース接続を有効にします。

​

環境変数を設定する

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

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 をご覧ください

Next.js

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

​

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

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

1. Auth0 Dashboard > アプリケーション > アプリケーション に移動し、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に移動します。
2. **My Organization API**を選択し、テナントで有効になっていることを確認します。

​

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

1. アプリケーションアクセスタブに移動します。
2. 使用するアプリケーションの 編集 を選択します。
3. 以下の設定を行います。
   • Connection Profile: 接続属性マッピングを含むプロファイルを選択または作成します。
   • User Attribute Profile: ユーザー属性マッピングを含むプロファイルを選択または作成します。
   • サポート対象の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に移動し、データベース接続を作成します。
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 > 組織を作成に移動します。
2. Auth0 Organizationを設定します。
   • Membersで、テストユーザーを追加し、“Organization Admin” ロールを割り当てます。
   • Connectionsで、データベース接続を有効にします。

​

環境変数を設定する

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

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

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

shadcn

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

​

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

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

1. Auth0 Dashboard > アプリケーション > アプリケーションに移動し、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 に移動します。
2. My Organization API を選択し、テナントで有効になっていることを確認します。

​

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

1. Application Access タブに移動します。
2. 使用するアプリケーションの Edit を選択します。
3. 次の設定を行います。
   • Connection Profile: 接続属性マッピングを含むプロファイルを選択または作成します。
   • User Attribute Profile: ユーザー属性マッピングを含むプロファイルを選択または作成します。
   • サポート対象の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に移動し、データベース接続を作成します。
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 に移動します。
2. Auth0 Organizationを設定します。
   • Membersで、テストユーザーを追加し、「Organization Admin」ロールを割り当てます。
   • Connectionsで、データベース接続を有効にします。

​

環境変数を設定する

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

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

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 を参照してください。