Oktatóanyag: A Microsoft Graph API meghívása egy egyoldalas React-alkalmazásból

Cikk
10/24/2023

Az egyoldalas alkalmazás (SPA) használata előtt api-hívást kell kezdeményeznünk a Microsoft Graphhoz, és létre kell hoznunk az alkalmazás felhasználói felületét (UI). A hozzáadás után bejelentkezhetünk az alkalmazásba, és lekérhetjük a profiladatok adatait a Microsoft Graph API-ból.

Ebben az oktatóanyagban:

API-hívás létrehozása a Microsoft Graphhoz
Felhasználói felület létrehozása az alkalmazáshoz
Összetevők importálása és használata az alkalmazásban
A felhasználó profiladatait megjelenítő összetevő létrehozása
Az API meghívása az alkalmazásból

Előfeltételek

Az oktatóanyag előfeltételeinek és lépéseinek elvégzése: Összetevők létrehozása a bejelentkezéshez és kijelentkezéshez egy egyoldalas React-alkalmazásban.

API-hívás létrehozása a Microsoft Graphhoz

Ahhoz, hogy az SPA hozzáférést kérjen a Microsoft Graphhoz, hozzá kell adni az graphConfig objektumra mutató hivatkozást. Ez authConfig.js fájlban definiált Graph REST API-végpontot tartalmazza.

Az src mappában nyissa meg a graph.js, és cserélje le a fájl tartalmát a következő kódrészletre, hogy hozzáférést kérjen a Microsoft Graphhoz.

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));
}

Az importálás frissítése az alkalmazás összetevőinek használatára

Az alábbi kódrészlet importálja a korábban létrehozott felhasználói felületi összetevőket az alkalmazásba. Emellett importálja a szükséges összetevőket a @azure/msal-react csomagból. Ezek az összetevők a felhasználói felület megjelenítésére és az API meghívására szolgálnak.

Az src mappában nyissa meg az App.jsx fájlt, és cserélje le a fájl tartalmát a következő kódrészletre a hozzáférés kéréséhez.

  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';

A `ProfileContent` függvény hozzáadása

A ProfileContent függvény a felhasználó profiladatainak megjelenítésére szolgál, miután a felhasználó bejelentkezett. Ez a függvény akkor lesz meghívva, amikor a felhasználó kiválasztja a Profiladatok kérése gombot.

Az App.jsx fájlban adja hozzá a következő kódot az importálások alá:

/**
* 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>
            )}
        </>
    );
};

A `MainContent` függvény hozzáadása

A MainContent függvény a felhasználó profiladatainak megjelenítésére szolgál, miután a felhasználó bejelentkezett. Ez a függvény akkor lesz meghívva, amikor a felhasználó kiválasztja a Profiladatok kérése gombot.

Az App.jsx fájlban cserélje le a függvényt App() a következő kódra:

/**
* 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>
    );
}

A Microsoft Graph API meghívása az alkalmazásból

Az összes szükséges kódrészlet hozzá lett adva, így az alkalmazás mostantól meghívható és tesztelhető egy webböngészőben.

Lépjen a korábban megnyitott böngészőre az oktatóanyagban : Alkalmazás előkészítése hitelesítéshez. Ha a böngésző bezárult, nyisson meg egy új ablakot a címmel http://localhost:3000/.
Válassza a Bejelentkezés gombot. Az oktatóanyag alkalmazásában válassza a Bejelentkezés előugró ablak használatával lehetőséget.
Miután megjelenik az előugró ablak a bejelentkezési beállításokkal, válassza ki azt a fiókot, amellyel be szeretne jelentkezni.
Egy második ablak jelenhet meg, amely azt jelzi, hogy a rendszer egy kódot küld az e-mail-címre. Ha ez történik, válassza a Kód küldése lehetőséget. Nyissa meg a küldő Microsoft-fiók csapatától kapott e-mailt, és adja meg a 7 számjegyű egyszer használatos kódot. Miután beírta, válassza a Bejelentkezés lehetőséget.
Ha be van jelentkezve, válassza a Nem vagy az Igen lehetőséget.
Az alkalmazás most engedélyt kér a bejelentkezéshez és az adatok eléréséhez. A folytatáshoz válassza az Elfogadás lehetőséget.
A SPA ekkor megjelenik egy gomb, amely a Profiladatok kérése gombra mutat. Válassza ki a Microsoft Graph API-ból beszerzett Microsoft Graph-profiladatok megjelenítéséhez.