将 Microsoft Graph 工具包与 React 配合使用

项目
03/26/2023

Microsoft Graph 工具包是一组 Web 组件，可简化连接到 Microsoft Graph 并让你专注于应用程序。 Microsoft Graph 工具包作为一组通过 @microsoft/mgt npm 包分发的通用 Web 组件提供。

如果要使用 React 生成应用，则可以使用 @microsoft/mgt-react 包，它将 Microsoft Graph 工具包 Web 组件包装在 React 组件中，并使传递复杂数据更加容易。

本文介绍使用 Microsoft Graph 工具包创建React应用并将其连接到 Microsoft 365 的分步过程。完成这些步骤后，你将获得一个React应用，该应用显示 Microsoft 365 中当前登录用户的即将约会。

提示

还可以按照本教程作为交互式代码教程进行操作。有关详细信息，请参阅包含初学者项目的 GitHub 存储库。

先决条件

若要执行本文中的步骤，需要 Microsoft 365 开发环境和一些工具。有关详细信息，请参阅入门。

创建React应用

通过运行以下命令创建新的React应用。这将使用 TypeScript 创建新的React应用，这有助于编写更可靠的代码并避免运行时错误。

npx create-react-app my-m365-app --template typescript --use-npm

将工作目录更改为新创建的应用。

cd my-m365-app

接下来，安装 mgt-react npm 包，其中包含 Microsoft Graph 工具包React组件。

npm i @microsoft/mgt-react

同时安装 mgt-msal2-provider 和 mgt-element npm 包，其中包含 MSAL2 身份验证提供程序。

npm i @microsoft/mgt-element @microsoft/mgt-msal2-provider

确认可以运行应用。

npm start

你应该能够通过在浏览器中 http://localhost:3000打开应用。

创建 Azure Active Directory 应用

用于连接到 Microsoft 365 的 API Microsoft Graph 受 OAuth 2.0 保护。若要将应用连接到 Microsoft 365，需要在 Azure Active Directory (Azure AD) 中创建应用，并授予此应用代表使用应用的人员访问特定资源的权限。

按照创建 Azure Active Directory 应用一文中的步骤创建新的 Azure AD 应用。

将React应用连接到 Microsoft 365

现在，你已将应用程序注册到 Azure Active Directory (Azure AD) ，可以将 React 应用连接到 Microsoft 365。首先，允许用户使用其 Microsoft 帐户登录到应用。

复制 Azure AD 应用程序注册 ID

在 Azure 门户中，转到应用程序注册。
验证是否位于“ 概述 ”页上。
从 “Essentials ”部分中，复制 “应用程序 (客户端) ID ”属性的值

配置 Microsoft Graph 工具包身份验证提供程序

接下来，配置 Microsoft Graph 工具包应使用的身份验证提供程序。在这种情况下，你将使用 MSAL，这是生成独立应用程序的一个很好的默认值。如果使用 Microsoft 365 中的任何扩展点（如 Teams 或 SharePoint），将使用其他提供程序。

注意

如果当前正在使用 MSAL 提供程序，并且想要更新到 MSAL2 提供程序，请按照 MSAL2 提供程序一文中的步骤操作。

在代码编辑器中，打开 src/index.tsx 文件，并在导入列表中添加：

import { Providers } from '@microsoft/mgt-element';
import { Msal2Provider } from '@microsoft/mgt-msal2-provider';

在最后一条 import 语句之后，使用 MSAL 提供程序初始化 Microsoft Graph 工具包。
```
Providers.globalProvider = new Msal2Provider({
  clientId: 'REPLACE_WITH_CLIENTID'
});
```
将属性的值 clientId 替换为之前在 Azure 门户中复制的属性的值 Application (client) ID 。

通过这些更改， src/index.tsx 文件将如下所示。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import * as serviceWorker from './serviceWorker';

import { Providers } from '@microsoft/mgt-element';
import { Msal2Provider } from '@microsoft/mgt-msal2-provider';

Providers.globalProvider = new Msal2Provider({
  clientId: 'REPLACE_WITH_CLIENTID'
});

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

添加登录 Microsoft Graph 工具包React组件，该组件将显示用户可以使用其 Microsoft 帐户登录应用的“登录”按钮。

在代码编辑器中，打开 src/App.tsx 文件，并在导入列表中添加：
```
import { Login } from '@microsoft/mgt-react';
```
App在函数中，将子句的内容return替换为基本结构，包括 Microsoft Graph 工具包登录组件：
```
<div className="App">
  <header>
    <Login />
  </header>
</div>
```

通过这些更改， src/App.tsx 文件将如下所示。


import { Login } from '@microsoft/mgt-react';
import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header>
        <Login />
      </header>
    </div>
  );
}

export default App;

测试登录到应用程序

现在应该可以使用 Microsoft 帐户登录到应用程序。

返回到运行 React 应用的浏览器。现在应会看到“ 登录 ”按钮。
单击“ 登录 ”按钮时，系统会提示你使用 Microsoft 帐户登录， (可以使用与使用) 访问 Azure 门户的帐户相同的帐户。
由于这是你第一次使用此 Azure AD 应用程序，因此需要同意在组织中使用它。
登录后，你将重定向到React应用。请注意，“登录”按钮已更改，显示用户名。

从 Microsoft 365 加载数据

Microsoft Graph 工具包不仅简化了对 Microsoft 365 的身份验证，还简化了数据加载。在此示例中，你将显示登录人员的日历。

指定应用程序所需的权限

