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

Avant de mettre à jour le manifeste de l’application Teams, vérifiez que vous avez configuré le code pour activer l’authentification unique dans votre application onglet.

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

webApplicationInfo, propriété

Configurez la webApplicationInfo propriété dans le fichier manifeste de l’application Teams. 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.

  Configuration du manifeste d’application Teams

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

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

Remarque

Vous devez utiliser la version 1.5 ou supérieure du manifeste pour implémenter le webApplicationInfo champ.

L’URI d’ID d’application que vous avez inscrit dans Azure AD est configuré avec l’étendue de l’API que vous avez exposée. Configurez l’URI resource de sous-domaine de votre application pour vous assurer que la demande d’authentification utilisée getAuthToken() est du domaine fourni dans le manifeste de l’application Teams.

Pour plus d'informations, voir webApplicationInfo ..

Pour configurer le manifeste de l’application Teams

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

  2. Ouvrez le dossier :

    Remarque

  3. Ouvrir le manifest.json fichier

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

    "webApplicationInfo": {
    "id": "{Azure AD AppId}",
    "resource": "api://{Subdomain}.example.com/{Azure AD AppId}"
    }
    

    • {Azure AD AppId} est l’ID d’application que vous avez créé lorsque vous avez inscrit votre application dans Azure AD. C’est le GUID.
    • {{Subdomain}.app ID URI} est l’URI d’ID d’application que vous avez inscrit lors de la création de l’étendue dans Azure AD.
  5. Mettez à jour l’ID d’application à partir d’Azure AD 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 Teams.


Voici un exemple de manifeste d’application après sa mise à 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 Azure AD. 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.

Chargement indépendant et préversion dans Teams

Vous avez configuré l’application onglet pour activer l’authentification unique dans Azure AD, dans le code de l’application et dans le fichier manifeste Teams. Vous pouvez maintenant charger une version test de votre application onglet 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 onglet dans Teams.

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

    L’application onglet est chargée de manière indépendante et la boîte de dialogue s’affiche pour vous informer des autorisations supplémentaires qui peuvent être requises.

  6. Cliquez sur Continuer.

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

    La boîte de dialogue de consentement Azure AD s’affiche.

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

    Capture d’écran de la boîte de dialogue de consentement Azure AD

    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