Angular 单页应用程序通过 Azure Active Directory 访问多个受保护的 Web API答案

【问题标题】：Angular single page application to access multiple protected Web API through Azure Active DirectoryAngular 单页应用程序通过 Azure Active Directory 访问多个受保护的 Web API
【发布时间】：2021-03-16 06:17:30
【问题描述】：

我是 Angular 和 Azure Active Directory 身份验证的新手。我想设置和配置一个 Angular 单页应用程序 (SPA)，以便它可以登录用户并使用 MSAL 调用多个受保护的 Web API。

我按照https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-v2-angular的快速入门

我能够通过用户配置文件调用 Microsoft graph。但是当我添加自己在 Azure Active Directory 中受保护的 web api 时，它总是会出现 401 错误（如果我从 web api 中的控制器中删除 [Authorize] 属性，它可以工作）。

这里是设置添加 web api 的代码

consentScopes: [
        'user.read',
        'openid',
        'profile',
        'api://d5179ea0-d0f2-42e1-ac8e-5be86d0d5980/gis.readupdate'
      ],
protectedResourceMap: [       
        ['https://localhost:44367/api/', ['api://d5179ea0-d0f2-42e1-ac8e-5be86d0d5980/gis.readupdate']],
        ['https://graph.microsoft.com/v1.0/me', ['user.read']]
      ],

【问题讨论】：

您的 JWT 令牌是否已添加到 API 调用中？

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

【解决方案1】：

我假设您已添加 MsalGuard 来保护您的路线。

由于您收到 401，因此您的受保护资源映射可能没有将您的 API 调用识别为受保护。

试试这个：

  const protectedResourceMap: [string, string[]][] = [
    ['https://graph.microsoft.com/v1.0/me', ['user.read']],
    ['https://localhost:44367/api/', ['d5179ea0-d0f2-42e1-ac8e-5be86d0d5980']]
  ];

【讨论】：

这对我来说是个问题。谢谢！
你能告诉我们在注册 web api 端点时我们应该作为第二个参数传递什么吗？ 'api://d5179ea0-d0f2-42e1-ac8e-5be86d0d5980/gis.readupdate' 被替换为 d5179ea0-d0f2-42e1-ac8e-5be86d0d5980 这解决了问题，但它的真正含义是什么？您可以分享的任何文章链接都会有所帮助
也许是这样：stackoverflow.com/questions/52769462/… 和 dev.to/czmiel24/…

【解决方案2】：

使用范围图和您自己的 api 在请求中获取令牌。这不行。一个token只能访问一个api。

【讨论】：