本記事は 2025年4月28日に公開された「Unlock Enterprise Readiness: How to Add Self-Service SSO to Your SaaS App」を機械翻訳した記事です。
以前のブログ記事で説明したように、SaaSアプリケーションが個人ユーザーへのサービス提供から企業や組織向けのサービスへとスケールアップする場合、ビジネス顧客のセキュリティ基準をサポートすることが不可欠になります。Auth0 Enterprise Connectionsは、外部のフェデレーションIDプロバイダー (IdP) とのシームレスな統合を可能にし、企業のアイデンティティとセキュリティ要件を満たします。この機能は強力ですが、通常、Auth0テナントの管理者または編集者が各接続を個別に設定するか、SaaSアプリケーション内で顧客の管理者にタスクを委任できるように機能をカスタム開発する必要がありました。
Self-Service Single Sign-On (SSO)により、B2B SaaSの顧客は以前よりも簡単かつ迅速にセルフサービス機能を有効化できます。
Self-service SSOは、以下のコンポーネントを使用して顧客にセットアップを委任します。
セルフサービスプロファイル: SSOに使用するIDプロバイダーや、メールアドレスなどの取得が必要なユーザー属性など、顧客のSSO実装の主要な要素を定義します。
セルフサービスアクセスチケット: マジックリンクとして提供されるこのチケットは、SSOセットアップアシスタントへのアクセス権を顧客の管理者に付与し、結果として得られるSSO統合の具体的な詳細を設定します。
SSO設定アシスタント: SSOセットアッププロセスについて顧客の管理者をガイドします。
本記事では、この機能のセットアップ方法をステップバイステップで紹介します。
Management DashboardでSelf-Service SSO機能をセットアップする
まず、Auth0 Management Dashboardでこの機能をセットアップし、その仕組みを理解します。
セルフサービスプロファイルを作成する
Auth0 Management Dashboardで、ナビゲーションメニューからAuthentication - Enterprise
を選択します。
エンタープライズ向けにサポートされている接続のリストが表示されます。一番下までスクロールすると、Self-Service SSO
ボックスがあります。これをクリックします。
+ Create Profile
を押して、新しいプロファイルを作成します。
プロファイルの名前と説明 (任意) を入力します。
Settings
タブでは、プロファイルがサポートするIDプロバイダーを選択できます。
オプションでブランディングを設定し、カスタマイズされたエクスペリエンスを提供できます。本記事では、デフォルト設定のままにします。
アプリケーションが特定の属性を必要とする場合、User Profile
タブで追加できます。顧客の管理者は、これらの属性をIDプロバイダーの属性に追加する必要があります。属性には、メール、部署、役職などがあります。
これで、顧客の管理者向けにチケットを生成する準備ができました。
エンドユーザー管理者がSSOを設定するためのチケットを生成する
プロファイル画面で+ Generate Ticket
をクリックすると、顧客の管理者がSSOを設定するためのチケットを生成できます。
次のページでは、新しい接続を作成するか、既存の接続を編集するためのチケットを設定できます。新しいチケットを作成するにはConnection Name
フィールドを指定する必要があります。接続フローを編集するには、代わりにConnection ID
フィールドを指定する必要があります。SaaSのニーズに応じて、Enabled Clients
フィールドにクライアント (Auth0 Applications) を、Enabled organizations
フィールドにOrganizationsを入力できます。他のオプションも指定可能です。
オプションを設定し、ページ下部のCreate Ticket
をクリックしてチケットを生成します。チケットが生成されるとSSO接続のセットアップまたは編集用のURLを記載したポップアップウィンドウが表示されます。このURLを顧客の管理者に提供します。セキュリティ上の理由からURLは安全に保管し、許可された個人のみに共有してください。
顧客の管理者としてチケットを使用してSelf-Service SSOをセットアップする
このステップでは、テストとしてGoogle WorkspaceでSSOをセットアップします。生成されたチケットのURLをブラウザで開きます。
IDプロバイダー選択画面で、Google Workspaceを選択しNext
を押します。
次のページには、Google Developer ConsoleでOIDCアプリケーションをセットアップするための手順が表示されます。指示に従ってOIDCアプリケーションを作成します。
指示に従うと、Google Developer ConsoleにOAuthクライアントが作成されます。ポップアップに表示されるClient ID
とClient secret
をコピーします。
ステップ2で、Google Workspace Domain
、Client ID
、Client secret
を入力して接続を設定します。
ステップ3では、Google管理コンソールでユーザーまたはグループにAuth0へのアクセスを許可するための手順がページに表示されます。
すべてを設定したら、ステップ4でSSOをテストできます。
テストが成功すると、次の画面が表示されます。必ずDone
ボタンをクリックして完了してください。
Auth0で接続をテストする
顧客の管理者が接続を作成すると、Auth0 Management Dashboardで接続設定を確認できます。Authentication - Enterprise
を開き、Google Workspace
をクリックします。
接続がリストに表示されていることがわかります。Try
オプションをクリックして接続をテストできます。
すべてを適切に設定していれば、Google Workspaceアカウントのログイン画面が表示されます。
これで、Self-Service SSOフローを使用してSSO接続を正常に設定できました。
次のセクションでは、アプリケーションでチケットを生成します。
Node.jsアプリケーションでチケットを生成する
このパートでは、ダッシュボードで作成したプロファイルを使用して、アプリケーション上でチケットを生成する機能を実装します。この機能により、顧客管理者は自分でチケットを生成できます。
このセクションで説明する手順の出発点として、サンプルのNode.js/Expressアプリケーションをダウンロードできます。
git clone --branch initial --single-branch https://github.com/neri78/self-service-sso-express.git
付属のREADMEファイルの指示に従って、アプリケーションを登録および設定してください。
サンプルアプリで、ユーザーとしてサインアップしてログインしたら、ヘッダーナビゲーションのDashboardをクリックしてダッシュボードページを開きます。ダッシュボードページへのナビゲーションで次のページが表示されます。現時点では、Add SSO Connection
ボタンは機能していません。
以下のセクションでは、次のことを行います。
- アプリケーションにAuth0 Management APIへのアクセスを提供する
- 顧客管理者がSSO接続をセットアップするためのチケットを生成する
アプリケーションにAuth0 Management APIへのアクセスを提供する
顧客の管理者がSaaSアプリケーション上からAuth0テナントに対してSSO接続を追加するために、Auth0 Management APIへのアクセス権を持つ新しいアプリケーションをAuth0テナントに登録します。
最初のステップとして、Auth0ダッシュボードにアクセスし、次の画像に示すように新しいMachine-to-Machineアプリケーションを登録します。
アプリケーションを登録し、そのドメイン、クライアントID、およびクライアントシークレットをメモしておきます。
次に、アプリケーションが認可するAuth0 Management APIを選択します。
アプリケーションで利用できるAuth0 Managment APIの権限を選択する必要があります。本記事では、既存のセルフサービスSSOプロファイルとクライアントを取得しチケットを生成します。そのため以下の権限を付与します。
- read:selfserviceprofiles
- read:clients
- create:ssoaccesstickets
一般的なルールとして、テナントで実行する予定の操作に厳密に必要な権限のみを付与してください。
権限を有効にした後、Update
ボタンをクリックして変更を適用します。
サンプルアプリケーションの.env
ファイルを開き、以下の環境変数を見つけます。
AUTH0_MANAGEMENT_CLIENT_DOMAIN="YOUR_MANAGEMENT_CLIENT_DOMAIN"
AUTH0_MANAGEMENT_CLIENT_ID="YOUR_MANAGEMENT_CLIENT_ID"
AUTH0_MANAGEMENT_CLIENT_SECRET="YOUR_MANAGEMENT_CLIENT_SECRET"
プレースホルダーYOUR_MANAGEMENT_CLIENT_DOMAIN
、YOUR_MANAGEMENT_CLIENT_ID
、YOUR_MANAGEMENT_CLIENT_SECRET
を、先ほど登録したアプリケーションの対応する値に置き換えます。
Auth0 Node.jsクライアントをアプリケーションに追加する
アプリケーションは、チケットを作成するためにAuth0 Management APIを呼び出す必要があります。このAPIを使用すると、コードを介してAuth0テナントを設定できます。Node.jsクライアントライブラリを使用して、Auth0 Management APIとの対話を簡素化します。Node.jsクライアントライブラリは、すべての管理操作を処理するためのManagement API Clientを提供します。
次のコマンドでライブラリをインストールします。
npm install auth0
次に、ManagementClient
のインスタンスを作成するためのヘルパーモジュールを作成します。これにより、アプリケーションはAuth0 Management APIと対話するたびに複数のインスタンスを作成するのではなく、同じインスタンスを使用するようになります。
helpers
フォルダとauth0ManagementClient.js
ファイルを作成します。次に、以下のコードを追加します。
// helpers/auth0ManagementClient.js // 👇 new code const { ManagementClient } = require('auth0'); let management = null; function getManagementClient() { if (!management) { // Initialize an instance of the Management API Client management = new ManagementClient({ domain: process.env.AUTH0_MANAGEMENT_CLIENT_DOMAIN, clientId: process.env.AUTH0_MANAGEMENT_CLIENT_ID, clientSecret: process.env.AUTH0_MANAGEMENT_CLIENT_SECRET, }); } return management; } module.exports = getManagementClient; // 👆 new code
getManagementClient
関数が呼び出されるたびに、management
変数でManagementClient
の既存のインスタンスを確認し、必要に応じて新しいインスタンスを作成します。このモジュールが別のNode.jsファイルによって初めてrequire
されると、コード全体が実行され、エクスポートされたgetManagementClient
関数がキャッシュされ、後続のrequire()
呼び出しで返されます。
このモジュールを使用するには、routes
フォルダにあるindex.js
ファイルを開き、getManagementClient
関数をインポートします。
// routes/index.js //...existing code... var router = require('express').Router(); const { requiresAuth } = require('express-openid-connect'); // 👇 new code const getManagementClient = require('../helpers/auth0ManagementClient'); // 👆 new code //...existing code...
このモジュールは、本記事の後半で使用します。
顧客の管理者がSSO接続をセットアップするためのチケットを生成する
顧客の管理者が「Create」ボタンをクリックすると、アプリケーションはPOSTリクエストを作成します。これを処理するために、次のコードスニペットを追加します。
// routes/index.js //...existing code... router.get('/dashboard', requiresAuth() ,async function (req, res, next) { //...existing code.. }); // 👇 new code router.post('/dashboard', requiresAuth() , async function (req, res, next) { // get an instance of the ManagementClient const management = getManagementClient(); // Get a list of Self Service Profiles const ssProfilesResponse = await management.selfServiceProfiles.getAll(); // Use the first profile const ssoProfile = ssProfilesResponse.data[0]; // build options to generate a ticket for connection creation const requestParameters = { id: ssoProfile.id }; // Generate connection name and set current Auth0 application as an enabled client let bodyParameters = { connection_config: { name: `self-service-sso-${Date.now()}` }, enabled_clients: [process.env.CLIENT_ID] }; // generate a self sertvice sso ticket let ssoTicket = await management.selfServiceProfiles.createSsoTicket( requestParameters, bodyParameters ); res.render('dashboard', { title: 'Admin Dashboard', ticketURL: ssoTicket.data.ticket }); }); // 👆 new code //...existing code.. module.exports = router;
コードの詳細を見ていきましょう。
Management Clientのインスタンスを取得する
最初のステップでは、Auth0テナントのManagement APIへのアクセスを提供する管理クライアントのインスタンスを取得します。実装したヘルパークラスを使用してインスタンスを取得できます。
//...existing code.. // get an instance of the ManagementClient const management = getManagementClient(); //...existing code..
Self-Service Profileを取得する
チケットを生成するには、Self-Service Profileを指定する必要があります。次のコードスニペットは、テナントで利用可能なすべてのプロファイルを取得します。サンプルアプリを簡素化するため、本記事ではリストの最初のプロファイルを使用します。
// Get a list of Self-Service Profiles with current const ssProfilesResponse = await management.selfServiceProfiles.getAll(); // Use the 1st profile in this sample const ssoProfile = ssProfilesResponse.data[0]; //...existing code..
management.selfServiceProfiles.getAll()
メソッドは、テナントで利用可能なすべてのセルフサービスプロファイルをロードします。
チケットを生成するためのパラメータを構築する
management.selfServiceProfiles.createSsoTicket()
メソッドは、セルフサービスSSOチケットを生成するためのものです。このメソッドにはrequestParameters
とbodyParameters
が必要です。
まず、requestParameters
を見てみましょう。
//...existing code.. // build options to generate a ticket for connection creation const requestParameters = { id: ssoProfile.id }; //...existing code..
requestParameters
では、セルフサービスプロファイルのIDをid
として設定します。
次に、bodyParameters
でチケットのオプションを指定できます。
//...existing code.. // Generate connection name automatically and set current Auth0 application as an enabled client const bodyParameters = { connection_config: { name: `self-service-sso-${Date.now()}` }, enabled_clients: [process.env.CLIENT_ID] }; //...existing code..
新しい接続フローのチケットを生成する場合、connection_config
でname
を指定する必要があります。または、body
パラメータでconnection_id
を指定して既存の接続を更新できます。本記事では、self-service-sso-${Date.now()}
というスニペットで名前を生成し、新しい接続を作成します。
また、作成時にクライアントまたは組織の接続を有効にする場合は、enabled_clients
またはenabled_organizations
プロパティを設定できます。本記事では、enabled_clients: [process.env.CLIENT_ID]
と設定することで、現在のAuth0アプリケーションをクライアントとして指定します。
Management API経由でチケットを生成する
requestParameters
とbodyParameters
を構築した後、management.selfServiceProfiles.createSsoTicket()
メソッドを呼び出してチケットを生成します。
//...existing code.. // generate a self sertvice sso ticket const ssoTicket = await management.selfServiceProfiles.createSsoTicket( requestParameters, bodyParameters ) res.render('dashboard', { title: 'Admin Dashboard', ticketURL: ssoTicket.data.ticket }); //...existing code..
動作を確認
Add SSO Connection
ボタンをクリックすると、生成されたチケットのURLを開く別のボタンがある次のページが表示されます。
ボタンをクリックすると、ブラウザはSSO設定アシスタントページを含む新しいタブを開きます。
前のセクションで試したように、指示に従ってSSO接続のセットアップを続行できます。
これで、アプリケーション用にSelf-Service SSOチケットを生成する機能が実装できました。
まとめ
本記事では以下の方法を学びました。
- Auth0 Management DashboardでセルフサービスSSOプロファイルを作成し、チケットを生成する方法
- 既存のセルフサービスSSOプロファイルを取得し、アプリケーションからSelf-Service SSOフローを開始するためのセルフサービスチケットを生成する方法
今回は始まりに過ぎません。この強力な機能を使用すると、アプリケーションからSelf-Serviceプロファイルの作成や更新、Self-Service SSO設定ページのカスタマイズし、Auth0 Organization機能との統合など多くのことが可能になります。今後の記事でさらに詳しく説明します。
SaaStart: Next.js B2B SaaSリファレンスアプリケーション
Auth0は、B2B SaaSアプリケーションを構築するための機能を提供します。本記事では、その機能の1つを紹介するためにNode.js/Expressを使用しました。Next.jsでB2B SaaSの構築を検討している場合は、SaaStartを試してください。このアプリは、マルチテナンシー、エンタープライズユーザー向けのログインオプション、セキュリティポリシーなど、B2B SaaSに必要な機能のリファレンス実装を提供します。
About the author

Daizen Ikahara
Principal Developer Advocate
.NETエンジニアとしてキャリアをスタートさせた後、UIコンポーネントベンダーやクラウドコミュニケーションプラットフォームベンダーにおいて様々なロールを歴任。2023年3月よりOktaに参画し、日本市場における開発者リレーションを担当。趣味はゲームと長距離散歩。
Daizen Ikehara joined the Developer Relations team in March 2023 as a Principal Developer Advocate. In the early stages of his professional career, Daizen started using C#. Then, he touched on various JavaScript technologies/frameworks—Angular, React, and Vue. Recently, he’s been using Node.js/JavaScript more often. He is passionate about talking with developers. Outside of work, Daizen likes to take long walks, play video games, and watch Formula 1 racing.