メインコンテンツへスキップ
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 テナントを設定する必要があります。
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. ユーザー属性プロファイル: ユーザー属性マッピングを含むプロファイルを選択するか、新規作成します。
    B. サポート対象の Identity Providers: 顧客が利用できるプロバイダーを有効にします。
    C. 接続削除時の動作: Allow または Allow if Empty を選択します。
    • 許可: ユーザーは接続を削除できます。削除すると、その接続のすべてのユーザーも削除されます。
    • 空の場合に許可: ユーザーが存在しない接続のみ削除できます。
      D. ユーザーのアクセス認可: Unauthorized、Authorized、または All を選択します。
    • Unauthorized: 権限は付与されません。
    • Authorized: 特定の権限を選択します。
    • All: 現在および今後のすべての権限を含めます。
      E. クライアント認証情報のアクセス認可: 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を参照してください