Azure AD 保护来自 Angular 前端的 .Net Core Web API 3.1 返回 401 和 MSAL答案

【问题标题】：Azure AD secured .Net Core Web API 3.1 from Angular Frontend returns 401 with MSALAzure AD 保护来自 Angular 前端的 .Net Core Web API 3.1 返回 401 和 MSAL
【发布时间】：2020-07-05 10:52:07
【问题描述】：

我正在尝试通过 Angular 9 前端 访问安全的 .net core 3.1 Web API。我使用了来自 MSAL Angular repo 的 Angular 9 代码示例。

我可以使用我自己的 Azure AD 应用注册成功登录，但在调用我的端点（用 [Authorize] 装饰）时，我在前端和邮递员（预期）中收到 401。

我的 Angular 拦截器甚至没有将请求中的不记名令牌添加到 API，因为 getScopesForEndpoint() 为请求返回 null：

let scopes = this.auth.getScopesForEndpoint(req.url);
console.log(scopes); 
// scopes is null here.

如果我像这样将作用域硬编码到拦截器中：

scopes = [
    "user.read",
    "openid",
    "profile",
    "api://[My API ID]/weatherforecast"
];

我收到此错误：

InteractionRequiredAuthError: AADSTS65001: The user or administrator has not consented to use the 
application with ID '[MY APP CLIENT ID]' named '[MY APP]'. Send an interactive 
authorization request for this user and resource.

我在此处遵循本教程：Tutorial 并将我的 Azure AD 配置为与此非常相似。唯一的重大变化是我允许 MutiTenant 而不是 SingleTenant：

根据错误，我的 Angular 应用似乎没有向 API 注册，但我认为这就是 Azure AD 中的内容：

我是否错过了允许我的应用调用我的 API 的授权端点的步骤？这是一个帖子，与我遵循的设置非常相似 Related SO Post。唯一的区别是我的 Web API 在https://localhost:44381/weatherforecast 上，而不是部署到 Azure。接受的答案似乎对我的情况没有帮助。这里还有另一个非常相似的帖子：Related SO Post 2，但答案是关于 Cors 问题，这是不相关的。

【问题讨论】：

标签： azure asp.net-core-webapi msal msal.js

【解决方案1】：

在您的前端 AD 应用程序中，您需要添加 Delegated permission 而不是 Application permission。

如果您尚未为您的 Web API 应用程序定义委托权限，请在门户中导航到它 -> Expose an API -> Add a scope，按照此link 公开 API 委托权限。

然后在您的前端 AD 应用中，添加委派权限。

添加权限后，点击Grant admin consent for xxx按钮，表示管理员同意该用户在您的AAD租户中的权限。

注意：如果您的应用程序是多租户应用程序，并且登录该应用程序的用户在另一个 AAD 租户中，则需要该租户的管理员同意该应用程序，只需让该租户的全局管理员登录应用程序，同意权限。同意后，该租户中的其他用户也将能够登录。

在您的代码中，authority 需要为https://login.microsoftonline.com/common，然后在请求的scopes 中，它需要包含委托权限scopes: ["<Application ID URI>/<Scope name>"]，在我的示例中为scopes: ["api://xxxxxxx/Test.test"]。

【讨论】：