--- title: "エンタープライズ対応を実現: SaaSアプリで既存のSSOコネクションをセルフサービスで編集する方法" description: "本記事では、SaaSアプリケーションに登録済みのセルフサービスSSO設定を編集する機能を追加します。" authors: - name: "Daizen Ikehara" url: "https://auth0.com/blog/authors/daizen-ikehara/" date: "Aug 7, 2025" category: "Developers,Tutorial,Nodejs" tags: ["b2b", "saas", "sso", "self-service", "management api"] url: "https://auth0.com/blog/jp-how-to-edit-existing-connections-with-self-service-sso-in-your-saas-app/" --- # エンタープライズ対応を実現: SaaSアプリで既存のSSOコネクションをセルフサービスで編集する方法 > 本記事は 2025年7月8日に公開された「[Unlock Enterprise Readiness: How to Edit Existing Connections with Self-Service SSO in your SaaS App](https://auth0.com/blog/how-to-edit-existing-connections-with-self-service-sso-in-your-saas-app/)」を機械翻訳した記事です。 以前の記事では、[SSOコネクションを作成するセルフサービス機能](https://auth0.com/blog/jp-how-to-add-self-service-sso-to-your-nodejs-saas-app/)をWebアプリケーションに追加しました。 これは管理タスクを顧客の管理者に委任できる強力な機能です。しかし、SaaSでは既存SSO設定の編集もサポートする必要があります。 ## SSOコネクションの編集機能は必須 なぜ編集機能が不可欠なのかを説明します。SSOコネクションを作成した後、顧客の管理者はクライアントシークレットや、コネクションのSAML証明書の更新が必要になる場合があります。このようなシナリオでは、顧客の管理者は依然としてSaaSのサポートや担当者に連絡する必要があります。 真の「セルフサービス」管理を提供するために、Auth0の[セルフサービスSSO](https://auth0.com/docs/ja-jp/authenticate/enterprise-connections/self-service-SSO)機能を引き続き活用できます。詳細を見ていきましょう。 ## サンプルアプリ 本ブログ記事では、以前に構築したサンプルアプリケーションを出発点として使用します。 サンプルのNode.js/Expressアプリケーションは、以下からダウンロードできます。 ```bash git clone --branch feature/self-service-sso-create --single-branch https://github.com/neri78/self-service-sso-express.git ``` > 注: サンプルコードは、コードをシンプルにするためにエラーハンドリングを省略しています。実際の開発ではエラーハンドリングを正しく実装する必要があります。 READMEファイルの手順に従って、Regular Web ApplicationとMachine-to-Machine (M2M) Applicationを登録および設定してください。 サンプルアプリではユーザーがログインした後にヘッダーナビゲーションのDashboardをクリックするとダッシュボードが開きます。ダッシュボードに移動すると、次のページが表示されます。現在、ダッシュボードには新しいSSOコネクションを作成するためのボタンがあります。 ![Admin dashboard for the self-service SSO application, showing only the 'Add SSO Connection' button before changes.](https://images.ctfassets.net/23aumh6u8s0i/1aT1P96Mvj5ZyZedvOalfQ/596ff65b8017d157e2732abd07f2bbb3/sso-dashboard-start.png) ## SSOコネクションのセルフサービス編集 ここから編集機能を追加するために、以下の手順を実行します。 1. ダッシュボードページのUIを更新 2. 既存のコネクションを取得するためにManagement APIの権限を追加 3. セルフサービスSSO編集を作成するためにルーターハンドラーを更新 ### ダッシュボードページのUIを更新 まず`views/dashboard.ejs`ファイルに編集ボタンを追加します。 ```html

or

