メインコンテンツへスキップ

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

OrganizationDetailsEdit

組み込み検証とAPI統合でOrganization設定（名前、表示名、ブランドカラー、ロゴなど）を編集。

SsoProviderTable

包括的なテーブルインターフェイスでSSO IDプロバイダーを表示し、作成、編集、 削除、有効化／無効化、Organizationからの削除といった機能で管理。

SsoProviderCreate

SSOプロバイダーを作成するマルチステップウィザード。プロバイダーの選択、詳細の構成、OktaやADFS、SAML、OIDC、Google、Workspace、Azure AD、PingFederateの認証のセットアップを行います。

SsoProviderEdit

タブ付きインターフェイスでの包括的なSSOプロバイダー管理。認証設定の構成、 SCIMトークンでのプロビジョニングの有効化、ドメインとの関連付けの管理を行えます。

DomainTable

統一されたテーブルインターフェイスで、作成、検証、削除、IDプロバイダーとの関連付けなどの機能を使ってOrganizationのドメインを管理。

​
セットアップの要件

My Organizationコンポーネントを使用する前に、Auth0テナントを適切なAPI、アプリケーション、および権限で構成する必要があります。次の手順に従って環境をセットアップしてください。
Auth0 Dashboardを構成する - My Organizationコンポーネントを使用する前に、以下の操作をすべて完了してください。
1

APIを有効化する

**［API］ → ［My Organization API］**に移動して、テナントで有効化されていることを確認します。
2

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

**［アプリケーション］ → ［アプリケーションの作成］**に移動します。
  • ［シングルページWebアプリケーション］を選択する
  • 開発モードの場合は、以下にhttp://localhost:5173を追加する
    • 許可するCallback URL
    • 許可するログアウトURL
  • ログインエクスペリエンスを設定する
    • ビジネスユーザー
    • Organizationの入力を求める（任意）
この例ではシングルページアプリケーションを使用していますが、一般的なWebアプリケーション（RWA）も同様の手順で構成できます。
3

クライアント構成をセットアップする

**［アプリケーション］ → ［アプリ］ → ［設定］**に移動して、以下を構成します。［詳細設定］セクション
  • ［付与タイプ］：［認可コード］と［リフレッシュトークン］が有効になっていることを確認する
  • ［トークンエンドポイントの認証方法］：SPAの場合は［なし］（一般的なWebアプリの場合は［クライアントシークレット（Post）］）に設定する
これらの設定は、My Organizationコンポーネントが適切に機能するために必要です。「ログイン後のプロンプト」フローでは、ユーザーがアクセスするOrganizationを選択できます。
4

データベースとユーザーをセットアップする

  • データベース接続を作成する - ［アプリケーション］タブで新しいSPAアプリを有効にする
  • このデータベースにユーザーを作成する（テスト目的）
5

ロールをセットアップする

ロールを新規作成するか既存のロール（例：組織管理者）を使用して、必要な権限を追加する
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
6

Organizationを作成する

**［Organizations］ → ［Organizationを作成］**に移動する
  • メンバー：ユーザーを追加して、ロールを割り当てる
  • 接続：データベースを有効にする
7

クライアント付与を作成する

アクセス制御を解決するために、ユーザーとクライアントのペアのクライアント付与を作成する
POST https://{{auth0_domain}}/api/v2/client-grants
{
  "scope": [
    "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"
  ],
  "client_id": "{{auth0_client_id}}",
  "audience": "https://{{auth0_domain}}/my-organization/",
  "subject_type": "user"
}
このリクエストにはManagement APIトークンが必要です。**［アプリケーション］ → ［API］ → ［Auth0 Management API］ → ［API Explorer］**で取得してください。
8

環境変数を設定する

プロジェクトにAuth0の構成で.envファイルを作成します。正確な変数は、アプリケーションの種類によって異なります。
VITE_AUTH0_DOMAIN=your-domain.auth0.com
VITE_AUTH0_CLIENT_ID=your-spa-client-id
環境変数の構成は、フレームワークとセットアップによって異なります。具体的な実装例のレポジトリでexamples/ディレクトリをご確認ください。
お客様によるMy Organization APIおよび埋め込み可能なUIコンポーネントの使用が、エンドユーザーに付与された権限も含めて、セキュリティポリシーと適用法に準拠していることを保証する責任は、お客様にあります。

​
注

ユーザーは認証済みのOrganizationメンバーでなければなりません - コンポーネント は現在のユーザーのコンテキストからOrganizationデータを自動的に読み込みます - 基本的な セットアップ要件はどのコンポーネントでも同じです - インストールと Auth0ComponentProviderの構成については、概要 をご覧ください