从 React 到 Web 的 MSAL 身份验证和授权 API
MSAL authentication and authorization from React to Web API
我不太理解 MSAL 身份验证和授权。我有一个用 React 开发的单页应用程序。我已通过在 Azure AD 上注册 Web 应用程序来设置 MSAL Azure SSO 身份验证。现在，我有一个 Web API（在 .Net Core 中），它在单独的应用程序服务上 运行。如何将身份验证从我的 React 应用程序集成到 Web API？
想到几个问题：
- 我是否必须像 React 应用一样注册网络 API 应用？
- 我是否必须将身份验证令牌从我的 React 应用程序传递到 Web API？
- 我是否必须仅在 Web API 端设置身份验证（使用 MSAL.Net），React App 将连接到它？
请分享您的想法。如果我能解释得更好，请告诉我。
Here is a complete video tutorial and source code 关于如何使用 MSAL 和 React 来调用 Microsoft Graph。
您的情况唯一不同的是，您将调用自己的 API。
而不是调用 Microsoft Graph
底线是 - 目前还没有用于 React 的直接集成包。这也可以从 msal-js 仓库的官方声明中读到：
After our current libraries are up to standards, we will begin
balancing new feature requests, with new platforms such as react and
node.js.
- 如果您同时是 React 应用和 Web 的作者API，您可以只注册一个应用并为两者使用 ClientId。
- 是的。如果您的 React 应用程序是独立应用程序（不是 Asp.net 应用程序的一部分），您可以使用 msal.js 登录 AzureAD，然后使用 openId 令牌登录您的网络 API。您还可以使用访问令牌直接从 React 访问受 Azure 保护的服务（例如 Microsoft Graph）。
- 如果您的 React 应用是 Asp.net 应用的一部分，您可以在服务器上设置身份验证。如果它是独立应用程序，则需要使用 2 中的方法。
如果您的 React 应用程序是独立应用程序，并且您打算从 Web API 访问 "downstream" API（如 Microsoft Graph），则需要实施 On-Behalf-您网站上的机制 API。用两个词：
- 用户使用 React 应用程序登录并使用 openId 令牌访问 Web API；
- Web API 根据客户端发送的令牌获取新的访问令牌
- Web API 使用此新访问令牌访问 Microsoft Graph。
您可以找到服务器端示例 here。
来自另一个答案的客户端示例在这种情况下有效，但您需要将行 openId 发送到 Web API 而不是访问令牌。
P.S。您也可以使用访问令牌而不是 idToken 来访问您的 WebAPI，但在这种情况下，您还需要在 Azure 中为您的 WebAPI 定义单独的范围。之后，您可以使用此范围访问您的 WebAPI 并使用单独的范围集访问 MS Graph。
我不太理解 MSAL 身份验证和授权。我有一个用 React 开发的单页应用程序。我已通过在 Azure AD 上注册 Web 应用程序来设置 MSAL Azure SSO 身份验证。现在，我有一个 Web API（在 .Net Core 中），它在单独的应用程序服务上 运行。如何将身份验证从我的 React 应用程序集成到 Web API？
想到几个问题：
- 我是否必须像 React 应用一样注册网络 API 应用？
- 我是否必须将身份验证令牌从我的 React 应用程序传递到 Web API？
- 我是否必须仅在 Web API 端设置身份验证（使用 MSAL.Net），React App 将连接到它？
请分享您的想法。如果我能解释得更好，请告诉我。
Here is a complete video tutorial and source code 关于如何使用 MSAL 和 React 来调用 Microsoft Graph。
您的情况唯一不同的是，您将调用自己的 API。
而不是调用 Microsoft Graph底线是 - 目前还没有用于 React 的直接集成包。这也可以从 msal-js 仓库的官方声明中读到：
After our current libraries are up to standards, we will begin balancing new feature requests, with new platforms such as react and node.js.
- 如果您同时是 React 应用和 Web 的作者API，您可以只注册一个应用并为两者使用 ClientId。
- 是的。如果您的 React 应用程序是独立应用程序（不是 Asp.net 应用程序的一部分），您可以使用 msal.js 登录 AzureAD，然后使用 openId 令牌登录您的网络 API。您还可以使用访问令牌直接从 React 访问受 Azure 保护的服务（例如 Microsoft Graph）。
- 如果您的 React 应用是 Asp.net 应用的一部分，您可以在服务器上设置身份验证。如果它是独立应用程序，则需要使用 2 中的方法。
如果您的 React 应用程序是独立应用程序，并且您打算从 Web API 访问 "downstream" API（如 Microsoft Graph），则需要实施 On-Behalf-您网站上的机制 API。用两个词： - 用户使用 React 应用程序登录并使用 openId 令牌访问 Web API； - Web API 根据客户端发送的令牌获取新的访问令牌 - Web API 使用此新访问令牌访问 Microsoft Graph。
您可以找到服务器端示例 here。 来自另一个答案的客户端示例在这种情况下有效，但您需要将行 openId 发送到 Web API 而不是访问令牌。
P.S。您也可以使用访问令牌而不是 idToken 来访问您的 WebAPI，但在这种情况下，您还需要在 Azure 中为您的 WebAPI 定义单独的范围。之后，您可以使用此范围访问您的 WebAPI 并使用单独的范围集访问 MS Graph。