Kurz: Volání rozhraní Microsoft Graph API z jednostráňové aplikace React

Článek
10/24/2023

Než budeme moct pracovat s jednostránkovou aplikací (SPA), musíme iniciovat volání rozhraní API do Microsoft Graphu a vytvořit uživatelské rozhraní pro aplikaci. Po přidání se můžeme přihlásit k aplikaci a získat informace o profilech z rozhraní Microsoft Graph API.

V tomto kurzu:

Vytvoření volání rozhraní API do Microsoft Graphu
Vytvoření uživatelského rozhraní pro aplikaci
Import a použití komponent v aplikaci
Vytvoření komponenty, která vykreslí informace o profilu uživatele
Volání rozhraní API z aplikace

Požadavky

Dokončení požadavků a kroků v kurzu: Vytvoření komponent pro přihlášení a odhlášení v jednostráňové aplikaci React

Vytvoření volání rozhraní API do Microsoft Graphu

Aby služba SPA mohla požádat o přístup k Microsoft Graphu, je potřeba přidat odkaz na graphConfig objekt. Obsahuje koncový bod rozhraní Graph REST API definovaný v souboru authConfig.js .

Ve složce src otevřete graph.js a nahraďte obsah souboru následujícím fragmentem kódu a požádejte o přístup k Microsoft Graphu.

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

Aktualizace importů tak, aby používaly komponenty v aplikaci

Následující fragment kódu naimportuje součásti uživatelského rozhraní vytvořené dříve do aplikace. Také importuje požadované součásti z @azure/msal-react balíčku. Tyto komponenty se použijí k vykreslení uživatelského rozhraní a volání rozhraní API.

Ve složce src otevřete App.jsx a nahraďte obsah souboru následujícím fragmentem kódu, který požádá o přístup.

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

`ProfileContent` Přidání funkce

Funkce ProfileContent slouží k vykreslení informací o profilu uživatele po přihlášení uživatele. Tato funkce bude volána, když uživatel vybere tlačítko Informace o profilu požadavku.

Do souboru App.jsx přidejte následující kód pod importy:

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

`MainContent` Přidání funkce

Funkce MainContent slouží k vykreslení informací o profilu uživatele po přihlášení uživatele. Tato funkce bude volána, když uživatel vybere tlačítko Informace o profilu požadavku.

V souboru App.jsx nahraďte App() funkci následujícím kódem:

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

Volání rozhraní Microsoft Graph API z aplikace

Byly přidány všechny požadované fragmenty kódu, takže aplikaci je možné volat a testovat ve webovém prohlížeči.

Přejděte do prohlížeče, který jste dříve otevřeli v kurzu: Příprava aplikace na ověřování. Pokud je prohlížeč zavřený, otevřete nové okno s adresou http://localhost:3000/.
Vyberte tlačítko Přihlásit se. Pro účely tohoto kurzu zvolte možnost Přihlásit se pomocí místní nabídky .
Po zobrazení automaticky otevíraných oken s možnostmi přihlášení vyberte účet, pomocí kterého se chcete přihlásit.
Může se zobrazit druhé okno, které značí, že se na vaši e-mailovou adresu odešle kód. Pokud k tomu dojde, vyberte Odeslat kód. Otevřete e-mail od týmu účtu Microsoft odesílatele a zadejte 7místný kód pro jedno použití. Po zadání vyberte Přihlásit se.
U možnosti Zůstat přihlášeni můžete vybrat možnost Ne nebo Ano.
Aplikace teď požádá o oprávnění k přihlášení a přístupu k datům. Pokračujte výběrem možnosti Přijmout .
Spa teď zobrazí tlačítko s informací o profilu žádosti. Výběrem zobrazíte data profilu Microsoft Graphu získaná z rozhraní Microsoft Graph API.