从 React 到 Web API 的 MSAL 身份验证和授权

Question

我在理解 MSAL 身份验证和授权时遇到了一些麻烦。我有一个用 React 开发的单页应用程序。我已通过在 Azure AD 上注册 Web 应用程序来设置 MSAL Azure SSO 身份验证。现在，我有一个在单独的应用程序服务上运行的 Web API（在 .Net Core 中）。如何将 React 应用程序的身份验证集成到 Web API？

想到几个问题：

• 我是否必须注册类似于我的 React 应用程序的 Web API 应用程序？
• 我是否必须将身份验证令牌从我的 React 应用程序传递到 Web API？
• 我是否必须仅在 Web API 端（使用 MSAL.Net）设置身份验证并且 React 应用程序将连接到它？

请分享您的想法。如果我能解释得更好，请告诉我。

Answer 1

1. 如果您是 React 应用程序和 Web API 的作者，则可以仅注册一个应用程序并为这两个应用程序使用 ClientId。
2. 是的。如果您的 React 应用程序是独立应用程序（不是 Asp.net 应用程序的一部分），您可以使用 msal.js 通过 AzureAD 登录，然后使用 openId 令牌登录您的 Web API。您还可以使用访问令牌直接从 React 访问受 Azure 保护的服务（例如 Microsoft Graph）。
3. 如果您的 React 应用程序是 Asp.net 应用程序的一部分，您可以在服务器上设置 Auth。如果它是独立应用程序，您需要使用 2 中的方法。

如果您的 React 应用程序是独立应用程序，并且要从 Web API 访问“下游”API（例如 Microsoft Graph），则需要在 Web API 上实现 On-Behalf-Of 机制。简而言之： - 用户使用 React 应用程序登录并使用 openId 令牌访问 Web API；- Web API 根据从客户端发送的令牌获取新的访问令牌 - Web API 使用此新的访问令牌访问 Microsoft Graph。

您可以在此处找到服务器端示例。另一个答案中的客户端示例在这种情况下有效，但您需要将行 openId 发送到 Web API，而不是访问令牌。

PS 您也可以使用访问令牌而不是 idToken 来访问您的 WebAPI，但在这种情况下，您还需要在 Azure 中为 WebAPI 定义单独的范围。之后，您可以使用此范围来访问您的 WebAPI 并使用单独的一组范围来访问 MS Graph。

Answer 2

这是关于如何使用 MSAL 和 React 调用 Microsoft Graph的完整视频教程和源代码。

您的情况唯一不同的是，您将调用自己的 API，而不是调用 Microsoft Graph。

底线是 - 还没有用于反应的直接集成包。也可以从msal-js 存储库的官方声明中读取：

在我们当前的库达到标准后，我们​​将开始平衡新功能请求，使用新平台，例如react和 node.js。