Créer une application Web avec Microsoft Graph ToolkitBuild a web application with the Microsoft Graph Toolkit

Cette rubrique décrit la prise en main de Microsoft Graph Toolkit dans une application Web écrite en langage JavaScript vanille.This topic describes how to get started with the Microsoft Graph Toolkit in a web application written in vanilla JavaScript. Si vous souhaitez apprendre à utiliser la boîte à outils avec une infrastructure Web, reportez-vous à la rubrique utilisation de la boîte à outils avec réaction ou utilisation de la boîte à outils avec des angles.If you would like to learn how to use the Toolkit with a web framework, see Use the Toolkit with React or Use the Toolkit with Angular.

La mise en route de la boîte à outils Microsoft Graph implique les étapes suivantes :Getting started with the Microsoft Graph Toolkit involves the following steps:

  1. Ajoutez Microsoft Graph Toolkit à votre projet.Add Microsoft Graph Toolkit to your project.
  2. Initialisez le fournisseur MSAL.Initialize the MSAL Provider.
  3. Ajouter des composants.Add components.
  4. Testez votre application.Test your application.

Ajout de la boîte à outils Microsoft Graph à votre projetAdd the Microsoft Graph Toolkit to your project

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.

Utilisation via le chargeur de gestionUse via mgt-loader

Pour utiliser la boîte à outils via le chargeur de gestion, ajoutez la référence dans un script à votre code :To use the Toolkit via mgt-loader, add the reference in a script to your code:

<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 le package NPM à votre projet :To use the ES6 modules, add the npm package to your project:

npm install @microsoft/mgt

Remarque: Si vous ciblez un navigateur tel que IE11 qui ne prend pas en charge les composants Web en mode natif, vous devrez peut-être inclure des polyremplissages.Note: If you're targeting a browser such as IE11 that does not support web components natively, you might need to include polyfills.

À présent, vous pouvez référencer tous les composants de la boîte à outils dans votre application avec les éléments suivants :Now, you can reference the all the Toolkit components in your application with:

<script src="node_modules/@microsoft/mgt/dist/es6/components.js"></script>

Ou, ne faites référence qu’aux composants dont vous avez besoin et évitez de charger tout le reste.Or, reference only the components you need and avoid loading everything else. Par exemple, pour ajouter le fournisseur MSAL :For example, to add the MSAL Provider:

<script src="node_modules/@microsoft/mgt/dist/es6/components/providers/mgt-msal-provider.js"></script>

Initialiser le fournisseur MSALInitialize the MSAL 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 MSAL utilise MSAL.js pour se connecter aux utilisateurs et acquérir des jetons.The MSAL Provider uses MSAL.js to sign in users and acquire tokens. Vous pouvez initialiser le fournisseur MSAL dans votre code HTML ou JavaScript.You can initialize the MSAL provider in your HTML or JavaScript.

Si vous souhaitez utiliser votre propre authentification backend, utilisez le fournisseur de proxy à la place du fournisseur MSAL.If you would like to use your own backend authentication, use the Proxy Provider in place of the MSAL provider.

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 votre page HTMLInitialize in your HTML page

Ajoutez le mgt-msal-provider composant à votre page HTML et affectez client-id à l’ID client de l’application.Add the mgt-msal-provider component to your HTML page and set the client-id to your application client-id.

<mgt-msal-provider client-id="<YOUR_CLIENT_ID"></mgt-msal-provider>

Initialiser en JavaScriptInitialize in JavaScript

Pour initialiser le fournisseur MSAL dans votre code JavaScript, ajoutez le code suivant à votre application :To initialize the MSAL provider in your JavaScript, add the following code to your application:

import {Providers, MsalProvider} from '@microsoft/mgt'

Providers.globalProvider = new MsalProvider({
    clientId: "<YOUR_CLIENT_ID>"
})

L’ID client est la seule propriété requise pour initialiser le fournisseur, mais vous pouvez définir des options supplémentaires.The client ID is the only property required to initialize the provider, but you can set additional options. Pour obtenir la liste complète, consultez la rubrique fournisseur MSAL.For the full list, see Msal Provider.

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.

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.

Ajouter des composantsAdd components

Une fois que vous avez initialisé le fournisseur MSAL, vous pouvez commencer à utiliser l’un des composants de la boîte à outils.After you initialize the MSAL provider, you can start using any of the Toolkit components.

Voici un exemple de travail complet qui utilise le chargeur de gestion, le fournisseur MSAL initialisé au format HTML et le composant de connexion :The following is a full working example using mgt-loader, the MSAL Provider initialized in HTML, and the Login component:

<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
<mgt-msal-provider client-id="<YOUR_CLIENT_ID>"></mgt-msal-provider>
<mgt-login></mgt-login>

Voici un exemple d’utilisation des modules ES6, du fournisseur MSAL initialisé au format HTML et du composant de connexion :This is an example using the ES6 modules, the MSAL Provider initialized in HTML, and the Login component:

<script src="node_modules/@microsoft/mgt/dist/es6/components/providers/mgt-msal-provider.js"></script>
<script src="node_modules/@microsoft/mgt/dist/es6/components/mgt-login/mgt-login.js"></script>
<mgt-msal-provider client-id="<YOUR_CLIENT_ID>"></mgt-msal-provider>
<mgt-login></mgt-login>

Voici un exemple utilisant les modules ES6, le fournisseur MSAL initialisé dans JavaScript et le composant de connexion :This is an example using the ES6 modules, the MSAL Provider initialized in JavaScript, and the Login component:

import {Providers, MsalProvider} from '@microsoft/mgt'

Providers.globalProvider = new MsalProvider({
    clientId: "<YOUR_CLIENT_ID>"
})

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

document.body.appendChild((component()));

Tester votre applicationTest your app

Pour tester votre application, MSAL nécessite que la page soit hébergée sur un serveur Web pour les redirections d’authentification.In order to test your app, MSAL requires the page to be hosted in a web server for the authentication redirects.

Si vous débutez et que vous souhaitez vous lancer, vous pouvez utiliser Live Server dans Visual Studio code ou un serveur de développement léger similaire.If you're just getting started and want to play around, you can use Live Server in Visual Studio Code or any similar lightweight development server. Téléchargez l’extension et ouvrez votre fichier HTML à l’aide de Live Server.Download the extension and open your HTML file using live server.

Remarque : Assurez-vous que l' URI de redirection dans votre inscription de l’application est défini sur le port localhost sur lequel votre application est hébergée.Note: Make sure the redirect URI in your app registration is set to the localhost port your application is hosted on. Accédez à l’inscription de votre application dans le portail Azure, cliquez sur authentification sous gérer, puis ajoutez l' URI de redirectioncorrect.Go to your app registration in the Azure portal, click Authentication under manage, and add the correct redirect URI.

Étapes suivantesNext Steps