[英]Angular MSAL AD 401 Unauthorized in Angular App but 200 Ok in Postman - ASP.NET Core Web API
Good day,再会,
I'm trying to fetch data from my ASP.NET Core Web API using Angular MSAL, but I'm having an error in my angular app that says 401 Unauthorized Error.我正在尝试使用 Angular MSAL 从我的 ASP.NET Core Web API 获取数据,但我的 Angular 应用程序中出现错误,显示 401 Unauthorized Error。
I tried to get the access_token
in the application tab of the browser and use it on Postman, and technically it works.我试图在浏览器的应用程序选项卡中获取
access_token
并在 Postman 上使用它,从技术上讲它可以工作。 I just got no idea why it throws the Unauthorized 401
error in my angular app.我只是不知道为什么它会在我的 angular 应用程序中抛出
Unauthorized 401
错误。
Here's my app.module.js
这是我的
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
}
],
Here's my ASP.NET Core Web API host: http://localhost:5000
这是我的 ASP.NET Core Web API 主机:
http://localhost:5000
Where it implements [Authorize]
in some of its Controllers
.它在其某些
Controllers
实现[Authorize]
。 I think there's a problem in my backend since everything is working using my access_token
from my local storage when I tested it using Postman with authorization header of Bearer access_token
.我认为,因为一切都在使用我的工作有一个问题在我的后端
access_token
从我的本地存储,当我使用与邮差授权头测试它Bearer access_token
。
Browser Application Tab after successfully login成功登录后的浏览器应用程序选项卡
Thank you in advance.先感谢您。
The main thing you are missing in my opinion is the protected resource map configuration.我认为您缺少的主要内容是受保护的资源映射配置。 Currently it only defines MS Graph API.
目前它只定义了 MS Graph API。 You should add your own API there as well:
您还应该在那里添加自己的 API:
export const protectedResourceMap: [string, string[]][] = [
['https://graph.microsoft.com/v1.0/me', ['user.read']],
['http://localhost:5000', ['your-api-client-id/user_impersonation']]
];
Replace your-api-client-id
with the client id/application id for your API.将
your-api-client-id
替换your-api-client-id
端 ID/应用程序 ID。 You can also use the application ID URI for the API.您还可以将应用程序 ID URI 用于 API。 The last part is the scope, change
user_impersonation
to a scope you have defined on the API (can be done through Expose an API in Azure Portal).最后一部分是范围,将
user_impersonation
更改为您在 API 上定义的范围(可以通过在 Azure 门户中公开 API 来完成)。
Now when it sees an HTTP request to http://localhost:5000
, it'll know to get a token for it and attach it to the request.现在,当它看到对
http://localhost:5000
的 HTTP 请求时,它会知道为它获取令牌并将其附加到请求中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.