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

Question

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

想到的几个问题：

• 我是否必须注册Web API应用程序以及与我的React应用程序类似的内容？
• 我是否必须将auth令牌从我的React App传递到Web API？
• 我是否必须仅在Web API端（使用MSAL.Net）设置身份验证，然后React App会连接到它？

请分享您的想法。让我知道我是否可以更好地解释。

Answer 1

Here是一个完整的视频教程，也是source code的视频教程，介绍如何将MSAL与React一起使用来调用Microsoft Graph。

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

底线是-尚无直接集成软件包可用于响应。也可以从msal-js回购中的官方声明中读取：

  

在我们当前的库达到标准之后，我们将开始   通过新平台（例如反应和   node.js。

Answer 2

1. 如果您是React App和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。

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

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