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

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

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

​

仕組み

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

​

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

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

コンポーネント	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

​

Auth0 Dashboard を設定する

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

React

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

​

アプリケーションの作成

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

1. Auth0 Dashboard > Applications > Applications に移動し、Create Application を選択します。

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

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

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

​

My Organization APIを有効にする

1. Dashboard > Applications > APIs に移動します。
2. My Organization API を選択し、その API がテナントで有効になっていることを確認します。

​

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

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

​

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

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

​

ロールの設定

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

​

環境変数を設定する

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

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

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

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

Next.js

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

​

アプリケーションの作成

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

1. Auth0 Dashboard > Applications > Applications に移動し、Create Application を選択します。

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

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

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

​

My Organization APIを有効にする

1. Dashboard > Applications > APIs に移動します。
2. My Organization API を選択し、その API がテナントで有効になっていることを確認します。

​

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

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

​

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

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

​

ロールの設定

1. ロール (例: “組織管理者”) を作成します。
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. 組織 > 組織を作成 に移動します。
2. Auth0 組織を設定します。
   A. Members: テストユーザーを追加し、“Organization Admin” ロールを割り当てます。
   B. 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 の組織のメンバーである必要があります。コンポーネントは、現在のユーザーコンテキストから組織データを自動的に読み込みます。インストール方法とAuth0ComponentProviderの設定について詳しくは、Auth0 Universal Componentsを参照してください

shadcn

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

​

アプリケーションの作成

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

1. Auth0 Dashboard > Applications > Applications に移動し、Create Application を選択します。

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

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

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

​

My Organization APIを有効にする

1. Dashboard > Applications > APIs に移動します。
2. My Organization API を選択し、その API がテナントで有効になっていることを確認します。

​

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

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

​

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

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

​

ロールの設定

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

​

環境変数を設定する

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

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

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

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

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