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 ページから製品の埋め込みを許可する設定です。

参考ドキュメント：