Exercice : connecter une application JavaScript à Microsoft 365

  • 12 minutes

Dans cet exercice, vous allez créer une application JavaScript connectée à Microsoft 365. Vous allez utiliser la bibliothèque JavaScript de Microsoft Authentification Library pour permettre aux utilisateurs de se connecter à votre application à l’aide de leur compte Microsoft 365. Leur nom sera ensuite affiché à l’aide du kit de développement logiciel (SDK) JavaScript Microsoft Graph.

Exécuter votre application

  1. Pour obtenir le code d’application initial utilisé dans cet exercice, choisissez l’une de ces options :

    Si vous utilisez Git, clonez le projet à l’aide de la commande git clone :

    git clone https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart.git

    Si vous n’utilisez pas de compte git, accédez à https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart dans le navigateur web. Sélectionnez le bouton Code, suivi de Télécharger le fichier ZIP. Extrayez le fichier zip sur votre machine.

  2. Ouvrez le fichier dans votre éditeur de code.

  3. Ouvrez le fichier auth.js et recherchez la constante msalConfig:

    const msalConfig = {
    auth: { .. }
}

  4. Remplacez la valeur de la clientId propriété par la valeur d’ID d’application (client) copiée de l’application Microsoft Entra (spa-aad-app) que vous avez inscrite précédemment. Vous pouvez obtenir cette valeur à partir de la page de vue d’ensemble de l’application Microsoft Entra (spa-aad-app).

  5. Dans le même fichier auth.js , recherchez la msalConfig.auth.authority propriété . Remplacez la <your directory ID here> valeur par la valeur d’ID d’annuaire (locataire) de l’application Microsoft Entra (spa-aad-app) que vous avez inscrite précédemment. Vous pouvez obtenir cette valeur à partir de la page de vue d’ensemble de l’application Microsoft Entra (spa-aad-app).

    La msalConfig constante doit ressembler au code suivant, avec les ID uniques de votre client Microsoft Entra et de votre application inscrite :

    const msalConfig = {
  auth: {
    clientId: 'b1a37248-53b5-430c-b946-ef83521af70c',
    authority: 'https://login.microsoftonline.com/b930540b-a147-45bb-8f24-bfbed091aa25',
    redirectUri: 'http://localhost:8080'
  }
};

  6. Affichez un aperçu de l’application web en exécutant la commande suivante dans le terminal :

    npm start

  7. Votre navigateur par défaut doit s’ouvrir et pointer vers http://localhost:8080.

  8. Sélectionnez Se connecter avec Microsoft pour vous connecter avec votre compte Microsoft 365.

  9. Une fois connecté avec votre compte, et après avoir accepté l’application, l’application doit afficher votre nom d’utilisateur.

  10. Arrêtez le serveur Node.js en sélectionnant CTRL+C dans la fenêtre du terminal.