Mettre à jour le manifeste d’application pour l’authentification unique et l’application en préversion

  • Article

Avant de mettre à jour le manifeste de l’application (précédemment appelé manifeste d’application Teams), vérifiez que le code de votre application onglet est configuré pour activer l’authentification unique (SSO).

Configurer le code

Vous avez inscrit votre application d’onglet dans Microsoft Entra ID et obtenu un ID d’application. Vous avez également configuré votre code pour appeler getAuthToken() et gérer le jeton d’accès. Maintenant, vous devez mettre à jour le manifeste de l’application pour activer l’authentification unique pour votre application d’onglet. Le manifeste de l’application décrit comment une application s’intègre à Teams.

webApplicationInfo, propriété

Configurez la webApplicationInfo propriété dans le fichier manifeste de l’application. Cette propriété permet à l’authentification unique pour votre application d’aider les utilisateurs de l’application à accéder à votre application onglet en toute transparence.

  Capture d’écran montrant la configuration du manifeste de l’application.

webApplicationInfo a deux éléments, id et resource.

Élément Description
id Entrez l’ID d’application (GUID) que vous avez créé dans Microsoft Entra ID.
ressource Entrez l’URI de sous-domaine de votre application et l’URI de l’ID d’application que vous avez créé dans Microsoft Entra ID lors de la création de l’étendue. Vous pouvez le copier à partir de la section Microsoft Entra ID>Exposer une API.

Remarque

Utilisez le manifeste d’application version 1.5 ou ultérieure pour implémenter la webApplicationInfo propriété .

L’URI de l’ID d’application que vous avez inscrit dans Microsoft Entra ID est configuré avec l’étendue de l’API que vous avez exposée. Configurez l’URI de sous-domaine de votre application dans resource pour vous assurer que la demande d’authentification à l’aide getAuthToken() de provient du domaine donné dans le manifeste de l’application.

Pour plus d'informations, voir webApplicationInfo ..

Pour configurer le manifeste de l’application

  1. Ouvrez le projet d’application d’onglet.

  2. Ouvrez le dossier manifeste de l’application.

    Remarque

  3. Ouvrir le manifest.json fichier

  4. Ajoutez l’extrait de code suivant au fichier manifeste de l’application pour ajouter la nouvelle propriété :

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

    où,

    • {Microsoft Entra AppId}est l’ID d’application que vous avez créé lors de l’inscription de votre application dans Microsoft Entra ID. C’est le GUID.
    • subdomain.example.comest l’URI d’ID d’application que vous avez inscrit lors de la création de l’étendue dans Microsoft Entra ID.

  5. Mettez à jour l’ID d’application à partir de Microsoft Entra ID dans la propriété id.

  6. Mettez à jour l’URL du sous-domaine dans les propriétés suivantes :

    1. contentUrl
    2. configurationUrl
    3. validDomains

  7. Enregistrez le fichier manifeste de l’application. Pour plus d'informations, voir app manifest


Voici un exemple de manifeste d’application mis à jour 
{
  "$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"
  }
}

Remarque

Pendant le débogage, vous pouvez utiliser ngrok pour tester votre application dans Microsoft Entra ID. Dans ce cas, vous devez remplacer le sous-domaine dans par api://subdomain.example.com/00000000-0000-0000-0000-000000000000 l’URL ngrok. Vous devez mettre à jour l’URL chaque fois que votre sous-domaine ngrok change. Par exemple, api://23c3-103-50-148-128.ngrok.io/bccfbe67-e08b-4ec1-a7fd-e0aaf41a097c.

Charger une application personnalisée et un aperçu dans Teams

Vous avez configuré l’application onglet pour activer l’authentification unique dans Microsoft Entra ID, dans le code de l’application et dans le fichier manifeste de l’application. Vous pouvez maintenant charger votre application d’onglet personnalisée dans Teams et la prévisualiser dans l’environnement Teams.

Application SSO

Pour afficher un aperçu de votre application onglet dans Teams :

  1. Créer un package d’application Teams

    Un package d’application est un fichier zip qui contient un manifeste d’application et des icônes d’application.

  2. Ouvrir Teams.

  3. Sélectionnez Applications>gérer vos applications>Charger une application.

    Les options de chargement d’une application s’affichent.

  4. Sélectionnez Charger une application personnalisée pour charger l’application d’onglet personnalisé dans Teams.

  5. Sélectionnez votre fichier zip de package d’application, puis sélectionnez Ajouter.

    Votre application d’onglet personnalisé est chargée et la boîte de dialogue s’affiche pour vous informer des autorisations supplémentaires qui peuvent être nécessaires.

  6. Cliquez sur Continuer.

    Boîte de dialogue Teams indiquant les autorisations supplémentaires requises

    La boîte de dialogue de consentement Microsoft Entra s’affiche.

  7. Sélectionnez Accepter pour donner son consentement pour les étendues open-id.

    boîte de dialogue de consentement Microsoft Entra

    Teams ouvre l’application onglet et vous pouvez l’utiliser.

    Exemple d’application onglet Teams avec l’authentification unique activée

    Félicitations ! Vous avez activé l’authentification unique pour votre application onglet.

Voir aussi