Partager via

Activer l’authentification unique pour l’application Teams

  • Article

Microsoft Teams fournit une fonction d’authentification unique (SSO) permettant à une application d’obtenir un jeton d’utilisateur Teams connecté pour accéder à Microsoft Graph et à d’autres API. Microsoft Teams Toolkit simplifie le processus en incorporant certains flux de travail et intégrations Microsoft Entra dans des API simples et de haut niveau. Par conséquent, vous pouvez facilement incorporer des fonctionnalités d’authentification unique dans votre application Teams. Pour plus d’informations, consultez Authentifier les utilisateurs dans Microsoft Teams.

Configurations de clés

Pour activer l’authentification unique, configurez votre application Teams comme suit :

  • Microsoft Entra manifeste de l’application : veillez à définir des URI, y compris l’URI qui identifie l’application d’authentification Microsoft Entra et l’URI de redirection qui retourne le jeton.

  • Manifeste de l’application Teams : connectez votre application d’authentification unique à votre application Teams en incorporant la configuration correcte.

  • Fichiers de configuration et d’infrastructure du Kit de ressources Teams : vérifiez que les configurations nécessaires sont en place pour activer l’authentification unique pour votre application Teams.

  • Informations sur l’application SSO dans les fichiers de configuration du kit de ressources Teams : vérifiez que l’application d’authentification s’inscrit sur le service back-end et que Teams Toolkit l’initie pendant le débogage ou la préversion de 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.

Remarque

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

Mettre à jour les fichiers de configuration du Kit de ressources Teams

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

  2. Ajoutez l’action aadApp/create sous provision dans ./teamsapp.yml et ./teamsapp.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 ./teamsapp.yml et ./teamsapp.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 teamsapp.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 teamsapp.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 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.

Déboguer votre application

Pour déboguer votre application, sélectionnez la touche F5 . Teams Toolkit utilise le manifeste Microsoft Entra pour inscrire une application prenant en charge l’authentification unique. Pour plus d’informations, consultez Déboguer votre application Teams localement.

Personnaliser les applications Microsoft Entra

Le manifeste d’application Teams vous permet de personnaliser différents aspects de l’inscription de votre application. Vous pouvez mettre à jour le manifeste en fonction des besoins.

Pour inclure des autorisations d’API supplémentaires pour accéder aux API souhaitées, consultez Modifier Microsoft Entra manifeste.

Pour afficher votre application Microsoft Entra dans Portail Azure, consultez Modifier Microsoft Entra manifeste.

Étape suivante

Ajouter l'authentification unique à l'application Teams