如何从 SPA 调用的 ASP.NET Core Web API 调用 Microsoft Graph API

Question

我有一个 Angular SPA 和一个 ASP.NET Core Web API 后端。我有一个 Azure 应用程序注册，SPA 配置为使用，我可以使用

@azure/msal-angular

和

@microsoft/microsoft-graph-client

直接从 SPA 进行图形 API 调用。

我现在想做的是让 SPA 调用 Web API，并让 Web API 代表登录用户进行 Graph API 调用。

我已经查阅了大量文档，但无法找到此场景的完整教程或找到关键问题的明确答案。

我是否需要为 SPA 和 ASP.NET Core Web API 单独注册应用程序，还是需要配置两个平台的单个应用程序注册？

Answer 1

我同意@Jack A，您需要在 Microsoft Entra ID 中进行两个单独的应用程序注册，一个用于 Angular SPA（客户端），一个用于 ASP.NET Core Web API（后端）。

• SPA 应用程序注册：这适用于 Angular 应用程序，它处理用户身份验证并检索访问令牌（通过 MSAL）以与 Web API 交互。 SPA 使用此访问令牌来验证其对 Web API 的请求。
• Web API 应用程序注册：这用于后端（ASP.NET Core Web API）。它验证来自 SPA 的传入请求，一旦用户通过身份验证，Web API 就可以使用授予的权限代表用户调用 Microsoft Graph API。

SPA 中的用户身份验证 -> SPA 调用 Web API -> Web API 验证令牌 -> Web API 调用 Graph API

创建 ASP.NET Core Web API 应用程序并公开 API 添加范围：

并在 ASP.NET Core Web API 应用程序中添加 Microsoft Graph API 权限：

在 Angular SPA Microsoft Entra ID 应用程序中，授予 ASP.NET Core Web API 的 API 权限：

对于 sample，我使用 Angular SPA 生成了访问令牌：

https://login.microsoftonline.com/tenantId/oauth2/v2.0/token

grant_type:authorization_code
client_id:ClientSPAappId
scope: api://xxxxxxxx/webapi.access
code: xxx
code_verifier:S256
redirect_uri: https://jwt.ms

上面生成的访问令牌可用于调用Web API。

现在生成代表流程访问令牌以调用 Microsoft Graph：

https://login.microsoftonline.com/tenantID/oauth2/v2.0/token

client_id:WebAPIappID
client_secret:WebAPIappSecret
scope: https://graph.microsoft.com/.default
grant_type: urn:ietf:params:oauth:grant-type:jwt-bearer
assertion:<paste_token_from_above_step>
requested_token_use:on_behalf_of

您可以使用此访问令牌来调用 Microsoft Graph API：

https://graph.microsoft.com/v1.0/users

例如，我通过 Rest API 生成了令牌，这也可以通过代码完成。

参考：

Microsoft 身份平台和 OAuth2.0 代表流程 - |微软