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

Question

我是 MSAL 的新手，我不明白为什么在将 MsalInterceptor 配置为 app.module.ts 中的提供程序的情况下访问我的 Web API 时会返回 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,
    HttpClientModule,
    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 发出请求（对 /me/photo/$value 的 GET 请求）。

提前感谢您！ :)

Answer 1

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

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

1. 在 Azure 中注册您的 API。注册成功后，进入“Expose an API”，新建一个scope（api://xxxx.xxxx.xxx/user_access）。

2. 在 Azure 中注册您的应用程序。确保在注册 URI 重定向时选中“令牌 ID”和“访问令牌”选项。然后转到“Api Permissions” -> “Add a permission” -> My 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/

对不起，我的英语不好，希望对你有所帮助。