Activer l’authentification unique pour l’application Teams

Créer Microsoft Entra manifeste d’application

1. Téléchargez le modèle de manifeste d’application Microsoft Entra.

2. Ajoutez le code du modèle de manifeste d’application téléchargé au ./aad.manifest.json fichier. Cela vous permet de personnaliser différents aspects de l’inscription de votre application et de mettre à jour le manifeste en fonction des besoins. Pour plus d'informations, voir app manifest

Mettre à jour le manifeste de l’application Teams

Dans le ./appPackages/manifest.json fichier, ajoutez le code suivant :

"webApplicationInfo": {
  "id": "${{AAD_APP_CLIENT_ID}}",
  "resource": "api://${{TAB_DOMAIN}}/${{AAD_APP_CLIENT_ID}}"
}

webApplicationInfofournit votre ID d’application Microsoft Entra et les informations Microsoft Graph pour aider les utilisateurs à se connecter à votre application.

Mettre à jour les fichiers de configuration du kit de ressources Agents

1. Localisez vos fichiers de configuration Agents Toolkit, tels que ./m365agents.yml et ./m365agents.local.yml. Mettez à jour les configurations requises liées aux Microsoft Entra dans ces fichiers.

2. Ajoutez l’action aadApp/create sous provision dans ./m365agents.yml et ./m365agents.local.yml pour créer une application Microsoft Entra utilisée pour l’authentification unique :

   - uses: aadApp/create
     with:
       name: "YOUR_AAD_APP_NAME"
       generateClientSecret: true
       signInAudience: "AzureADMyOrg"
     writeToEnvironmentFile:
         clientId: AAD_APP_CLIENT_ID
         clientSecret: SECRET_AAD_APP_CLIENT_SECRET
         objectId: AAD_APP_OBJECT_ID
         tenantId: AAD_APP_TENANT_ID
         authority: AAD_APP_OAUTH_AUTHORITY
   

   Remarque

   Remplacez la name valeur par le nom souhaité pour votre application Teams.

   Pour plus d’informations, consultez aadApp/create.

3. Ajoutez l’action aadApp/update sous provision dans ./m365agents.yml et ./m365agents.local.yml pour mettre à jour votre application Microsoft Entra :

   - uses: aadApp/update
     with:
       manifestPath: "./aad.manifest.json"
       outputFilePath: "./build/aad.manifest.${{TEAMSFX_ENV}}.json"
   

   Remarque

   • Mettez à jour la manifestPath valeur sur le chemin d’accès relatif du modèle aad.manifest.jsonde manifeste d’application Microsoft Entra , si vous avez modifié le chemin d’accès du fichier.
   • Dans une configuration locale, positionnez après aad/update l’action file/createOrUpdateEnvironmentFile . Cela est obligatoire, car aad/update utilise la sortie de file/createOrUpdateEnvironmentFile.

   Pour plus d’informations, consultez l’article à l’adresse aadApp/update

4. Pour un projet React, mettez à jour cli/runNpmCommand sous deploy.

5. Si vous créez une application d’onglet à l’aide de l’infrastructure React dans l’interface CLI, recherchez l’action cli/runNpmCommand avec build app dans le m365agents.yml fichier et ajoutez les variables d’environnement suivantes :

   env:
     REACT_APP_CLIENT_ID: ${{AAD_APP_CLIENT_ID}}
     REACT_APP_START_LOGIN_PAGE_URL: ${{TAB_ENDPOINT}}/auth-start.html
   

6. Si vous créez une application d’onglet avec React framework, recherchez l’action file/createOrUpdateEnvironmentFile de déploiement dans m365agents.local.yml un fichier et ajoutez les variables d’environnement suivantes :

   envs:
     ...
     REACT_APP_CLIENT_ID: ${{AAD_APP_CLIENT_ID}}
     REACT_APP_START_LOGIN_PAGE_URL: ${{TAB_ENDPOINT}}/auth-start.html
   

