developers

エンタープライズ対応を実現: SaaSアプリにセルフサービスSSOを追加する方法

本記事では、SaaSアプリケーションにセルフサービスSSO機能を追加する方法を紹介します。

本記事は 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は、以下のコンポーネントを使用して顧客にセットアップを委任します。

  1. セルフサービスプロファイル: SSOに使用するIDプロバイダーや、メールアドレスなどの取得が必要なユーザー属性など、顧客のSSO実装の主要な要素を定義します。

  2. セルフサービスアクセスチケット: マジックリンクとして提供されるこのチケットは、SSOセットアップアシスタントへのアクセス権を顧客の管理者に付与し、結果として得られるSSO統合の具体的な詳細を設定します。

  3. SSO設定アシスタント: SSOセットアッププロセスについて顧客の管理者をガイドします。

本記事では、この機能のセットアップ方法をステップバイステップで紹介します。

Management DashboardでSelf-Service SSO機能をセットアップする

まず、Auth0 Management Dashboardでこの機能をセットアップし、その仕組みを理解します。

セルフサービスプロファイルを作成する

Auth0 Management Dashboardで、ナビゲーションメニューからAuthentication - Enterpriseを選択します。

ナビゲーションメニューからエンタープライズ接続へ

エンタープライズ向けにサポートされている接続のリストが表示されます。一番下までスクロールすると、Self-Service SSOボックスがあります。これをクリックします。

Enterprise Connections - Self Service SSO

+ Create Profileを押して、新しいプロファイルを作成します。

Self-Service SSO - プロファイルの作成

プロファイルの名前と説明 (任意) を入力します。

Self-Service SSO - プロファイル情報

Settingsタブでは、プロファイルがサポートするIDプロバイダーを選択できます。

Self-Service SSO - 設定

オプションでブランディングを設定し、カスタマイズされたエクスペリエンスを提供できます。本記事では、デフォルト設定のままにします。

Self-Service SSO - ブランディング

アプリケーションが特定の属性を必要とする場合、User Profileタブで追加できます。顧客の管理者は、これらの属性をIDプロバイダーの属性に追加する必要があります。属性には、メール、部署、役職などがあります。

Self-Service SSO - 属性

これで、顧客の管理者向けにチケットを生成する準備ができました。

エンドユーザー管理者がSSOを設定するためのチケットを生成する

プロファイル画面で+ Generate Ticketをクリックすると、顧客の管理者がSSOを設定するためのチケットを生成できます。

次のページでは、新しい接続を作成するか、既存の接続を編集するためのチケットを設定できます。新しいチケットを作成するにはConnection Nameフィールドを指定する必要があります。接続フローを編集するには、代わりにConnection IDフィールドを指定する必要があります。SaaSのニーズに応じて、Enabled Clientsフィールドにクライアント (Auth0 Applications) を、Enabled organizationsフィールドにOrganizationsを入力できます。他のオプションも指定可能です。

SSOチケット

オプションを設定し、ページ下部のCreate Ticketをクリックしてチケットを生成します。チケットが生成されるとSSO接続のセットアップまたは編集用のURLを記載したポップアップウィンドウが表示されます。このURLを顧客の管理者に提供します。セキュリティ上の理由からURLは安全に保管し、許可された個人のみに共有してください。

生成されたチケット

顧客の管理者としてチケットを使用してSelf-Service SSOをセットアップする

このステップでは、テストとしてGoogle WorkspaceでSSOをセットアップします。生成されたチケットのURLをブラウザで開きます。

IDプロバイダー選択画面で、Google Workspaceを選択しNextを押します。

SSOチケット - IdPの選択

次のページには、Google Developer ConsoleでOIDCアプリケーションをセットアップするための手順が表示されます。指示に従ってOIDCアプリケーションを作成します。

SSOチケット - Google Workspaceアプリの作成

指示に従うと、Google Developer ConsoleにOAuthクライアントが作成されます。ポップアップに表示されるClient IDClient secretをコピーします。

Google Workspaceアプリ

ステップ2で、Google Workspace DomainClient IDClient secretを入力して接続を設定します。

ドメイン、クライアントID、クライアントシークレットの入力

ステップ3では、Google管理コンソールでユーザーまたはグループにAuth0へのアクセスを許可するための手順がページに表示されます。

ユーザーへの権限付与

すべてを設定したら、ステップ4でSSOをテストできます。

SSO接続のテスト

テストが成功すると、次の画面が表示されます。必ずDoneボタンをクリックして完了してください。

SSOテスト結果

Auth0で接続をテストする

顧客の管理者が接続を作成すると、Auth0 Management Dashboardで接続設定を確認できます。Authentication - Enterpriseを開き、Google Workspaceをクリックします。

接続がリストに表示されていることがわかります。Tryオプションをクリックして接続をテストできます。

エンタープライズ接続 - Google Workspace

すべてを適切に設定していれば、Google Workspaceアカウントのログイン画面が表示されます。

SSO - 動作確認

これで、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ボタンは機能していません。

SSOダッシュボード - 開始

以下のセクションでは、次のことを行います。

  • アプリケーションにAuth0 Management APIへのアクセスを提供する
  • 顧客管理者がSSO接続をセットアップするためのチケットを生成する

アプリケーションにAuth0 Management APIへのアクセスを提供する

顧客の管理者がSaaSアプリケーション上からAuth0テナントに対してSSO接続を追加するために、Auth0 Management APIへのアクセス権を持つ新しいアプリケーションをAuth0テナントに登録します。

最初のステップとして、Auth0ダッシュボードにアクセスし、次の画像に示すように新しいMachine-to-Machineアプリケーションを登録します。

Auth0 Dashboard - M2Mアプリ

アプリケーションを登録し、そのドメイン、クライアントID、およびクライアントシークレットをメモしておきます。

次に、アプリケーションが認可するAuth0 Management APIを選択します。

Auth0 Dashboard - 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_DOMAINYOUR_MANAGEMENT_CLIENT_IDYOUR_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チケットを生成するためのものです。このメソッドにはrequestParametersbodyParametersが必要です。

まず、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_confignameを指定する必要があります。または、bodyパラメータでconnection_idを指定して既存の接続を更新できます。本記事では、self-service-sso-${Date.now()}というスニペットで名前を生成し、新しい接続を作成します。

また、作成時にクライアントまたは組織の接続を有効にする場合は、enabled_clientsまたはenabled_organizationsプロパティを設定できます。本記事では、enabled_clients: [process.env.CLIENT_ID]と設定することで、現在のAuth0アプリケーションをクライアントとして指定します。

Management API経由でチケットを生成する

requestParametersbodyParametersを構築した後、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設定アシスタントページを含む新しいタブを開きます。

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に必要な機能のリファレンス実装を提供します。