Tutoriel : appeler l’API Microsoft Graph à partir d’une application monopage React

Article
10/25/2023

Avant de pouvoir interagir avec l’application monopage (SPA), nous devons lancer un appel d’API à Microsoft Graph et créer l’interface utilisateur (IU) de l’application. Une fois cet élément ajouté, nous pouvons nous connecter à l’application et obtenir des informations sur les données de profil à partir de l’API Microsoft Graph.

Dans ce tutoriel :

Créer l’appel d’API à Microsoft Graph
Créer une interface utilisateur pour l’application
Importer et utiliser des composants dans l’application
Créer un composant qui affiche des informations sur le profil d’un utilisateur
Appeler l’API à partir de l’application

Prérequis

Achèvement des conditions préalables et des étapes décrites dans Tutoriel : création de composants pour la connexion et la déconnexion dans une application monopage React.

Créer l’appel d’API à Microsoft Graph

Pour autoriser la SPA à demander l’accès à Microsoft Graph, vous devez ajouter une référence à l’objet graphConfig. Il contient le point de terminaison de l’API REST Graph défini dans le fichier authConfig.js.

Dans le dossier src, ouvrez graph.js et remplacez le contenu du fichier par l’extrait de code suivant pour demander l’accès à Microsoft Graph.

import { graphConfig } from "./authConfig";

/**
 * Attaches a given access token to a MS Graph API call. Returns information about the user
 * @param accessToken 
 */
export async function callMsGraph(accessToken) {
    const headers = new Headers();
    const bearer = `Bearer ${accessToken}`;

    headers.append("Authorization", bearer);

    const options = {
        method: "GET",
        headers: headers
    };

    return fetch(graphConfig.graphMeEndpoint, options)
        .then(response => response.json())
        .catch(error => console.log(error));
}

Mettre à jour les importations pour utiliser des composants dans l’application

L’extrait de code suivant importe les composants d’interface utilisateur qui ont été créés précédemment dans l’application. Il importe également les composants requis à partir du package @azure/msal-react. Ces composants seront utilisés pour restituer l’interface utilisateur et appeler l’API.

Dans le dossier src, ouvrez App.jsx et remplacez le contenu du fichier par l’extrait de code suivant pour demander l’accès.

  import React, { useState } from 'react';

  import { PageLayout } from './components/PageLayout';
  import { loginRequest } from './authConfig';
  import { callMsGraph } from './graph';
  import { ProfileData } from './components/ProfileData';

  import { AuthenticatedTemplate, UnauthenticatedTemplate, useMsal } from '@azure/msal-react';

  import './App.css';

  import Button from 'react-bootstrap/Button';

Ajouter la fonction `ProfileContent`

La fonction ProfileContent est utilisée pour restituer les informations de profil de l’utilisateur une fois que l’utilisateur s’est connecté. Cette fonction est appelée lorsque l’utilisateur sélectionne le bouton Demander des informations sur le profil.

Dans le fichier App.jsx, ajoutez le code suivant sous vos importations :

/**
* Renders information about the signed-in user or a button to retrieve data about the user
*/
const ProfileContent = () => {
    const { instance, accounts } = useMsal();
    const [graphData, setGraphData] = useState(null);

    function RequestProfileData() {
        // Silently acquires an access token which is then attached to a request for MS Graph data
        instance
            .acquireTokenSilent({
                ...loginRequest,
                account: accounts[0],
            })
            .then((response) => {
                callMsGraph(response.accessToken).then((response) => setGraphData(response));
            });
    }

    return (
        <>
            <h5 className="card-title">Welcome {accounts[0].name}</h5>
            <br/>
            {graphData ? (
                <ProfileData graphData={graphData} />
            ) : (
                <Button variant="secondary" onClick={RequestProfileData}>
                    Request Profile Information
                </Button>
            )}
        </>
    );
};

Ajouter la fonction `MainContent`

La fonction MainContent est utilisée pour restituer les informations de profil de l’utilisateur une fois que l’utilisateur s’est connecté. Cette fonction est appelée lorsque l’utilisateur sélectionne le bouton Demander des informations sur le profil.

Dans le fichier App.jsx, remplacez la fonction App() par le code suivant :

/**
* If a user is authenticated the ProfileContent component above is rendered. Otherwise a message indicating a user is not authenticated is rendered.
*/
const MainContent = () => {
    return (
        <div className="App">
            <AuthenticatedTemplate>
                <ProfileContent />
            </AuthenticatedTemplate>

            <UnauthenticatedTemplate>
                <h5>
                    <center>
                        Please sign-in to see your profile information.
                    </center>
                </h5>
            </UnauthenticatedTemplate>
        </div>
    );
};

export default function App() {
    return (
        <PageLayout>
            <center>
                <MainContent />
            </center>
        </PageLayout>
    );
}

Appeler l’API Microsoft Graph à partir de l’application

Tous les extraits de code requis ont été ajoutés, de sorte que l’application peut maintenant être appelée et testée dans un navigateur web.

Accédez au navigateur précédemment ouvert dans Tutoriel : préparer une application pour l’authentification. Si votre navigateur est fermé, ouvrez une nouvelle fenêtre avec l’adresse http://localhost:3000/.
Sélectionnez le bouton Se connecter. Pour les besoins de ce didacticiel, choisissez l’option Se connecter à l’aide d’une fenêtre contextuelle.
Une fois que la fenêtre contextuelle s’affiche avec les options de connexion, sélectionnez le compte avec lequel vous souhaitez vous connecter.
Il est possible qu’une deuxième fenêtre s’affiche pour indiquer qu’un code sera envoyé à votre adresse e-mail. Si cela se produit, sélectionnez Envoyer le code. Ouvrez l’e-mail de l’équipe du compte Microsoft de l’expéditeur et entrez le code à usage unique à 7 chiffres. Une fois celui-ci entré, sélectionnez Se connecter.
Pour Rester connecté, vous pouvez sélectionner Non ou Oui.
L’application demande maintenant l’autorisation de se connecter et d’accéder aux données. Sélectionnez Accepter pour continuer.
La SPA affiche maintenant un bouton indiquant Demander des informations de profil. Sélectionnez-le pour afficher les données de profil Microsoft Graph acquises à partir de l’API Microsoft Graph.