``` これでダッシュボードに2つのボタンが表示されます。各ボタンには`value`属性があり、ルーターハンドラーでロジックを分岐させるために使用します。 ![Updated admin dashboard for self-service SSO, now with both 'Add SSO Connection' and 'Edit SSO Connection' buttons.](https://images.ctfassets.net/23aumh6u8s0i/5HvXR2dwCAvggLI5qZlPRE/342a95bcd2fa4e0e3968b9a1062ced5f/Self_Service_SSO_-_dashboard_-_edit.png) ### 既存コネクションを取得するためのManagement APIパーミッションを追加 既存のコネクションを編集するには、[Auth0 Management API](https://auth0.com/docs/ja-jp/api/management/v2)を使用して既存のコネクションを取得する必要があります。そのために、Machine-to-Machine (M2M)アプリケーションに次の権限を付与します。 - `read:connections` ![Auth0 Management API permissions screen, with the 'read:connections' permission selected to retrieve existing connections.](https://images.ctfassets.net/23aumh6u8s0i/2yDvfX80n1XdrX6RElU5am/8f43c9c42546add6b8c6a3458ff6f82c/Management_API_-_read_-_connections_permission.png) ## セルフサービスSSO編集を作成するためのルーターハンドラーの更新 アプリケーションの`router/index.js`ファイルには、`/dashboard`に対するPOSTハンドラーがあります。このハンドラーは、コネクションを作成するためのセルフサービスSSOチケットを作成します。編集にもこのハンドラーを使用します。 ### ロジックの分岐 ハンドラーを更新してボタンのvalue属性に基づいてロジックを分岐します。 ```javascript // routes/index.js // ...existing 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 { data: ssoProfiles } = await management.selfServiceProfiles.getAll(); // use the 1st profile in this sample. const ssoProfile = ssoProfiles[0]; const requestParameters = { id: ssoProfile.id }; // 👇 change code let bodyParameters = {}; const action = req.body.action; if (action === 'create') { // build bodyParameter for 'create a connection'. bodyParameters = { ...bodyParameters, connection_config: { name: `self-service-sso-${Date.now()}` }, enabled_clients: [process.env.CLIENT_ID] } } else if (action === 'edit') { // build bodyParameter for 'edit a connection'. } // 👆 change code // generate a Self-Service SSO ticket. const { data: ssoTicket } = await management.selfServiceProfiles.createSsoTicket( requestParameters, bodyParameters ); res.render('dashboard', { title: 'Admin Dashboard', ticketURL: ssoTicket.ticket }); }); // ...existing code... ``` この変更により、新しいコネクションを作成するための既存のロジックを維持できます。 ### 既存コネクションを編集するためのbodyParameterの構築 セルフサービスSSOで既存のコネクションを編集するには、`bodyParameters`に`connection_id`を指定します。更新されたコードは次のとおりです。 ```javascript // routes/index.js //...existing 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 { data: ssoProfiles } = await management.selfServiceProfiles.getAll(); // use the 1st profile in this sample. const ssoProfile = ssoProfiles[0]; const requestParameters = { id: ssoProfile.id }; let bodyParameters = {}; const action = req.body.action; if (action === 'create') { // build bodyParameter for 'create a connection'. bodyParameters = { ...bodyParameters, connection_config: { name: `self-service-sso-${Date.now()}` }, enabled_clients: [process.env.CLIENT_ID] } } else if (action === 'edit') { // build bodyParameter for 'edit a connection'. // 👇 add code // get connections for the current client const { data: enabledConnections } = await management.clients.getEnabledConnections({ client_id: process.env.CLIENT_ID }); // filter a connection with the name and use the first item for this sample. const ssoConnection = enabledConnections.connections.filter(connection => { return connection.name.includes('self-service-sso-') })[0]; // add connection_id to the bodyParameter. bodyParameters = { ...bodyParameters, connection_id: ssoConnection.id }; // 👆 add code } // generate a Self-Service SSO ticket. const { data: ssoTicket } = await management.selfServiceProfiles.createSsoTicket( requestParameters, bodyParameters ); res.render('dashboard', { title: 'Admin Dashboard', ticketURL: ssoTicket.ticket }); }); // ...existing code... ``` コードの詳細を見ていきましょう。 ### 既存コネクションの取得 編集したいコネクションの`id`を取得する必要があります。[Get enabled connections for a client](https://auth0.com/docs/api/management/v2/clients/get-client-connections)エンドポイントを使用して、現在のAuth0 Applicationのコネクションリストを取得し、条件でリストをフィルターできます。 ```javascript // get connections for the current client const { data: enabledConnections } = await management.clients.getEnabledConnections({ client_id: process.env.CLIENT_ID }); // filter a connection with the name and use the first item for this sample. const ssoConnection = enabledConnections.connections.filter(connection => { return connection.name.includes('self-service-sso-') })[0]; ``` `management.clients.getEnabledConnections()`メソッドは、指定されたAuth0クライアント(アプリケーション)のコネクションのリストを取得します。前の記事で次の命名規則に従ってセルフサービスSSOコネクションを作成したため、リストに`filter`を適用できます。 - コネクションの名前に`self-service-sso-`が含まれている。 本記事では、条件に一致する最初のコネクションが適切であると仮定します。 > [Auth0 Organizations](https://auth0.com/docs/ja-jp/manage-users/organizations)を使用している場合は、代わりに[組織で有効になっているコネクションを取得する](https://auth0.com/docs/ja-jp/api/management/v2/organizations/get-enabled-connections)エンドポイントを使用できます。`auth0-node`もこのエンドポイントを[サポート](https://auth0.github.io/node-auth0/classes/management.OrganizationsManager.html#getEnabledConnections)しています。Machine-to-MachineアプリケーションがAuth0 Management APIアクセスのために`read:organization_connections`権限を持っていることを確認してください。別の記事では、セルフサービスSSOとAuth0 Organizationsの組み合わせについて説明します。 ### bodyParameterにconnection_idを設定 最後のステップは、bodyParameterに`connection_id`の値を設定します。 ```javascript // add connection_id to the bodyParameter. bodyParameters = { ...bodyParameters, connection_id: ssoConnection.id }; ``` これで既存のコネクションを編集するためのセルフサービスSSOチケットを作成する準備がすべて整いました。既存のコードを使用してチケットを生成します。 ```javascript // generate a Self-Service SSO ticket const ssoTicket = await management.selfServiceProfiles.createSsoTicket( requestParameters, bodyParameters ); ``` ## 動作の確認 ダッシュボードページで`Edit SSO Connection`ボタンをクリックすると、生成されたチケットのURLを開くボタンがある次のページが表示されます。 ![Application dashboard showing a 'Click here to Configure SSO' button, which appears after the self-service SSO ticket has been generated.](https://images.ctfassets.net/23aumh6u8s0i/7EiN9VIyZ49VfY5O9EqUIV/5062b95e568a4971e9ba13389858f4d6/Self_Service_SSO_-_continue.png) ボタンをクリックすると、ブラウザはSSOセットアップアシスタントページと現在のコネクション設定を含む新しいタブを開きます。顧客の管理者はここで設定を変更できます。 ![The Auth0 self-service SSO setup assistant, pre-filled with existing Google Workspace connection data for editing.](https://images.ctfassets.net/23aumh6u8s0i/6gc8xwfpP0rpVYFy1lVh61/c4b4c3b107973812ef761299672490a3/Edit_SSO_connection_-_Google.png) ## まとめ 本記事では以下の方法を学びました。 - 既存のコネクションに対してセルフサービスSSOチケットを生成するようにアプリケーションを更新する。 セルフサービスSSOの作成および編集機能により、SaaSで管理代行機能を提供できます。今後の記事では、セルフサービスプロファイルの詳細や、B2B SaaSシナリオでAuth0 Organizationsとこの機能を使用する方法について説明します。 ## SaaStartで試す: Next.js B2B SaaSリファレンスアプリケーション Auth0は、B2B SaaSアプリケーションを構築するための機能を提供します。本記事では、その機能の1つを紹介するためにNode.js/Expressを使用しました。Next.jsでB2B SaaSの構築を検討している場合は、[SaaStart](https://a0.to/saastart)を試してみてください。このアプリは、マルチテナンシー、エンタープライズユーザー向けのログインオプション、セキュリティポリシーなど、B2B SaaSに必要な機能のリファレンス実装を提供します。 [SaaStartアプリ](https://a0.to/saastart) [SaaStart GitHubリポジトリ](https://a0.to/saas-code)