Création d’un onglet Microsoft teams à l’aide de Microsoft Graph ToolkitBuild a Microsoft Teams tab with the Microsoft Graph Toolkit

  • 4 minutes de lecture

Cette rubrique traite de la prise en main de Microsoft Graph Toolkit dans une solution Microsoft Teams.This topic covers how to get started using the Microsoft Graph Toolkit in a Microsoft Teams solution. La mise en route implique les étapes suivantes :Getting started involves the following steps:

  1. Créer une nouvelle application teams avec un onglet personnalisé.Create a new Teams application with a custom tab.
  2. Configurez ngrok et créez un tunnel.Set up ngrok and create a tunnel.
  3. Ajoutez la boîte à outils Microsoft Graph.Add the Microsoft Graph Toolkit.
  4. Initialisez le fournisseur Microsoft Teams.Initialize the Microsoft Teams provider.
  5. Créez la page contextuelle auth.Create the auth popup page.
  6. Ajouter des composants.Add components.
  7. Testez votre application.Test your app.

Créer une nouvelle application teams avec un onglet personnaliséCreate a new Teams application with a custom tab

Le moyen le plus simple de créer une nouvelle application teams consiste à utiliser l' extension Microsoft teams Toolkit pour Visual Studio code.The easiest way to create a new Teams app is to use the Microsoft Teams Toolkit extension for Visual Studio Code. Suivez les instructions pour configurer un nouveau projet teams.Follow the instructions to set up a new Teams project. Lorsque vous accédez à l’écran Ajouter des fonctionnalités , sélectionnez onglet, puis onglet personnel.When you get to the Add capabilities screen, select Tab, and then Personal tab.

Configurer ngrok et créer un tunnelSet up ngrok and create a tunnel

Pour tester votre application plus tard, vous devrez héberger votre application sur une URL publique à l’aide du protocole HTTPs.In order to test your application later, you will need to host your application over a public-facing URL using HTTPS. Installez ngrok et créez un tunnel à partir d’Internet vers localhost : 3000 à l’aide de la commande suivante :Install ngrok and create a tunnel from the Internet to localhost:3000 with the following command:

ngrok http 3000

Dans le répertoire de votre projet, recherchez le .publish\Development.env fichier et remplacez la valeur par baseUrl0 votre URL ngrok.In your project directory, locate the .publish\Development.env file and replace the value for baseUrl0 with your ngrok URL.

Ajout de la boîte à outils Microsoft GraphAdd the Microsoft Graph Toolkit

Vous pouvez utiliser Microsoft Graph Toolkit dans votre application en référençant le chargeur directement (via unpkg) ou en installant le package NPM.You can use the Microsoft Graph Toolkit in your application by referencing the loader directly (via unpkg) or by installing the npm package. Pour utiliser la boîte à outils, vous avez également besoin du Kit de développement logiciel (SDK) Microsoft teams.To use the Toolkit, you will also need the Microsoft Teams SDK.

Utilisation via le chargeur de gestionUse via mgt-loader

Pour utiliser la boîte à outils et le kit de développement logiciel teams via les chargeurs, ajoutez les références suivantes à public/index.html :To use the Toolkit and the Teams SDK via the loaders, add the following references to public/index.html:

<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>

Utilisation via NPM (modules ES6)Use via npm (ES6 modules)

L’utilisation de la boîte à outils via des modules ES6 vous permettra de contrôler totalement le processus de regroupement et de vous permettre de regrouper uniquement le code dont vous avez besoin pour votre application.Using the Toolkit via ES6 modules will give you full control of the bundling process and allow you to bundle only the code you need for your application. Pour utiliser les modules ES6, ajoutez les packages NPM pour la boîte à outils et le kit de développement logiciel Microsoft teams dans votre projet :To use the ES6 modules, add the npm packages for both the Toolkit and the Microsoft Teams SDK to your project:

npm install @microsoft/mgt @microsoft/teams-js

Initialiser le fournisseur de teamsInitialize the Teams provider

Les fournisseurs de Microsoft Graph Toolkit permettent l’authentification et l’accès à Microsoft Graph pour les composants.The Microsoft Graph Toolkit providers enable authentication and access to Microsoft Graph for the components. Pour en savoir plus, consultez la rubrique utilisation des fournisseurs.To learn more, see Using the providers. Le fournisseur de teams gère l’ensemble de la logique et des interactions qui doivent être implémentées avec le kit de développement logiciel teams pour authentifier l’utilisateur.The Teams provider handles all of the logic and interactions that need to be implemented with the Teams SDK to authenticate the user.

Vous pouvez choisir d’initialiser le fournisseur dans votre code HTML ou JavaScript.You can choose to initialize the provider in either your HTML or your JavaScript code.

Initialiser dans le code HTMLInitialize in HTML

Dans public/index.html , ajoutez le fournisseur teams comme indiqué.In public/index.html, add the Teams provider as shown.

<mgt-teams-provider
  client-id="<YOUR_CLIENT_ID>"
  auth-popup-url="https://<YOUR_NGROK_URL>/auth.html"
></mgt-teams-provider>

Remplacez <YOUR_CLIENT_ID> par l’ID client de votre application et <YOUR_NGROK_URL> par l’URL ngrok que vous avez créée.Replace <YOUR_CLIENT_ID> with the client ID for your application and <YOUR_NGROK_URL> with the ngrok URL you created.

Initialiser en JavaScriptInitialize in JavaScript

Pour initialiser le fournisseur dans votre code JavaScript, localisez le src/components/App.js fichier dans le répertoire de votre projet.To initialize the provider in your JavaScript code, Locate the src/components/App.js file in your project directory. Importez le fournisseur teams et initialisez le fournisseur.Import the Teams Provider and initialize the provider.

