次の方法で共有

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

  • [アーティクル]

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

コードを構成する

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

webApplicationInfo プロパティ

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

   アプリ マニフェストの構成を示すスクリーンショット。

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

要素 説明
id Microsoft Entra ID で作成したアプリ ID (GUID) を入力します。
resource スコープの作成時に Microsoft Entra ID で作成したアプリのサブドメイン URI とアプリケーション ID URI を入力します。 Microsoft Entra ID>Expose an API セクションからコピーできます。

注:

webApplicationInfo プロパティを実装するには、アプリ マニフェスト バージョン 1.5 以降を使用します。

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

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

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

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

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

    注:

  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"
  }
}

注:

デバッグ中に、ngrok を使用して Microsoft Entra ID でアプリをテストできます。 その場合は、 api://subdomain.example.com/00000000-0000-0000-0000-000000000000 のサブドメインを ngrok URL に置き換える必要があります。 ngrok サブドメインが変更されるたびに、URL を更新する必要があります。 たとえば、api://23c3-103-50-148-128.ngrok.io/bccfbe67-e08b-4ec1-a7fd-e0aaf41a097c。

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

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

SSO アプリ

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

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

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

  2. Teams を開きます。

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

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

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

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

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

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

    必要な追加のアクセス許可について通知する [Teams] のダイアログ ボックス

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

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

    Microsoft Entra の同意ダイアログ

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

    SSO が有効になっている Teams タブ アプリの例

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

関連項目