前言：Microsoft Graph API 是一个崭新的 RESTful web API，为开发人员提供了一种简单的方式来访问微软云产品的数据和其他资源。在本文中，我们将探讨如何在 Angular 应用程序中使用 Microsoft Graph API。
步骤一：准备工作
使用 Microsoft Graph API，我们需要注册一个应用程序并获取一个授权的访问令牌。为此，请登录 Azure 门户 并创建一个新的应用程序注册表。
在新的应用程序注册表中，首先需要创建一个新的客户端密钥。在“证书和秘密”选项卡上，单击“新客户端密码”，然后提供必需的详细信息，并生成一个新的密钥。请务必记下这个密钥，因为之后将需要使用它来访问 Microsoft Graph API。
接下来，我们需要为我们的应用程序添加授权范围。在“API 权限”选项卡上，单击“添加权限”，然后选择“Microsoft Graph”作为目标 API。此外，我们还需要选择我们要访问的权限。例如，如果我们想要访问用户邮箱，则需要添加“邮件”权限。
最后，在“证书和秘密”选项卡上，单击“生成令牌”，然后复制生成的令牌。我们将在 Angular 应用程序中使用这个令牌来获得访问 Microsoft Graph API 的权限。
步骤二：安装 Microsoft Graph SDK
为了更方便地使用 Microsoft Graph API，我们可以使用微软提供的 Microsoft Graph SDK。该 SDK 可用于 Angular 应用程序，并提供了访问 Graph API 的方法和类型定义。
要安装 Microsoft Graph SDK，请运行以下命令：
npm install @microsoft/microsoft-graph-client
这将安装 Microsoft Graph SDK 并将其添加到 Angular 应用程序的依赖项。
步骤三：使用 Microsoft Graph SDK
现在，我们可以开始在 Angular 应用程序中使用 Microsoft Graph SDK。
首先，我们需要通过 AuthenticationProvider 来提供授权令牌。下面是一个示例 AuthenticationProvider 的代码：
-- -------------------- ---- -------
------ - ----------------------- ----------------------------- - ---- ------------------------------------
------ ----- --------------------------- ---------- ---------------------- -
------- ------------ -------
------------------------ ------- -
---------------- - ------------
-
------ ----- ----------------------------------- ------------------------------- ------------- -
---------------------- - -
--------------------------
-------------- ------- ---------------------
--
-
-在上面的代码中，我们实现了 AuthenticationProvider 接口，并将授权令牌作为构造函数的参数传递。在 authenticateRequest 方法中，我们将授权令牌添加到发出的请求中的 Authorization 标头上。
接下来，我们可以创建一个 GraphServiceClient 实例并使用它来访问 Microsoft Graph API。下面是一个示例的 GraphServiceClient 的代码：
-- -------------------- ---- -------
------ - ------ - ---- ------------------------------------
------ - --------------------------- - ---- ----------------------------------
------ ----- ------------ -
------- ------- -------
------------------- ------------ ------- -
----- ------------ - --- -----------------------------------------
----------- - -------------
-------------
---
-
------ ----- ----------------- ------------ -
------ ----- -----------------------------
-
-在上面的代码中，我们创建了一个 GraphService 类，并在构造函数中传入授权令牌。然后我们使用 GraphAuthenticationProvider 创建了一个 Client 实例，并将其作为参数传递。最后，我们可以使用 this.client 来访问 Microsoft Graph API 中的任何端点。例如，在上面的代码中，我们使用 this.client.api('/me') 来访问当前用户的详细信息。
步骤四：使用示例
现在，我们已经准备好在 Angular 应用程序中使用 Microsoft Graph API 了。我们将创建一个简单的组件来演示如何使用 GraphService 类来获得当前用户的详细信息。下面是一个示例组件的代码：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------ - ---- ------------------
------------
--------- -------------------
------------ --------------------------------
--
------ ----- -------------------- ---------- ------ -
------ ------------ ----
------------------- ------------- ------------- --
----------- ---- -
------------------------------------------------ -- -
---------------- - -------
---
-
-在上面的代码中，我们创建了一个名为 UserDetailsComponent 的组件，并将 GraphService 作为其构造函数的参数。在 ngOnInit 生命周期挂钩中，我们调用 this.graphService.getUserDetails() 方法，并将返回的结果存储在 userDetails 变量中。我们将在 HTML 中使用 userDetails 变量来显示用户的详细信息。
下面是一个示例 HTML 文件的代码：
<div *ngIf="userDetails">
<h1>{{userDetails.displayName}}</h1>
<h2>{{userDetails.jobTitle}}</h2>
<p>{{userDetails.mail}}</p>
</div>在上面的代码中，我们使用 *ngIf="userDetails" 指令来检查 userDetails 变量是否已经填充。如果是，则显示用户的详细信息，包括他们的显示名称，工作职位和电子邮件地址。
结论
在本文中，我们探讨了如何在 Angular 应用程序中使用 Microsoft Graph API。我们首先进行了一些准备工作，例如注册应用程序并生成一个授权令牌。然后，我们安装了 Microsoft Graph SDK 并使用 GraphAuthenticationProvider 和 GraphServiceClient 实现了访问 Microsoft Graph API 的方法。最后，我们展示了一个示例组件，说明如何在 Angular 应用程序中使用 GraphService 类来获得当前用户的详细信息。这将帮助您更好地理解如何在实际应用程序中使用 Microsoft Graph API，并从中受益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6700e5b20bef792019adbb29