Créer un onglet Microsoft Teams avec la Boîte à outils Microsoft Graph
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 :
- Ajoutez la Boîte à outils Microsoft Graph.
- Créez la page de fenêtre contextuelle d’autorisation.
- Création d’un ID client/application
- Initialisez le Teams fournisseur MSAL2.
- Ajoutez des composants.
- 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 queSingle 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
- Testez les composants dans le terrain de jeu.
- Posez une question sur les questions microsoft&R.
- Signalez des bogues ou déposez une demande de fonctionnalité sur GitHub.
- Consultez les exemples Microsoft Teams’exemples.
Commentaires
Envoyer et afficher des commentaires pour