Mettre à jour le code source

Une fois les modifications ci-dessus implémentées, votre environnement est préparé. Vous pouvez maintenant mettre à jour votre code pour incorporer l’authentification unique dans votre application Teams.

JavaScript à la vanille

Pour une application d’onglet qui n’utilise pas React, utilisez le code suivant comme exemple de base pour obtenir le jeton d’authentification unique :

function getSSOToken() {
  return new Promise((resolve, reject) => {
    microsoftTeams.authentication.getAuthToken()
      .then((token) => resolve(token))
      .catch((error) => reject("Error getting token: " + error));
  });
}

function getBasicUserInfo() {
  getSSOToken().then((ssoToken) => {
    const tokenObj = JSON.parse(window.atob(ssoToken.split(".")[1]));
    console.log(`username: ${tokenObj.name}`);
    console.log(`user email: ${tokenObj.preferred_username}`);
  });
}

React

Pour React projets, vérifiez que les variables d’environnement suivantes sont définies dans votre processus de déploiement :

• Pour un projet JavaScript, consultez l’exemple JavaScript de l’onglet.

• Pour un projet TypeScript, consultez l’onglet Exemple TypeScript.

Pour mettre à jour votre code source, procédez comme suit :

1. Déplacez les auth-start.html fichiers et auth-end.html du auth/public dossier vers le public/ dossier . Ces fichiers HTML servent à gérer les redirections d’authentification.

2. Déplacez sso le dossier sous auth/ vers src/sso/.

   1. InitTeamsFx: ce fichier exécute une fonction qui initialise le Kit de développement logiciel (SDK) TeamsFx. Après l’initialisation du Kit de développement logiciel (SDK), le composant s’ouvre GetUserProfile .
   2. GetUserProfile: ce fichier exécute une fonction pour récupérer les informations utilisateur en appelant le API Graph Microsoft.

3. Importez et ajoutez InitTeamsFx dans Welcome.*.

Pour plus d’informations, consultez Application d’onglet activée pour l’authentification unique.

Créer Microsoft Entra manifeste d’application

1. Téléchargez le modèle de manifeste d’application Microsoft Entra.

2. Ajoutez le code du modèle de manifeste d’application téléchargé au ./aad.manifest.json fichier. Cela vous permet de personnaliser différents aspects de l’inscription de votre application et de mettre à jour le manifeste en fonction des besoins. Pour plus d'informations, voir app manifest

Mettre à jour le manifeste de l’application Teams

1. Dans le ./appPackages/manifest.json fichier, ajoutez le code suivant :

   "webApplicationInfo": {
     "id": "${{AAD_APP_CLIENT_ID}}",
     "resource": "api://${{TAB_DOMAIN}}/${{AAD_APP_CLIENT_ID}}"
   }
   

   webApplicationInfofournit votre ID d’application Microsoft Entra et les informations Microsoft Graph pour aider les utilisateurs à se connecter à votre application.

   Remarque

   Vous pouvez utiliser {{ENV_NAME}} pour référencer des variables dans un env/.env.{TEAMSFX_ENV} fichier.

2. Inscrivez une ou plusieurs commandes dans commandLists.

   Inclut commandLists des commandes que votre bot peut suggérer aux utilisateurs. Si vous utilisez le modèle de teamsFx bot, définissez les valeurs suivantes :

   {
     "title": "profile",
     "description": "Show user profile using Single Sign On feature"
   }
   

3. Le validDomains champ inclut les domaines pour les sites web que l’application charge dans le client Teams. Mettez à jour la valeur suivante :

   "validDomains": [
   "${{BOT_DOMAIN}}"
   ]
   

Mettre à jour les fichiers de configuration du kit de ressources Agents

1. Localisez vos fichiers de configuration Agents Toolkit, tels que ./m365agents.yml et ./m365agents.local.yml. Mettez à jour les configurations nécessaires liées aux Microsoft Entra dans ces fichiers.