import * as microsoftTeams from "@microsoft/teams-js/dist/MicrosoftTeams";
import { Providers, TeamsProvider } from '@microsoft/mgt';

TeamsProvider.microsoftTeamsLib = microsoftTeams;
Providers.globalProvider = new TeamsProvider ({
    clientId: '<YOUR_CLIENT_ID>',
    authPopupUrl: '/auth.html'
})

Remplacez <YOUR_CLIENT_ID> par l’ID client de votre application.Replace <YOUR_CLIENT_ID> with the client ID for your application.

Création d’un ID d’application/clientCreating an app/client ID

Pour obtenir un ID client, vous devez enregistrer votre application dans Azure ad.In order to get a client ID, you need to register your application in Azure AD. Veillez à ajouter votre URL ngrok avec le chemin d’accès complet à la page contextuelle auth à vos URI de redirection (par exemple, https://<YOUR_NGROK_URL>/auth.html ).Make sure to add your ngrok URL with the full path to the auth popup page to your redirect URIs (for example, https://<YOUR_NGROK_URL>/auth.html).

Remarque: MSAL prend en charge uniquement le flux implicite pour OAuth.Note: MSAL only supports the Implicit Flow for OAuth. Assurez-vous d’activer le flux implicite dans votre application dans le portail Azure (il n’est pas activé par défaut).Make sure to enable Implicit Flow in your application in the Azure Portal (it is not enabled by default). Sous authentification, recherchez la section accord implicite et activez les cases à cocher pour les jetons d' accès et les jetons d’ID.Under Authentication, find the Implicit grant section and select the checkboxes for Access tokens and ID tokens.

Création de la page contextuelle authCreate the auth popup page

Pour permettre aux utilisateurs de se connecter, vous devez fournir une URL que l’application teams ouvrira dans une fenêtre contextuelle pour suivre le flux d’authentification.In order to allow users to sign in, you need to provide a URL that the Teams app will open in a popup to follow the authentication flow. L’URL doit se trouver dans votre domaine et l’ensemble de cette page doit faire appel à la TeamsProvider.handleAuth() méthode.The URL needs to be in your domain, and all this page needs to do is call the TeamsProvider.handleAuth() method.

Vous pouvez effectuer cette opération dans votre code HTML en ajoutant un nouveau auth.html fichier dans le public dossier (qui doit se trouver au même niveau que index.html ) et en ajoutant le code suivant :You can do this in your HTML by adding a new auth.html file in the public folder (which should be at the same level as index.html) and adding the following code:

<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>

<script>
  mgt.TeamsProvider.handleAuth();
</script>

Ajouter des composantsAdd components

À présent, vous êtes prêt à ajouter les composants Microsoft Graph Toolkit à votre onglet.Now, you're ready to add any of the Microsoft Graph Toolkit components to your tab.

Vous pouvez ajouter des composants à votre code HTML comme vous le feriez normalement.You can add components to your HTML as you normally would. Par exemple, pour ajouter le composant de connexion, ajoutez le code ci-dessous dans le corps de votre index.html :For example, to add the Login component add the below code to the body of your index.html:

<mgt-login></mgt-login>

Sinon, vous pouvez ajouter les composants dans JSX au composant onglet.Or, you can add the components in JSX to the Tab component. Nous vous recommandons d’utiliser la mgt-react bibliothèque si vous avez créé votre application teams à l’aide de l’extension Microsoft teams Toolkit.We recommend using the mgt-react library if you created your Teams app using the Microsoft Teams Toolkit extension. Pour en savoir plus, consultez la rubrique utilisation de la boîte à outils Microsoft Graph avec REACTTo learn more, see Using Microsoft Graph Toolkit with React

Tout d’abord, installez mgt-react :First, install mgt-react:

npm install @microsoft/mgt-react

Recherchez le src/components/Tab.js fichier et importez les composants que vous souhaitez utiliser dans la mgt-react bibliothèque.Locate the src/components/Tab.js file and import the components you want to use from the mgt-react library. Par exemple, pour ajouter l' Login utilisation du composant :For example to add the Login component use:

import { Login } from "@microsoft/mgt-react"

Ensuite, ajoutez le composant à l' return() instruction de la render() méthode Tab suivante :Then, add the the component to the return() statement of the render() method of Tab:

render() {
  return(
    <Login />
  );
}

Tester votre applicationTest your application

Générez et exécutez votre application à l’aide des commandes suivantes :Build and run your application using the following commands:

npm install
npm start

Pour tester votre application, vous devez charger votre application dans Teams.To test your application, you need to upload your application to Teams. Ouvrez le client Microsoft Teams, sélectionnez le ... dans le menu de gauche et accédez à app Studio.Open the Microsoft Teams client, select the ... on the left-hand menu and go to App Studio. Cliquez sur l’onglet éditeur de manifeste et sélectionnez Importer une application existante.Click the Manifest Editor tab and select Import an existing app.

Recherchez le répertoire de votre projet et chargez le fichier Development.zip dans le dossier . Publish .Locate your project directory and upload the Development.zip file inside of the .publish folder.

Une fois que votre application a été chargée, faites défiler vers le bas dans le menu de gauche et sélectionnez test and distribute.After your app has loaded, scroll down on the left menu and select Test and Distribute. Cliquez sur le bouton installer , puis sur Ajouter.Click the Install button and then click Add. Vous serez redirigé vers l’onglet que vous avez créé.You will be redirected to the tab you created.

Étapes suivantesNext Steps