Azure AD 使用 MSAL 从 Angular 前端 returns 401 保护 .Net Core Web API 3.1
Azure AD secured .Net Core Web API 3.1 from Angular Frontend returns 401 with MSAL
我正在尝试通过 Angular 9 前端[=访问安全的 .net core 3.1 Web API 44=]。我使用了 MSAL Angular repo.
中的 Angular 9 代码示例
我可以使用我自己的 Azure AD 应用程序注册成功登录，但是在调用我的端点（装饰有 [Authorize]）时，我在前端以及 postman 中收到 401（预期）。
我的 Angular 拦截器甚至没有将请求中的承载令牌添加到 API 因为请求的 getScopesForEndpoint() returns 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 的授权端点的步骤？这是一个 post，与我遵循的设置非常相似 . The only difference is that my Web API is on https://localhost:44381/weatherforecast instead of being deployed to Azure. The accepted answer doesn't seem to help with my scenario. Also another very similar post here: Related SO Post 2 但答案讨论的是与 Cors 问题无关的问题。
在您的前端广告应用中，您需要添加 Delegated permission 而不是 Application permission。
如果您还没有为您的 Web API 应用程序定义委派权限，请在门户中导航到它 -> Expose an API -> Add a scope，然后按照此 link 以公开 API 委派权限。
然后在您的前端广告应用中，添加委托权限。
添加权限后，点击Grant admin consent for xxx按钮，表示admin同意你的AAD租户中用户的权限。
注意：如果您的应用是多租户应用，并且登录该应用的用户在另一个AAD租户中，则需要该租户的管理员同意应用程序，让该租户的全局管理员登录应用程序，同意权限。同意后，该租户中的其他用户也将可以登录。
在你的代码中，authority需要是https://login.microsoftonline.com/common，然后在请求的scopes中，它需要包含委托权限scopes: ["<Application ID URI>/<Scope name>"]，在我的样本是 scopes: ["api://xxxxxxx/Test.test"].
我正在尝试通过 Angular 9 前端[=访问安全的 .net core 3.1 Web API 44=]。我使用了 MSAL Angular repo.
中的 Angular 9 代码示例我可以使用我自己的 Azure AD 应用程序注册成功登录，但是在调用我的端点（装饰有 [Authorize]）时，我在前端以及 postman 中收到 401（预期）。
我的 Angular 拦截器甚至没有将请求中的承载令牌添加到 API 因为请求的 getScopesForEndpoint() returns 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 的授权端点的步骤？这是一个 post，与我遵循的设置非常相似 https://localhost:44381/weatherforecast instead of being deployed to Azure. The accepted answer doesn't seem to help with my scenario. Also another very similar post here: Related SO Post 2 但答案讨论的是与 Cors 问题无关的问题。
在您的前端广告应用中，您需要添加 Delegated permission 而不是 Application permission。
如果您还没有为您的 Web API 应用程序定义委派权限，请在门户中导航到它 -> Expose an API -> Add a scope，然后按照此 link 以公开 API 委派权限。
然后在您的前端广告应用中，添加委托权限。
添加权限后，点击Grant admin consent for xxx按钮，表示admin同意你的AAD租户中用户的权限。
注意：如果您的应用是多租户应用，并且登录该应用的用户在另一个AAD租户中，则需要该租户的管理员同意应用程序，让该租户的全局管理员登录应用程序，同意权限。同意后，该租户中的其他用户也将可以登录。
在你的代码中，authority需要是https://login.microsoftonline.com/common，然后在请求的scopes中，它需要包含委托权限scopes: ["<Application ID URI>/<Scope name>"]，在我的样本是 scopes: ["api://xxxxxxx/Test.test"].