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

Question

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

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

的快速入门

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

这是设置附加网站的代码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']]
      ],

Answer 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']]
  ];

Answer 2

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

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

Angular single page application to access multiple protected Web API through Azure Active Directory

azure-active-directory

asp.net-core-webapi

angular

msal.js