Prise en main du Kit de ressources Microsoft Graph.

  • Article

Les composants du Kit de ressources Microsoft Graph peuvent facilement être ajoutés à votre application web, à votre composant WebPart SharePoint ou aux onglets Microsoft Teams. Les composants sont basés sur des normes web et peuvent être utilisés dans des projets JavaScript simples ou avec des frameworks web populaires tels que Reach, Angular et Vue.js.

Regardez cette courte vidéo pour commencer à utiliser le kit de ressources.

Pour obtenir un didacticiel pas à pas, consultez le module Prise en main du Kit de ressources Microsoft Graph .

Configurer votre client Microsoft 365

Pour utiliser le Kit de ressources Microsoft Graph afin de développer une application, vous devez accéder à un locataire Microsoft 365. Si vous n’avez pas de locataire Microsoft 365, vous pouvez être éligible pour un client via le Programme pour les développeurs Microsoft 365 ; Pour plus d’informations, consultez la FAQ. Vous pouvez également vous inscrire à un essai gratuit de 1 mois ou acheter un plan Microsoft 365.

Configuration de votre environnement de développement

Pour développer avec le kit de ressources, vous avez besoin des éléments suivants :

  • Un éditeur de texte ou un IDE. Vous pouvez utiliser l’éditeur ou l’IDE de votre choix, ou vous pouvez installer et utiliser Visual Studio Code gratuitement.
  • Un navigateur web moderne tel que Microsoft Edge, Google Chrome ou Firefox.
  • Une version LTS de Node.js, que vous pouvez installer à partir de nodejs.org.

Utiliser le Kit de ressources Microsoft Graph

Vous pouvez utiliser le Kit de ressources Microsoft Graph dans votre application en installant les npm packages ou en référençant directement le chargeur (via unpkg).

L’utilisation du kit de ressources via des modules ES6 vous donne un contrôle total du processus de regroupement et vous permet de regrouper uniquement le code dont vous avez besoin pour votre application. Pour utiliser les modules ES6, ajoutez les @microsoft/mgt-elementpackages , @microsoft/mgt-componentset @microsoft/mgt-msal2-provider à votre projet :

npm install @microsoft/mgt-element @microsoft/mgt-components @microsoft/mgt-msal2-provider

Pour utiliser les composants en tant qu’élément personnalisé en HTML, ils doivent être inscrits. Pour utiliser les composants de votre code, importez et exécutez la fonction d’inscription de composant nécessaire. L’exemple suivant montre comment procéder pour les composants d’agenda et de connexion :

<script type="module">
  import { registerMgtMsal2Provider } from 'node_modules/@microsoft/mgt-msal2-provider/dist/es6/index.js';
  import { registerMgtLoginComponent, registerMgtAgendaComponent } from 'node_modules/@microsoft/mgt-components/dist/es6/index.js';
  registerMgtMsal2Provider();
  registerMgtLoginComponent();
  registerMgtAgendaComponent();
</script>

<mgt-msal2-provider client-id="<YOUR_CLIENT_ID>"></mgt-msal2-provider>
<mgt-login></mgt-login>
<mgt-agenda></mgt-agenda>

En guise de raccourci, si vous souhaitez inscrire tous les composants de @microsoft/mgt-components, vous pouvez utiliser la méthode d’assistance registerMgtComponents() . L’utilisation déclarative des fournisseurs nécessite toujours que le fournisseur approprié soit inscrit séparément, car ils proviennent de packages différents.

<script type="module">
  import { registerMgtMsal2Provider } from 'node_modules/@microsoft/mgt-msal2-provider/dist/es6/index.js';
  import { registerMgtComponents } from 'node_modules/@microsoft/mgt-components/dist/es6/index.js';
  registerMgtMsal2Provider();
  registerMgtComponents();
</script>

<mgt-msal2-provider client-id="<YOUR_CLIENT_ID>"></mgt-msal2-provider>
<mgt-login></mgt-login>
<mgt-agenda></mgt-agenda>

Importante

Lorsque vous utilisez un bundler de prise en charge de l’arborescence, tel que Webpack ou Rollup, vous devez importer et inscrire les composants individuels. Cela garantit que tous les composants inutilisés sont sortis de l’arborescence de vos builds.

Vous pouvez également configurer le fournisseur de manière impérative, comme indiqué dans l’exemple suivant :

<script type="module">
  import { Providers } from 'node_modules/@microsoft/mgt-element/dist/es6/index.js';
  import { Msal2Provider } from 'node_modules/@microsoft/mgt-msal2-provider/dist/es6/index.js';
  import { registerMgtComponents } from 'node_modules/@microsoft/mgt-components/dist/es6/index.js';
  Providers.globalProvider = new Msal2Provider({clientId: '<YOUR_CLIENT_ID>'});
  registerMgtComponents();
</script>
<mgt-login></mgt-login>
<mgt-agenda></mgt-agenda>