Créer un application web avec la Boîte à outils Microsoft Graph

  • Article

Cette rubrique explique comment prendre en main le Kit de ressources Microsoft Graph dans une application web écrite en JavaScript vanille. Pour obtenir un tutoriel pas à pas, essayez le module Prise en main du Kit de ressources Microsoft Graph. Si vous souhaitez découvrir comment utiliser le Kit de ressources avec une infrastructure web, voir Créer une application web (React) ou Créer une application web (Angular).

La prise en main du kit de ressources implique les étapes suivantes :

  1. Ajoutez la Boîte à outils Microsoft Graph à votre projet.
  2. Initialisez le fournisseur Microsoft Authentication Library 2 (MSAL2).
  3. Ajoutez des composants.
  4. Testez votre application.

Ajouter le Kit de ressources Microsoft Graph à votre projet

Vous pouvez utiliser microsoft Graph Toolkit dans votre application en installant les packages npm ou en les chargeant à partir d’un réseau de distribution de contenu (CDN).

Pour utiliser le kit de ressources via un CDN, ajoutez le script et le balisage suivants à votre page HTML :

<script type="module">
  import {
    registerMgtComponents,
    Providers,
    Msal2Provider,
  } from "https://unpkg.com/@microsoft/mgt@4";
  Providers.globalProvider = new Msal2Provider({ clientId: "[CLIENT-ID]" });
  registerMgtComponents();
</script>

Initialiser le fournisseur 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 fournisseur MSAL2 utilise MSAL-browser pour connecter des utilisateurs et acquérir des jetons. Vous pouvez initialiser ce fournisseur dans votre code HTML ou JavaScript.

Remarque : Si vous utilisez actuellement le fournisseur MSAL et que vous souhaitez effectuer une mise à jour vers le fournisseur MSAL2, consultez Migration du fournisseur MSAL vers le fournisseur MSAL2. Si vous souhaitez utiliser votre propre authentification principale, utilisez le fournisseur proxy à la place du fournisseur MSAL2.

Vous pouvez choisir d’initialiser le fournisseur dans votre code JavaScript ou html.

Pour initialiser le fournisseur MSAL dans votre JavaScript, ajoutez le code suivant à votre application :

import { Providers } from "@microsoft/mgt-element";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";

Providers.globalProvider = new Msal2Provider({
  clientId: "<YOUR_CLIENT_ID>",
});

L’ID client est la seule propriété requise pour initialiser le fournisseur, mais vous pouvez définir d’autres options. Pour obtenir la liste complète, consultez Fournisseur MSAL2.

Création d’un ID client/application

Pour obtenir un ID client, vous devez inscrire votre application dans Microsoft Entra ID.

Ajouter des composants

Après avoir initialisé le fournisseur MSAL2, vous pouvez commencer à utiliser l’un des composants du kit de ressources.

Cet exemple utilise les modules ES6, le fournisseur MSAL2 initialisé en JavaScript et le Login composant :

import { Providers } from "@microsoft/mgt-element";
import { registerMgtLoginComponent } from "@microsoft/mgt-components";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";

Providers.globalProvider = new Msal2Provider({
  clientId: "<YOUR_CLIENT_ID>",
});

registerMgtLoginComponent();

function component() {
  const element = document.createElement("div");
  element.innerHTML = "<mgt-login></mgt-login>";
  return element;
}

document.body.appendChild(component());

L’exemple suivant utilise les modules ES6, le fournisseur MSAL2 initialisé en HTML et le Login composant :

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

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

Tester votre application

Pour tester votre application, MSAL exige que la page soit hébergée sur un serveur web pour les redirections d’authentification.

Si vous commencez la prise en main et que vous voulez expérimenter encore un peu, vous pouvez utiliser Live Server dans Visual Studio Code ou tout serveur de développement léger similaire. Téléchargez l’extension, puis ouvrez votre fichier HTML à l’aide de Live Server.

Remarque : vérifiez que l’URI de redirection dans votre application est définie sur le port localhost sur lequel votre application est hébergée. Accédez à l’inscription de votre application dans le centre d'administration Microsoft Entra, cliquez sur Authentification sous Gérer, puis ajoutez l’URI de redirection approprié.

Suivre l’état de connexion d’un utilisateur

Vous pouvez détecter quand un utilisateur est correctement connecté et afficher des composants spécifiques en conséquence. Par exemple, affichez le composant agenda si l’utilisateur est connecté. Sinon, affichez l’interface de connexion.

Le package mgt-element fournit la isSignedIn fonction utilitaire que vous pouvez appeler pour vérifier si un utilisateur est connecté.

Si vous utilisez le kit de ressources via les packages npm, vous pouvez importer les Provider et ProviderState à partir de @microsoft/mgt-element.

import { Providers } from "@microsoft/mgt-element";
import {
  registerMgtLoginComponent,
  registerMgtAgendaComponent,
} from "@microsoft/mgt-components";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";
import { isSignedIn } from "@microsoft/mgt-element";

Providers.globalProvider = new Msal2Provider({
  clientId: "<YOUR_CLIENT_ID>",
});

registerMgtLoginComponent();
registerMgtAgendaComponent();

const loadAgenda = () => {
  if (isSignedIn()) {
    document.getElementById("main").innerHTML = "<mgt-agenda></mgt-agenda>";
  }
};

Providers.onProviderUpdated(loadAgenda);

Étapes suivantes