Skip to main content

製品 Teams 統合ガイド

本ドキュメントは、ユーザーが SERVICEME NEXT 製品を Microsoft Teams アプリに統合し、Teams 環境下での統一アクセスと協調利用を実現するためのガイドです。

前提条件​

セキュリティおよびコンプライアンスの観点から、SERVICEME NEXT は Teams アプリ統合時にログイン方式を区別する必要があります：

  • ログインページの Azure Entra ID（AAD）シングルサインオン；
  • Teams 統合ログイン。

上記の2つのログインは 異なる Azure Entra アプリ（App Registration） を使用する必要があります。

統合前に、製品の 環境変数（env）管理ページ で Teams 関連情報の設定が完了していることを確認してください。

設定説明​

1. SSO_LOGIN_CONFIG に Teams 設定情報を追加​

Teams 設定情報は manifest.json ファイル内の webApplicationInfo の内容と一致させる必要があります。

[
  {
    "code": "azure",
    "type": "Azure",
    "config": {
      "AZURE_AD_APP_ID": "api://35a1057c-69a3-4042-a0fa-xxxxxxxxxxxx",
      "AZURE_AD_TENANTID": "9ea41729-4be8-4b02-a8d3-xxxxxxxxxxxx",
      "AZURE_AD_SCOPE": "api://35a1057c-69a3-4042-a0fa-xxxxxxxxxxxx/default",
      "AZURE_CLIENT_ID": "35a1057c-69a3-4042-a0fa-xxxxxxxxxxxx"
    }
  },
  {
    "code": "teams",
    "type": "Azure",
    "hide": true,
    "config": {
      "AZURE_AD_APP_ID": "api://xxxx.serviceme.com/312732ff-fad9-47e7-b247-xxxxxxxxxxxx",
      "AZURE_AD_TENANTID": "9ea41729-4be8-4b02-a8d3-xxxxxxxxxxxx",
      "AZURE_AD_SCOPE": "api://xxxx.serviceme.com/312732ff-fad9-47e7-b247-xxxxxxxxxxxx/default",
      "AZURE_CLIENT_ID": "312732ff-fad9-47e7-b247-xxxxxxxxxxxx"
    }
  }
]

2. SSO_LOGIN_SECRET にログイン処理設定を追加​

[
  {
    "code": "azure",
    "handler": "serviceme.foundation.services.auth.sso.azure.AzureUserInfoProvider"
  },
  {
    "code": "teams",
    "handler": "serviceme.foundation.services.auth.sso.azure.AzureUserInfoProvider"
  }
]

Teams アプリ統合概要​

Teams 統合の本質は、アプリの定義ファイル（manifest.json および関連リソース）を ZIP ファイル にパッケージ化し、Teams プラットフォームにアップロードすることです。

Teams 公式参考ドキュメント：App manifest schema。

manifest.json 設定説明​

1. staticTabs.contentUrl と validDomains（必須）​

この設定は Teams 内蔵ページの URL とアクセス許可ドメインを定義します。顧客の展開環境に応じて置き換えてください。

"staticTabs": [
  {
    "entityId": "entry",
    "name": "SERVICEME",
    "contentUrl": "https://顧客展開パス/login-teams-redirect",
    "scopes": ["personal"]
  }
],
"validDomains": [
  "顧客展開ドメイン"
]

例えば、展開パスが https://customer.domain.com/next/ の場合、以下のように設定します：

  • contentUrl: https://customer.domain.com/next/login-teams-redirect
  • validDomains: customer.domain.com

2. webApplicationInfo（必須）​

これは Teams のシングルサインオン（SSO）設定に使用されます。
id と resource は Azure Entra アプリの Client ID と アプリケーション ID URI に対応する必要があります。

"webApplicationInfo": {
  "id": "312732ff-fad9-47e7-b247-xxxxxxxxxxxx",
  "resource": "api://dev.next.serviceme.com/312732ff-fad9-47e7-b247-xxxxxxxxxxxx"
}

設定要件：

  • アプリケーション ID URL に製品展開ドメインを含めること；
  • 「承認されたクライアントアプリケーション」に以下の2つの ID を追加すること：
    • 5e3ce6c0-2b1f-4285-8d4b-75ee78787346
    • 1fec8e78-bce4-4aaf-ab1b-5451cc387264

関連参考：

3. name（任意）​

"name": {
  "short": "SERVICEME",
  "full": "SERVICEME NEXT for Teams"
}

4. icons（任意）​

"icons": {
  "outline": "icon-outline.png",
  "color": "icon-color.png"
}

顧客ブランドのアイコンをカスタマイズする場合は、該当の画像ファイルを差し替えてください。

5. developer（任意）​

"developer": {
  "name": "Medalsoft (SoftwareOne subsidiary)",
  "mpnId": "14659343",
  "websiteUrl": "https://www.medalsoft.com/",
  "privacyUrl": "https://www.serviceme.com/",
  "termsOfUseUrl": "https://www.serviceme.com/"
}

顧客は企業情報に応じて開発者名および関連リンクを変更可能です。

6. localizationInfo（任意）​

多言語対応が必要な場合、localizationInfo フィールドで言語パックファイルを指定できます。

"localizationInfo": {
  "defaultLanguageTag": "en",
  "additionalLanguages": [
    { "languageTag": "en", "file": "locale-en.json" },
    { "languageTag": "zh-cn", "file": "locale-zh-cn.json" },
    { "languageTag": "ja-jp", "file": "locale-ja-jp.json" }
  ]
}

Teams へのアプリアップロード​

Teams で カスタムアプリのアップロード または 組織へのアプリ提出 を選択します：

  • カスタムアプリのアップロード：個人のみ閲覧可能で、テストやデバッグに適しています；
  • 組織へのアプリ提出：管理者の承認が必要で、承認後は「組織専用」セクションでアクセス可能です。

テストは Teams Web 版 で行うことを推奨します。ブラウザのコンソール（F12）でログ情報を確認できます。

よくある質問（Q&A）​

問題：統合後に「ページ拒否サービス（Refused to frame）」エラーが発生する​

原因：セキュリティ確保のため、製品はデフォルトで外部サイトからのページ埋め込みを禁止しています。

解決方法：フロントエンドミラー起動時の Docker 環境変数に以下を設定してください：

キー名：

SML_CONTENT_SECURITY_POLICY

キー値：

default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; connect-src 'self' https://*.microsoftonline.com ws: wss: blob:; media-src 'self' blob:; object-src 'none'; child-src 'self'; frame-ancestors 'self' https://teams.microsoft.com;

ここで：

  • frame-ancestors 'self' https://teams.microsoft.com は Teams ページからの製品埋め込みを許可することを意味します。

参考ドキュメント：