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

Posted 2023-03-09

【中文标题】Angular MSAL AD 401 在 Angular 应用程序中未经授权，但在 Postman 中 200 正常 - ASP.NET Core Web API

【英文标题】：Angular MSAL AD 401 Unauthorized in Angular App but 200 Ok in Postman - ASP.NET Core Web API

【发布时间】：2020-07-04 16:05:32

【问题描述】：

早安，

我正在尝试使用 Angular MSAL 从我的 ASP.NET Core Web API 获取数据，但我的 Angular 应用程序中出现错误，显示 401 Unauthorized Error。

我尝试在浏览器的应用程序选项卡中获取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 Core Web API 主机：http://localhost:5000

它在某些Controllers 中实现[Authorize]。我认为我的后端存在问题，因为当我使用授权标头为Bearer access_token 的 Postman 测试它时，一切都在使用本地存储中的 access_token 工作。

Browser Application Tab after successfully login

提前谢谢你。

【参考方案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/应用程序 ID。 您还可以使用 API 的应用程序 ID URI。 最后一部分是范围， 将 user_impersonation 更改为您在 API 上定义的范围（可以通过在 Azure 门户中公开 API 来完成）。

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

【讨论】：

我做了你的建议并配置了我的“公开 API”，但我收到了这个错误：ServerError: AADSTS65005: The application '_CLIENT_ID_HERE' ask for scope 'user_impersonation' 不存在。跟踪 ID：bf1c22ba-6ee1-4090-ae3a-a77292d58300 相关 ID：e6ad93a5-51d3-4076-a0fc-487072f2c97c 时间戳：2020-03-24 08:26:28Z

您是否在应用注册中使用该名称定义了范围？

imgur.com/g4q1816 - 我的 Azure Portal Expose API 和我的浏览器应用程序已更改为 imgur.com/NU8X1XS

请看图片先生

感谢您的提示和帮助。我尝试使用不同的浏览器打开它，我可以登录 :)) 非常感谢！ @juunas。上帝保佑 + 并在这次病毒大流行期间保持安全（您和您的家人）。