Angular MSAL AD 401 在 Angular 应用程序中未经授权但在 Postman 中 200 正常 - ASP.NET 核心 Web API

Question

美好的一天，

我正在尝试使用 Angular MSAL 从我的 ASP.NET Core Web API 获取数据，但我的 angular 应用程序出现错误说 401 未经授权的错误。

我试图在浏览器的应用程序选项卡中获取 access_token 并在 Postman 上使用它，从技术上讲它是有效的。我只是不知道为什么它会在我的 angular 应用程序中抛出 Unauthorized 401 错误。

这是我的 app.module.js

export const protectedResourceMap: [string, string[]][] = [
  ['https://graph.microsoft.com/v1.0/me', ['user.read']]
];

const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1;

imports: [
// msal angular
     MsalModule.forRoot({
        auth: {
            clientId: 'MYCLIENTID-FROMAD',
            authority: "https://login.microsoftonline.com/common/",
            validateAuthority: true,
            redirectUri: "http://localhost:4200/",
            postLogoutRedirectUri: "http://localhost:4200/",
            navigateToLoginRequestUrl: true,
        },
        cache: {
            cacheLocation : "localStorage",
            storeAuthStateInCookie: true, // set to true for IE 11
        },
        framework: {
            unprotectedResources: ["https://www.microsoft.com/en-us/"],
            protectedResourceMap: new Map(protectedResourceMap)
        },
      }, {
        popUp: !isIE,
        extraQueryParameters: {}
    })
],
providers: [
    {
        provide: HTTP_INTERCEPTORS,
        useClass: MsalInterceptor,
        multi: true
      }
   ],

这是我的 ASP.NET 核心网站 API 主机：http://localhost:5000

在其某些 Controllers 中实施 [Authorize] 的地方。我认为我的后端存在问题，因为当我使用具有 Bearer access_token 的 header 授权的 Postman 对其进行测试时，一切都在使用本地存储中的 access_token 工作。

Browser Application Tab after successfully login

提前致谢。

Answer 1

我认为您缺少的主要内容是受保护的资源映射配置。目前它只定义了 MS Graph API。您也应该在其中添加自己的 API：

export const protectedResourceMap: [string, string[]][] = [
  ['https://graph.microsoft.com/v1.0/me', ['user.read']],
  ['http://localhost:5000', ['your-api-client-id/user_impersonation']]
];

将 your-api-client-id 替换为您 API 的客户端 id/application id。您还可以使用 API 的应用程序 ID URI。最后一部分是范围，将 user_impersonation 更改为您在 API 上定义的范围（可以通过在 Azure 门户中公开 API 来完成）。

现在，当它看到 http://localhost:5000 的 HTTP 请求时，它会知道为其获取令牌并将其附加到请求。

Angular MSAL AD 401 在 Angular 应用程序中未经授权但在 Postman 中 200 正常 - ASP.NET 核心 Web API

Angular MSAL AD 401 Unauthorized in Angular App but 200 Ok in Postman - ASP.NET Core Web API

azure

azure-active-directory

openid-connect

asp.net-core-webapi

angular