MSAL ASP.NET Web API 在 Angular HTTP GET 请求上返回 401

如何解决MSAL ASP.NET Web API 在 Angular HTTP GET 请求上返回 401

我对 MSAL 相当陌生，我不明白为什么在访问我的 Web API 时我将 MsalInterceptor 配置为 app.module.ts 中的提供程序时返回 401。

作为参考，我的 app.module.ts 如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { environment } from '../environments/environment';
import { MsalModule,MsalInterceptor } from "@azure/msal-angular";
import { BrowserCacheLocation } from "@azure/msal-browser";
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClient,HttpClientModule,HTTP_INTERCEPTORS } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
import { NavbarComponent } from './views/partials/navbar/navbar.component';

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

@NgModule({
  declarations: [
    AppComponent,NavbarComponent
  ],imports: [
    BrowserModule,AppRoutingModule,MsalModule.forRoot({
      auth: {
        clientId: environment.azure.clientId,authority: environment.azure.authority,redirectUri: 'http://localhost:4200/profile'
      },cache: {
        cacheLocation: BrowserCacheLocation.LocalStorage,storeAuthStateInCookie: isIE,},{
      popUp: !isIE,consentScopes: [
        'user.read','openid','profile','api://xxx/xxx/xxx'
      ],unprotectedResources: [],protectedResourceMap: [
        ['https://graph.microsoft.com/beta/',['user.read']],['https://localhost:44312/weatherforecast/getTest',['api://xxx/xxx/xxx']]
      ],extraQueryParameters: {},}),BrowserAnimationsModule,ToastrModule.forRoot(),],providers: [{
    provide: HTTP_INTERCEPTORS,useClass: MsalInterceptor,multi: true
  }],bootstrap: [AppComponent]
})
export class AppModule {}

我使用包含以下功能的请求设置了一个服务：

async getForecast() {
    return await this.http.get('https://localhost:44312/weatherForecast/getTest').toPromise();
}

WeatherForecast“getTest”函数如下所示：

[HttpGet("getTest")]
public IActionResult Test()
{
   return Ok("test");
}

显然，控制器本身是用 [Authorize] 标签修饰的。

我认为访问令牌可能不会被包裹在 HTTP 请求中（？），尽管正如 Microsoft Docs 所描述的那样，访问令牌处理是在拦截器本身内自动发生的。

还要注意：我可以向 Graph API 发出请求（GET 请求到 /me/photo/$value）。

先谢谢你！ :)

解决方法

您是否在 azure 中注册了自定义 API？您必须在 azure 中注册您的 API 才能获得这些客户端 ID 和应用 ID。

为了使用 MSAL，您必须在 Azure 中执行几个步骤：

1. 在 azure 中注册您的 API。注册成功后，进入“公开API”并创建一个新的范围（api://xxxx.xxxx.xxx/user_access）。

2. 在 Azure 中注册您的应用程序。确保在注册 URI 重定向时选中“令牌 ID”和“访问令牌”选项。然后进入“Api权限”->“添加权限”->我的Apis->选择你在1中创建的（api://xxxx.xxxx.xxx/user_access）。这样做，您的应用程序可以访问您的 api :

3. 在您的应用模块中，使用 1 中创建的 api 范围填充“受保护的资源映射”选项。

4. 在您的 api 中，您必须填写 clientId、TenantId 并启用 cors。

这样做，您的应用就可以向您的 api 提出请求

这篇文章将引导你走向光明

https://manojchoudhari.wordpress.com/2020/05/05/angular-app-and-azure-ad-protected-web-api-using-msal/

抱歉我的英语不好，希望能帮到你。