2. Ajoutez le code aadApp/create suivant sous provision et ./m365agents.yml./m365agents.local.yml pour créer des applications Microsoft Entra utilisées pour l’authentification unique :

   - uses: aadApp/create
     with:
       name: "YOUR_AAD_APP_NAME"
       generateClientSecret: true
       signInAudience: "AzureADMyOrg"
     writeToEnvironmentFile:
         clientId: AAD_APP_CLIENT_ID
         clientSecret: SECRET_AAD_APP_CLIENT_SECRET
         objectId: AAD_APP_OBJECT_ID
         tenantId: AAD_APP_TENANT_ID
         authority: AAD_APP_OAUTH_AUTHORITY
         authorityHost: AAD_APP_OAUTH_AUTHORITY_HOST
   

   Remarque

   Remplacez la name valeur par le nom souhaité pour votre application Microsoft Teams.

   Pour plus d’informations, consultez aadApp/create.

3. Ajoutez le code aadApp/update suivant sous provision et ./m365agents.yml./m365agents.local.yml pour mettre à jour votre application Microsoft Entra :

   - uses: aadApp/update
     with:
       manifestPath: "./aad.manifest.json"
       outputFilePath: "./build/aad.manifest.${{TEAMSFX_ENV}}.json"
   

   Remarque

   Mettez à jour la manifestPath valeur sur le chemin d’accès relatif du modèle aad.manifest.jsonde manifeste d’application Microsoft Entra , si vous avez modifié le chemin d’accès du fichier.

   Pour plus d’informations, consultez l’article à l’adresse aadApp/update

4. Localisez l’action createOrUpdateEnvironmentFile dans le m365agents.local.yml fichier et ajoutez les variables d’environnement suivantes :

   envs:
     ...
     M365_CLIENT_ID: ${{AAD_APP_CLIENT_ID}}
     M365_CLIENT_SECRET: ${{SECRET_AAD_APP_CLIENT_SECRET}}
     M365_TENANT_ID: ${{AAD_APP_TENANT_ID}}
     INITIATE_LOGIN_ENDPOINT: ${{BOT_ENDPOINT}}/auth-start.html
     M365_AUTHORITY_HOST: ${{AAD_APP_OAUTH_AUTHORITY_HOST}}
     M365_APPLICATION_ID_URI: api://botid-${{BOT_ID}}
   

Mettre à jour l’infrastructure

Mettez à jour les configurations liées à Microsoft Entra dans votre service distant. L’exemple suivant montre les paramètres de configuration sur une application web Azure :

• M365_CLIENT_ID: ID client de l’application Microsoft Entra
• M365_CLIENT_SECRET: clé secrète client de l’application Microsoft Entra
• M365_TENANT_ID: ID de locataire de l’application Microsoft Entra
• INITIATE_LOGIN_ENDPOINT: Page de démarrage de la connexion pour l’authentification
• M365_AUTHORITY_HOST: hôte d’autorité OAuth de l’application Microsoft Entra
• M365_APPLICATION_ID_URI: URI d’identificateur pour Microsoft Entra’application

Pour utiliser l’onglet ou le teamsFx modèle de bot, procédez comme suit :

1. Ouvrez le infra/azure.parameters.json fichier et ajoutez le code suivant :

   "m365ClientId": {
     "value": "${{AAD_APP_CLIENT_ID}}"
   },
   "m365ClientSecret": {
     "value": "${{SECRET_AAD_APP_CLIENT_SECRET}}"
   },
   "m365TenantId": {
     "value": "${{AAD_APP_TENANT_ID}}"
   },
   "m365OauthAuthorityHost": {
     "value": "${{AAD_APP_OAUTH_AUTHORITY_HOST}}"
   }
   

