Commentaires Modifier

Créer un onglet Microsoft Teams avec la Boîte à outils Microsoft Graph

  • Article
  • 3 minutes de lecture

Cette rubrique présente la méthode pour commencer à utiliser la Boîte à outils Microsoft Graph dans une solution Microsoft Teams. Ce guide est pour une application à page unique sans sign-on unique (SSO) et ne nécessite pas de système d’arrière-page. Si vous implémentez l’personnalisation SSO avec un système d’arrière-Microsoft Teams onglet (SSO) personnalisé.

La création d’un onglet implique les étapes suivantes :

  1. Ajoutez la Boîte à outils Microsoft Graph.
  2. Créez la page de fenêtre contextuelle d’autorisation.
  3. Création d’un ID client/application
  4. Initialisez le Teams fournisseur MSAL2.
  5. Ajoutez des composants.
  6. Testez votre application.

Ajout de la Boîte à outils Microsoft Graph

Vous pouvez utiliser l’Graph Shared Computer Toolkit Microsoft dans votre application en référencant le chargeur directement (via unpkg) ou en installant les packages npm. Pour utiliser le Kit de ressources, vous aurez également besoin du Kit de développement logiciel (SDK) Microsoft Teams.

Pour utiliser les Shared Computer Toolkit et Teams SDK via les chargeurs, ajoutez la référence dans un script à votre code :

<!-- Microsoft Teams sdk must be referenced before the toolkit -->
<script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>

Création de la page de fenêtre contextuelle d’autorisation

Pour permettre aux utilisateurs de se connecter, vous aurez besoin d’une page dans votre application qui Teams s’ouvre dans une fenêtre popup pour suivre le flux d’authentification. Le chemin d’accès à la page peut être n’importe quoi tant qu’il se trouve dans le même domaine que votre application (par exemple, https://yourdomain.com/tabauth). La seule condition requise pour cette page est d’appeler la TeamsMsal2Provider.handleAuth() méthode, mais vous pouvez ajouter du contenu ou charger la progression de votre recherche.

Voici un exemple de page de base qui gère le flux d’th dans la fenêtre popup.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
  </head>

  <body>
    <script>
      mgt.TeamsMsal2Provider.handleAuth();
    </script>
  </body>
</html>

Création d’un ID client/application

Pour obtenir un ID client, vous devez inscrire une application Azure Active Directory client. Suivez les étapes de l’article Créer Azure Active Directory’application.

Veillez à définir l’inscription redirect URI de votre application de sorte qu’elle pointe vers la page d’th que vous avez créée à l’étape précédente. Par exemple : https://localhost:3000/tabauth.

Remarque : Veillez à définir l’en redirect URI tant que Single Page Application (SPA). Teams fournisseur MSAL2 utilise le fournisseur MSAL2 en arrière-plan.

Initialiser le fournisseur Teams MSAL2

Les fournisseurs de la Boîte à outils Microsoft Graph activent l’authentification et l’accès à Microsoft Graph pour les composants. Pour en savoir plus, consultez Utilisation des fournisseurs. Le Teams MSAL2 gère toute la logique et les interactions qui doivent être implémentées avec le SDK Teams pour authentifier l’utilisateur.

Vous pouvez décider d’initialiser le fournisseur dans votre code HTML ou JavaScript.

Ajoutez le mgt-teams-msal2-provider composant à votre page HTML comme indiqué.

<mgt-teams-msal2-provider 
  client-id="<YOUR_CLIENT_ID>"
  auth-popup-url="/tabauth"
  scopes="User.Read,Mail.ReadBasic"
  ></mgt-teams-msal2-provider>

Remplacez-le <YOUR_CLIENT_ID> par l’ID client de votre application et auth-popup-url remplacez-le par le chemin d’accès complet ou relatif à votre page d’th.

Ajouter des composants

Vous êtes maintenant prêt à ajouter n’importe quel composant Microsoft Graph Shared Computer Toolkit microsoft. Le premier composant que vous devrez probablement ajouter est le composant de connexion.

<mgt-login></mgt-login>

Le composant de connexion affiche un bouton « Se connecter » qui guide l’utilisateur tout au long du processus de connexion et s’intègre à l’un des fournisseurs pour gérer l’authentification. Une fois que l’utilisateur s’est inscrit, tous les autres composants du kit de ressources peuvent appeler Microsoft Graph automatiquement. Les fournisseurs exposent également un client Microsoft Graph authentifié pour effectuer des appels d’API ou obtenir des jetons d’accès. Pour plus d’informations, voir Utilisation des fournisseurs.

Si vous utilisez React, nous vous recommandons d’utiliser les React à la place à partir de la mgt-react bibliothèque. Pour en savoir plus, consultez Utilisation de la Boîte à outils Microsoft Graph avec React

Étapes suivantes