Unlock Enterprise Readiness: How to Add Self-Service SSO to Your SaaS App

Unlock Enterprise Readiness: How to Add Self-Service SSO to Your SaaS App の翻訳です。

以前の ブログ記事 でも触れたとおり、SaaS アプリケーションが個人ユーザー向けからエンタープライズ組織向けへとスケールしていくにつれ、ビジネス顧客のセキュリティ基準に対応することが不可欠になります。Auth0 Enterprise Connections を使うと、外部のフェデレーション IdP（Identity Provider）とシームレスに連携でき、エンタープライズのアイデンティティ要件・セキュリティ要件を満たせます。ただし強力である一方で、通常は Auth0 テナントの Admin / Editor が各接続を個別に設定する必要があるか、あるいは顧客側管理者へ作業を委譲するために SaaS アプリ内でカスタム開発が必要になります。

Self-Service Single Sign-On (SSO) により、B2B SaaS の顧客は、これまでよりも簡単かつ迅速にセルフサービス機能を有効化できます。

セルフサービス SSO は、次のコンポーネントを使ってセットアップ作業を顧客へ委譲します。

1. セルフサービスプロファイル（Self-service profile）：顧客の SSO 実装における重要要素を定義します。例えば、SSO に利用できる IdP の種類、メールなど必須で取得すべきユーザー属性など。
2. セルフサービスアクセステケット（Self-service access ticket）：マジック URL として提供されるチケットで、顧客管理者が SSO セットアップアシスタントへアクセスできるようにし、作成される SSO 連携に対する具体的な詳細も指定します。顧客管理者は新規接続の作成も、既存接続の編集も可能です。
3. SSO セットアップアシスタント（SSO setup assistant）：顧客管理者を SSO セットアップ手順へ誘導します。

このブログでは、機能のセットアップをステップバイステップで紹介します。

Management Dashboard で Self-Service SSO 機能を設定する

まずは Auth0 Management Dashboard 上でこの機能を設定し、どのように動作するか理解しましょう。

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

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

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

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

プロファイルの Name と（任意で）Description を入力します。

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

任意でブランディングも設定でき、カスタマイズされた体験を提供できます。本記事ではデフォルト設定のままにします。

アプリケーション側で特定の属性が必要な場合は、User Profile タブで追加できます。顧客管理者は、これらの属性を IdP 側の属性として追加する必要があります。属性は email、department、title などです。

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

エンドユーザー管理者が 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 をブラウザで開きます。

IdP 選択画面で Google Workspace を選び、Next を押します。

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

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

Step 2 で Google Workspace Domain、Client ID、Client secret を入力して接続を構成します。

Step 3 では、Google Admin Console でユーザーやグループに Auth0 へのアクセス権を付与する手順がページ内に示されます。

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

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

Auth0 側で接続をテストする

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

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

正しく構成できていれば、Google Workspace アカウントのログイン画面が表示されます。

これで、Self-Service SSO フローを使って SSO 接続を構成できました。

次のセクションでは、アプリケーション内でチケットを生成します。

Node.js アプリケーションでチケットを生成する

ここでは、先ほど Dashboard 上で作成したプロファイルを使い、アプリケーション側でチケットを生成する機能を実装します。これにより顧客管理者が自分でチケットを生成できるようになります。

このセクションの手順を追うための出発点として、サンプルの Node.js/Express アプリケーションをダウンロードできます。

git clone --branch initial --single-branch https://github.com/neri78/self-service-sso-express.git

付属の README の手順に従って、アプリケーションの登録と設定を行ってください。

サンプルアプリでは、ユーザーとしてサインアップしてログインした後、ヘッダーナビゲーションの Dashboard をクリックしてダッシュボードページを開きます。次の画面が表示されますが、この時点では Add SSO Connection ボタンはまだ動きません。

以降のセクションで行うことは次のとおりです。

• アプリケーションに Management API へのアクセス権を付与する
• 顧客管理者が SSO 接続をセットアップできるようにチケットを生成する

アプリケーションに Management API へのアクセスを付与する

アプリケーションからセルフサービス SSO 操作を行うために、Auth0 テナント内で Auth0 Management API へアクセスできる新しいアプリケーションを登録します。

まず、Auth0 Dashboard にアクセスし、次の画像のように Machine-to-Machine アプリケーションを新規登録します。

アプリケーションを登録したら、domain、client ID、client secret を控えておきます。

次に、このアプリケーションに対して Auth0 Management API を選択し、認可します。

API を操作するための権限（permissions）を選択する必要があります。本記事では、既存の self-service SSO プロファイルとクライアントを取得し、チケットを生成したいので、次の権限を付与します。

• read:self_service_profiles
• read:clients
• create:sso_access_tickets

原則として、テナント上で実行したい操作に 厳密に必要な権限だけ を付与してください。

権限を有効にしたら 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 を呼び出す必要があります。Management API は、コードで Auth0 テナントを設定できる API です。ここでは、Auth0 Management API とのやり取りを簡単にするために、Node.js client library を利用します。このライブラリは、すべての管理操作を扱える Management API Client を提供します。

次のコマンドでライブラリをインストールします。

npm install auth0

次に、ManagementClient のインスタンスを生成するヘルパーモジュールを作成し、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 を指定する必要があります。次のコードは、テナント内で利用可能なプロファイルをすべて取得します。サンプルアプリを簡単にするため、このブログでは一覧の先頭（1件目）のプロファイルを使います。

// 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() メソッドは、テナント内で利用可能な self-service profiles をすべて読み込みます。

チケット生成のパラメータを組み立てる

management.selfServiceProfiles.createSsoTicket() メソッドは Self-Service SSO チケットを生成します。このメソッドには requestParameters と bodyParameters が必要です。

まず requestParameters を見てみます。

//...existing code..

// build options to generate a ticket for connection creation
const requestParameters = {
    id: ssoProfile.id
};
//...existing code..

requestParameters には、self-service profile の 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 parameter に connection_id を指定できます。本記事では新規接続を作るため、self-service-sso-${Date.now()} のスニペットで名前を生成します。

また、作成時に接続をクライアントや Organization に対して有効化したい場合は、enabled_clients または enabled_organizations を設定できます。このブログでは、現在の Auth0 アプリケーションをクライアントとして指定するために enabled_clients: [process.env.CLIENT_ID] を設定しています。

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 で self-service SSO プロファイルを作成し、チケットを生成する方法
• アプリケーションから既存の self-service SSO プロファイルを取得し、self-service チケットを生成して Self-Service SSO フローを開始する方法

このブログは始まりにすぎません。この強力な機能により、アプリケーションから Self-Service profile を作成したり、既存プロファイルを更新したり、Self-Service SSO の導入ページをカスタマイズしたり、Auth0 Organization 機能と統合したり、さらに多くのことが可能になります。今後の記事では、このエキサイティングな新機能をさらに掘り下げていきます。

SaaStart で試す：Next.js 向け B2B SaaS リファレンスアプリ

Auth0 は B2B SaaS アプリケーション構築のための機能を提供しています。本記事では Node.js/Express を使ってその機能の一つを紹介しました。Next.js で B2B SaaS を作ろうとしている方は、SaaStart を試してみてください。このアプリは、マルチテナンシー、エンタープライズユーザー向けログインオプション、セキュリティポリシーなど、B2B SaaS に必要な機能のリファレンス実装を提供します。

• SaaStart App
• GitHub