자습서: React 단일 페이지 앱에서 Microsoft Graph API 호출

아티클
12/11/2023

SPA(단일 페이지 앱)와 상호 작용하려면 먼저 Microsoft Graph에 대한 API 호출을 시작하고 애플리케이션에 대한 UI(사용자 인터페이스)를 만들어야 합니다. 이를 추가한 후 애플리케이션에 로그인하고 Microsoft Graph API에서 프로필 데이터 정보를 가져올 수 있습니다.

이 자습서에서:

Microsoft Graph에 대한 API 호출 만들기
애플리케이션용 UI 만들기
애플리케이션에서 구성 요소 가져오기 및 사용
사용자의 프로필 정보를 렌더링하는 구성 요소를 만듭니다.
애플리케이션에서 API 호출

필수 조건

자습서: React 단일 페이지 앱에서 로그인 및 로그아웃을 위한 구성 요소 만들기의 필수 조건과 단계를 완료합니다.

Microsoft Graph에 대한 API 호출 만들기

SPA가 Microsoft Graph에 대한 액세스를 요청하도록 허용하려면 graphConfig 개체에 대한 참조를 추가해야 합니다. 여기에는 authConfig.js 파일에 정의된 Graph REST API 엔드포인트가 포함되어 있습니다.

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

애플리케이션에서 구성 요소를 사용하도록 가져오기 업데이트

다음 코드 조각은 이전에 만든 UI 구성 요소를 애플리케이션으로 가져옵니다. 또한 @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>
    );
}

애플리케이션에서 Microsoft Graph API 호출

필요한 모든 코드 조각이 추가되었으므로 이제 웹 브라우저에서 애플리케이션을 호출하고 테스트할 수 있습니다.

이전에 자습서: 인증을 위한 애플리케이션 준비에서 열었던 브라우저로 이동합니다. 브라우저가 닫혀 있으면 주소가 http://localhost:3000/인 새 창을 엽니다.
로그인 단추를 선택합니다. 이 자습서에서는 팝업을 사용하여 로그인 옵션을 선택합니다.
로그인 옵션이 포함된 팝업 창이 나타나면 로그인할 계정을 선택합니다.
코드가 이메일 주소로 전송된다는 것을 나타내는 두 번째 창이 나타날 수 있습니다. 이런 경우에는 코드 보내기를 선택합니다. 보낸 사람 Microsoft 계정 팀에서 보낸 이메일을 열고 7자리 일회용 코드를 입력합니다. 입력한 후 로그인을 선택합니다.
로그인 상태 유지에서 아니요 또는 예를 선택할 수 있습니다.
이제 앱에서 로그인 및 데이터 액세스 권한을 요청합니다. 수락을 선택하여 계속합니다.
이제 SPA에 프로필 정보 요청 단추가 표시됩니다. Microsoft Graph API에서 획득한 Microsoft Graph 프로필 데이터를 표시하려면 선택합니다.