SSO 用のアプリ マニフェストを更新しアプリをプレビューする

アプリ マニフェスト (以前は Teams アプリ マニフェスト) を更新する前に、タブ アプリ コードがシングル サインオン (SSO) を有効にするように構成されていることを確認します。

Microsoft Entra ID でタブ アプリを登録し、アプリ ID を取得しました。 また、アクセス トークンを呼び出して getAuthToken() 処理するようにコードを構成しました。 次に、アプリ マニフェストを更新して、タブ アプリの SSO を有効にする必要があります。 アプリ マニフェストでは、アプリを Teams に統合する方法について説明します。

webApplicationInfo プロパティ

アプリ マニフェスト ファイルで webApplicationInfo プロパティを構成します。 このプロパティがアプリの SSO を有効にして、アプリ ユーザーがタブ アプリにシームレスにアクセスできるようになります。

webApplicationInfo には 2 つの要素があります、id および resource。

Microsoft Entra ID に登録したアプリケーション ID URI は、公開した API のスコープで構成されます。 resourceでアプリのサブドメイン URI を構成して、getAuthToken()を使用する認証要求がアプリ マニフェストで指定されたドメインから送信されるようにします。

詳細については、「webApplicationInfo」を参照してください。

アプリ マニフェストを構成するには

1. タブ アプリ プロジェクトを開きます。

2. アプリ マニフェスト フォルダーを開きます。

   注:

   • アプリ マニフェスト フォルダーは、プロジェクトのルートにある必要があります。 詳細については、「Microsoft Teams アプリ パッケージを作成する」を参照してください。
   • manifest.jsonを作成する方法の詳細については、 アプリ マニフェスト スキーマに関するページを参照してください。

3. manifest.json ファイルを開く

4. 次のコード スニペットをアプリ マニフェスト ファイルに追加して、新しいプロパティを追加します。

   "webApplicationInfo":
   {
   "id": "{Microsoft Entra AppId}",
   "resource": "api://subdomain.example.com/{Microsoft Entra AppId}"
   }
   

   ここで、

   • {Microsoft Entra AppId} は、Microsoft Entra ID でアプリを登録したときに作成したアプリ ID です。 これは GUID です。
   • subdomain.example.com は、Microsoft Entra ID でスコープを作成するときに登録したアプリケーション ID URI です。

5. id プロパティで Microsoft Entra ID からアプリ ID を 更新します。

6. 次のプロパティでサブドメイン URL を更新します:

   1. contentUrl
   2. configurationUrl
   3. validDomains

7. アプリ マニフェスト ファイルを保存します。 詳細については、「アプリ マニフェスト」を参照してください。

{
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.11/MicrosoftTeams.schema.json",
  "manifestVersion": "1.11",
  "version": "1.0.0",
  "id": "bccfbe67-e08b-4ec1-a7fd-e0aaf41a097c",
  "developer": {
    "name": "Microsoft",
    "websiteUrl": "https://www.microsoft.com",
    "privacyUrl": "https://www.microsoft.com/privacy",
    "termsOfUseUrl": "https://www.microsoft.com/termsofuse"
  },
  "name": {
    "short": "Teams Auth SSO",
    "full": "Teams Auth SSO"
  },
  "description": {
    "short": "Teams Auth SSO app",
    "full": "The Teams Auth SSO app"
  },
  "icons": {
    "outline": "outline.png",
    "color": "color.png"
  },
  "accentColor": "#60A18E",
  "staticTabs": [
    {
      "entityId": "auth",
      "name": "Auth",
      "contentUrl": "https://contoso.com/Home/Index",
      "scopes": [ "personal" ]
    }
  ],
  "configurableTabs": [
    {
      "configurationUrl": "https://contoso.com/Home/Configure",
      "canUpdateConfiguration": true,
      "scopes": [
        "team"
      ]
    }
  ],
  "permissions": [ "identity", "messageTeamMembers" ],
  "validDomains": [
    "contoso.com"
  ],
  "webApplicationInfo": {
    "id": "bccfbe67-e08b-4ec1-a7fd-e0aaf41a097c",
    "resource": "api://contoso.com/bccfbe67-e08b-4ec1-a7fd-e0aaf41a097c"
  }
}

Teams でカスタム アプリとプレビューをアップロードする

Microsoft Entra ID、アプリ コード、アプリ マニフェスト ファイルで SSO を有効にするようにタブ アプリを構成しました。 Teams でカスタム タブ アプリをアップロードし、Teams 環境でプレビューできるようになりました。

Teams でタブ アプリをプレビューするには:

1. アプリ パッケージを作成します。

   アプリ パッケージは、アプリ マニフェストとアプリ アイコンを含む ZIP ファイルです。

2. Teams を開きます。

3. [アプリ]>[アプリの管理]>[アプリのアップロード] を選択します。

   アプリをアップロードするオプションが表示されます。

4. [ カスタム アプリのアップロード] を選択して、カスタム タブ アプリを Teams にアップロードします。

5. アプリ パッケージの ZIP ファイルを選択し、[追加] を選択します。

   カスタム タブ アプリがアップロードされ、必要になる可能性がある追加のアクセス許可がダイアログに表示されます。

6. [続行] を選択します。

   

   Microsoft Entra の同意ダイアログが表示されます。

7. Open-ID スコープに同意するには、[承諾する] を選択します。

   

   Teams によってタブ アプリが開き、それを使用できます。

   

   おめでとうございます! タブ アプリの SSO を有効にしました。

関連項目

• アプリ マニフェストのスキーマ
• アプリ マニフェスト スキーマ形式
• Microsoft Teams アプリ パッケージを作成する