2. Ouvrez infra/azure.bicep le fichier et ajoutez le code suivant après param location string = resourceGroup().location:

   param m365ClientId string
   param m365TenantId string
   param m365OauthAuthorityHost string
   param m365ApplicationIdUri string = 'api://botid-${botAadAppClientId}'
   @secure()
   param m365ClientSecret string
   

3. Ajoutez le code suivant avant output dans le infra/azure.bicep fichier :

   resource webAppSettings 'Microsoft.Web/sites/config@2021-02-01' = {
     name: '${webAppName}/appsettings'
     properties: {
       M365_CLIENT_ID: m365ClientId
       M365_CLIENT_SECRET: m365ClientSecret
       INITIATE_LOGIN_ENDPOINT: uri('https://${webApp.properties.defaultHostName}', 'auth-start.html')
       M365_AUTHORITY_HOST: m365OauthAuthorityHost
       M365_TENANT_ID: m365TenantId
       M365_APPLICATION_ID_URI: m365ApplicationIdUri
       BOT_ID: botAadAppClientId
       BOT_PASSWORD: botAadAppClientSecret
       RUNNING_ON_AZURE: '1'
     }
   }
   

   Remarque

   • Pour ajouter des configurations supplémentaires à votre application web Azure, ajoutez les configurations dans .webAppSettings
   • Vous devrez peut-être également définir la version de nœud par défaut en ajoutant la configuration suivante : bash WEBSITE_NODE_DEFAULT_VERSION: '14.20.0'

   Mettre à jour le code source

   • Bot
   • Extension de message

   1. Déplacez les fichiers situés dans le auth/sso dossier vers src. La ProfileSsoCommandHandler classe sert de gestionnaire de commandes d’authentification unique, conçu pour récupérer les informations utilisateur à l’aide d’un jeton d’authentification unique. Vous pouvez adopter cette méthode pour développer votre propre gestionnaire de commandes d’authentification unique.

   2. Déplacez le auth/public dossier vers src/public. Ce dossier contient des pages HTML pour l’application bot. Lors du lancement de flux d’authentification unique avec Microsoft Entra, l’utilisateur est redirigé vers ces pages.

   3. Exécutez la commande suivante dans le ./ dossier :

      npm install copyfiles --save-dev
      

   4. Mettez à jour la commande suivante dans le package.json fichier :

      "build": "tsc --build && shx cp -r ./src/adaptiveCards ./lib/src && copyfiles src/public/*.html lib/",
      

      Les pages HTML utilisées pour la redirection d’authentification sont copiées lors de la création de ce projet de bot.

   5. Dans src/index le fichier, ajoutez la commande suivante pour importer isomorphic-fetch:

       require("isomorphic-fetch");
      

   6. Ajoutez la commande suivante pour rediriger vers les pages d’authentification :

      server.get(
          "/auth-:name(start|end).html",
          restify.plugins.serveStatic({
            directory: path.join(__dirname, "public"),
          })
      );
      

   7. Mettez à jour commandApp.requestHandler pour vous assurer que l’authentification fonctionne avec le code suivant :

      await commandApp.requestHandler(req, res).catch((err) => {
          // Error message including "412" means it is waiting for user's consent, which is a normal process of SSO, sholdn't throw this error.
          if (!err.message.includes("412")) {
          throw err;
          }
      });
      

   8. Ajoutez ssoConfig et ssoCommands dans ConversationBot :src/internal/initialize

      import { ProfileSsoCommandHandler } from "../profileSsoCommandHandler";
      
      export const commandBot = new ConversationBot({
          ...
          // To learn more about ssoConfig, please refer atk sdk document: https://docs.microsoft.com/microsoftteams/platform/toolkit/teamsfx-sdk
          ssoConfig: {
          aad :{
            scopes:["User.Read"],
          },
          },
          command: {
          enabled: true,
          commands: [new HelloWorldCommandHandler() ],
          ssoCommands: [new ProfileSsoCommandHandler()],
          },
      });