在从 Microsoft 365 加载数据之前，需要指定必须授予应用程序访问用户数据的权限范围列表。这些范围因要显示的信息类型而异。在这种情况下，你将需要访问人员日历，以及对日历中显示的人员信息的基本访问权限。可以在 Microsoft 图形 API 文档中找到每个 API 所需的范围。

在代码编辑器中，打开 src/index.tsx 文件，并更新提供程序初始化代码。

Providers.globalProvider = new Msal2Provider({
  clientId: 'REPLACE_WITH_CLIENTID',
  scopes: ['calendars.read', 'user.read', 'openid', 'profile', 'people.read', 'user.readbasic.all']
});

登录后显示用户的数据

接下来，扩展应用程序以显示用户日历中的数据。只有在用户登录后才能访问此信息。为此，你需要跟踪用户的登录状态，并在用户使用其 Microsoft 帐户登录后显示日历数据。

若要在应用程序中跟踪用户的登录状态，请将ReactuseState和useEffect挂钩与提供程序事件处理程序结合使用。

在代码编辑器中，打开 src/App.tsx 文件并扩展现有的 React import 语句。
```
import React, { useState, useEffect } from 'react';
```
Provider通过将添加到导入项，从 mgt-element中导入和 ProviderState 类型。
```
import { Providers, ProviderState } from '@microsoft/mgt-element';
```

添加一个名为 useIsSignedIn 的自定义函数，用于跟踪应用程序中的用户登录状态。

function useIsSignedIn(): [boolean] {
  const [isSignedIn, setIsSignedIn] = useState(false);

  useEffect(() => {
    const updateState = () => {
      const provider = Providers.globalProvider;
      setIsSignedIn(provider && provider.state === ProviderState.SignedIn);
    };

    Providers.onProviderUpdated(updateState);
    updateState();

    return () => {
      Providers.removeProviderUpdatedListener(updateState);
    }
  }, []);

  return [isSignedIn];
}

此函数执行两项操作。首先，使用 React useState 挂钩，它可以在组件内启用跟踪状态。每当状态更改时，React都会重新呈现组件。其次，使用 React useEffect 挂钩，它通过跟踪 Microsoft Graph 工具包提供程序中的更改并在必要时更新组件来延长组件的生命周期。

如果用户已登录，则加载用户的日历

在应用程序中跟踪用户的登录状态后，可以在用户登录后显示其日历。

在代码编辑器中，打开 src/App.tsx 文件，并使用 Agenda 组件扩展组件import语句。
```
import { Agenda, Login } from '@microsoft/mgt-react';
```
接下来，在 App 函数内添加：
```
const [isSignedIn] = useIsSignedIn();
```
这将定义一个布尔 isSignedIn 常量，可用于确定用户当前是否登录到应用程序。
使用附加div和 return Microsoft Graph 工具包议程组件扩展子句的内容。
```
<div>
  {isSignedIn &&
    <Agenda />}
</div>
```

通过这些更改， src/App.tsx 文件应如下所示。

import { Providers, ProviderState } from '@microsoft/mgt-element';
import { Agenda, Login } from '@microsoft/mgt-react';
import React, { useState, useEffect } from 'react';
import './App.css';

function useIsSignedIn(): [boolean] {
  const [isSignedIn, setIsSignedIn] = useState(false);

  useEffect(() => {
    const updateState = () => {
      const provider = Providers.globalProvider;
      setIsSignedIn(provider && provider.state === ProviderState.SignedIn);
    };

    Providers.onProviderUpdated(updateState);
    updateState();

    return () => {
      Providers.removeProviderUpdatedListener(updateState);
    }
  }, []);

  return [isSignedIn];
}

function App() {
  const [isSignedIn] = useIsSignedIn();

  return (
    <div className="App">
      <header>
        <Login />
      </header>
      <div>
        {isSignedIn &&
          <Agenda />}
      </div>
    </div>
  );
}

export default App;

测试显示用户登录后的日历

通过这些更改，使用 Microsoft 帐户登录到应用程序后，应会看到日历。

若要查看更改，请关闭浏览器并再次打开，然后转到 http://localhost:3000。这样做是因为更改了属性的值 scopes ，这会影响从 Azure AD 请求的访问令牌。
选择“ 登录 ”按钮，然后使用 Microsoft 帐户登录。请注意，同意提示中请求的权限列表的新增内容。这是因为你在属性中包含 scope 其他权限。
同意使用应用程序后，应会看到有关当前用户及其日历的信息。

已完成的应用

后续步骤

查看 Microsoft Graph 工具包中的内容。
在样本中试用组件。
在 Stack Overflow 上提问。
在 GitHub 上报告 bug 或提出功能请求。

将 Microsoft Graph 工具包与 React 配合使用

先决条件

创建React应用

创建 Azure Active Directory 应用

将React应用连接到 Microsoft 365

复制 Azure AD 应用程序注册 ID

配置 Microsoft Graph 工具包身份验证提供程序

测试登录到应用程序

从 Microsoft 365 加载数据

指定应用程序所需的权限

登录后显示用户的数据

如果用户已登录，则加载用户的日历

测试显示用户登录后的日历

后续步骤

其他资源

其他资源

将 Microsoft Graph 工具包与 React 配合使用

先决条件

创建React应用

创建 Azure Active Directory 应用

将React应用连接到 Microsoft 365

复制 Azure AD 应用程序注册 ID

配置 Microsoft Graph 工具包身份验证提供程序

添加“登录”按钮

测试登录到应用程序

从 Microsoft 365 加载数据

指定应用程序所需的权限

登录后显示用户的数据

跟踪用户的登录状态

如果用户已登录，则加载用户的日历

测试显示用户登录后的日历

后续步骤

其他资源

其他资源