Руководство. Вызов API Microsoft Graph из одностраничного приложения React

Статья
10/24/2023

Прежде чем взаимодействовать с одностраничным приложением (SPA), необходимо инициировать вызов API к Microsoft Graph и создать пользовательский интерфейс для приложения. После этого мы можем войти в приложение и получить данные профиля из API Microsoft Graph.

В этом руководстве рассматриваются следующие темы:

Создание вызова API в Microsoft Graph
Создание пользовательского интерфейса для приложения
Импорт и использование компонентов в приложении
Создание компонента, который отображает сведения о профиле пользователя
Вызов API из приложения

Необходимые компоненты

Завершение предварительных требований и шагов в руководстве. Создание компонентов для входа и выхода в одностраничное приложение React.

Создание вызова API в Microsoft Graph

Чтобы разрешить SPA запрашивать доступ к Microsoft Graph, необходимо добавить ссылку на graphConfig объект. Это содержит конечную точку REST API Graph, определенную в файле authConfig.js .

В папке src откройте graph.js и замените содержимое файла следующим фрагментом кода, чтобы запросить доступ к 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));
}

Обновление импорта для использования компонентов в приложении

Следующий фрагмент кода импортирует компоненты пользовательского интерфейса, созданные ранее в приложение. Он также импортирует необходимые компоненты из @azure/msal-react пакета. Эти компоненты будут использоваться для отрисовки пользовательского интерфейса и вызова API.

В папке src откройте App.jsx и замените содержимое файла следующим фрагментом кода, чтобы запросить доступ.

  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` Добавление функции

Функция ProfileContent используется для отрисовки сведений профиля пользователя после входа пользователя. Эта функция будет вызвана, когда пользователь нажимает кнопку "Сведения о профиле запроса".

В файле App.jsx добавьте следующий код ниже импорта:

/**
* 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` Добавление функции

Функция MainContent используется для отрисовки сведений профиля пользователя после входа пользователя. Эта функция будет вызвана, когда пользователь нажимает кнопку "Сведения о профиле запроса".

В файле App.jsx замените функцию App() следующим кодом:

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

Вызов API Microsoft Graph из приложения

Добавлены все необходимые фрагменты кода, поэтому приложение теперь можно вызывать и тестировать в веб-браузере.

Перейдите в браузер, ранее открытый в руководстве. Подготовка приложения для проверки подлинности. Если браузер закрыт, откройте новое окно с адресом http://localhost:3000/.
Нажмите кнопку Войти. В целях работы с этим руководством выберите вариант входа с помощью параметра Всплывающего окна .
После появления всплывающего окна с параметрами входа выберите учетную запись, с которой необходимо войти.
Второе окно может появиться, указывающее, что код будет отправлен на ваш адрес электронной почты. В этом случае выберите "Отправить код". Откройте сообщение электронной почты от команды учетной записи майкрософт отправителя и введите 7-значный код одноразового использования. После ввода нажмите кнопку "Войти".
Чтобы оставаться в системе, можно выбрать "Нет" или "Да".
Теперь приложение запрашивает разрешение на вход и доступ к данным. Нажмите кнопку "Принять ", чтобы продолжить.
Теперь spa отобразит кнопку с сообщением "Сведения о профиле запроса". Выберите его, чтобы отобразить данные профиля Microsoft Graph, полученные из API Microsoft Graph.