サービス統合説明

本ドキュメントでは、SERVICEME NEXT アプリケーションを他のWebサイトまたは SSO（シングルサインオン）サービス と統合し、システム間での統一認証とシームレスなアクセスを実現する方法を説明します。

1. 基本フロー

サービス統合の全体フローは以下のとおりです。

SERVICEME NEXT のログインページにログインボタンを設定（任意）
- 製品のログインページにシングルサインオンの入口を表示するために使用します。
カスタム SSO フロントエンドページへ遷移
- 顧客システムとのログインロジック（ユーザー情報の取得、生体認証の起動など）を処理します。
カスタム SSO バックエンドインターフェースへアクセス
- 統一ユーザー登録、Token の発行など、SERVICEME バックエンドとのやり取りを完了します。
SERVICEME NEXT のログインページへリダイレクト
- Token を付与して SERVICEME NEXT に戻り、自動ログインを実現します。

フロー図イメージ：

2. 具体的な操作説明

2.1 ログインページのシングルサインオンボタン設定

この手順は 任意項目 です。ログインページに「カスタムログイン」ボタンを提供したい場合は、環境変数に設定を追加できます。

SERVICEME NEXT 環境変数管理 ページに入り、SSO_LOGIN_CONFIG に以下の内容を設定します。

{
  "type": "Custom",
  "code": "my-custom-sso",
  "config": {
    "LOGIN_BUTTON_I18N_KEY": "login.sso.custom.login",
    "LOGIN_URL": "/custom-login",
    "APP_ID": "BskGfSXPNt5AfQXMO6b1M"
  }
}

設定完了後、ログインページにボタンが表示され、クリックすると対象リンクへ遷移します。

https://<frontend-deploy-host>/custom-login?code=my-custom-sso&APP_ID=BskGfSXPNt5AfQXMO6b1M

マウントページをカスタマイズする必要がある場合は、製品フロントエンドのカスタムマウント静的リソースガイド - Overview を参照してください。

2.2 カスタム開発によるシングルサインオンページ

LOGIN_URL に対応するページがカスタマイズされたログインページです。このページでは以下のロジックを実装する必要があります。

顧客の SSO システムと認証連携を行う；
カスタム SSO バックエンドと情報同期を行う；
Token を取得後、SERVICEME NEXT のログインルートへリダイレクトする。

リダイレクト形式は以下のとおりです。

https://<frontend-deploy-host>/login-token?token=<new-jwt-token>

SERVICEME フロントエンドはこの Token の信頼性を検証し、通過後にシステムへログインできます。
JWT Token が有効な Token であり、正当な Client によって発行されていることを確認してください。

2.3 カスタム開発による SSO バックエンド

カスタム SSO バックエンドは主にユーザー Token の発行とアカウント管理を担当します。
発行には Client ID + Secret が必要なため、まず SERVICEME 管理画面で Client を作成してください。

関連インターフェースは以下を含みます。

ユーザーインターフェース：ユーザーの検索、作成、更新。ユーザー名、メールアドレス、社員番号での検索をサポート；
サードパーティログインインターフェース：サードパーティアカウントの紐付けを管理；
Client インターフェース：Token を発行（信頼済みドメインフィールドは無視）；
ロール/組織インターフェース：ロールおよび部門の同期に使用。

2.4 カスタム開発したフロントエンド/バックエンドサービスのマウント

SERVICEME NEXT フロントエンドイメージは 2 つのマウントポイントを提供しています。

挂载路径	説明
`/etc/nginx/custom_conf`	カスタム Nginx 設定をマウント
`/usr/share/nginx/static`	カスタム静的リソース（フロントエンドページ）をマウント

2.4.1 カスタムフロントエンドページのマウント

カスタム HTML ページを以下に配置します。

/usr/share/nginx/static/app2/

そして、custom.conf に以下の内容を追加します。

location /app2 {
  root /usr/share/nginx/static/;
  index index.html index.htm index.shtml;
  try_files $uri $uri/ /index.html;

  if ($request_filename ~* .*\.html$) {
    add_header Cache-Control "no-cache, no-store";
  }
}

コンテナ実行時にディレクトリをマウントします。

docker run -p 80:80 \
-v ./custom.conf:/etc/nginx/custom_conf/custom.conf \
-v ./static:/usr/share/nginx/static \
servicemerelease.azurecr.io/serviceme-frontend:4.0.0

2.4.2 カスタムバックエンドサービスのマウント

カスタムバックエンドサービスが内部ネットワークアドレス http://delivery-backend にあると仮定し、
フロントエンドの /custom-backend/ パス配下でアクセスしたい場合は、custom.conf に以下の設定を追加できます。

location /custom-backend/ {
  proxy_pass http://delivery-backend/;
  proxy_connect_timeout 240s;
  proxy_read_timeout 240s;
  proxy_send_timeout 240s;
  proxy_buffering off;
}

結び

以上の手順により、SERVICEME NEXT と企業内部システムとのシームレスな統合を実現でき、
シングルサインオン（SSO）、ユーザー統一認証、および柔軟なフロントエンド/バックエンドのカスタム拡張をサポートします。

1. 基本フロー​

2. 具体的な操作説明​

2.1 ログインページのシングルサインオンボタン設定​

2.2 カスタム開発によるシングルサインオンページ​

2.3 カスタム開発による SSO バックエンド​

2.4 カスタム開発したフロントエンド/バックエンドサービスのマウント​

2.4.1 カスタムフロントエンドページのマウント​

2.4.2 カスタムバックエンドサービスのマウント​

結び​