教程：从 React 单页应用调用 API - Microsoft Entra

创建 Microsoft Graph 客户端帮助程序

若要允许 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));
 * 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));
    
     更改文件名并添加需要的导入项
    
    
     默认情况下，应用程序通过名为
     
      App.js
     
     的 JavaScript 文件运行。 需要将其更改为
     
      App.jsx
     
     文件，该文件是一个扩展程序，它允许开发人员使用 React编写 HTML。

将 App.js 重命名为 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>
            {graphData ? (
                <ProfileData graphData={graphData} />
            ) : (
                <Button variant="secondary" onClick={RequestProfileData}>
                    Request Profile Information
                </Button>
替换默认函数以呈现经过身份验证的信息
以下代码是否呈现取决于用户是否经过身份验。 替换默认函数 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>
                    <center>
                        Please sign-in to see your profile information.
                    </center>
            </UnauthenticatedTemplate>
export default function App() {
    return (
        <PageLayout>
            <center>
                <MainContent />
            </center>
        </PageLayout>
从应用程序调用 API
所有需要的代码片段均已添加，因此，现在可以在 Web 浏览器中调用和测试应用程序。
导航到先前在教程：准备应用程序进行身份验证中打开的浏览器。 如果浏览器已关闭，请通过地址 http://localhost:3000/ 打开一个新窗口。
选择“登录”按钮。 在本教程中，请选择“使用弹出窗口登录”选项。
登录选项中显示弹出窗口后，选择要用于登录的帐户。
此时可能会显示另一个窗口，指示代码将发送到你的电子邮件地址。 如果发生这种情况，请选择“发送代码”。 打开来自发件人 Microsoft 帐户团队的电子邮件，然后输入 7 位数的一次性代码。 输入后，选择“登录”。
对于“保持登录状态”，可以选择“否”或“是”。
应用现在会请求登录和访问数据的权限。 选择“接受”以继续操作。
SPA 现在将会显示一个按钮，该按钮上显示“请求配置文件信息”。 选中该按钮即可显示从 Microsoft Graph API 获取的 Microsoft Graph 配置文件数据。