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 に埋め込まれるページのアドレスと、アクセスを許可するドメインを定義します。顧客のデプロイ環境に応じて置き換えてください。

"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",
  "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 ページから製品を埋め込むことを許可することを示します。

参考ドキュメント：