c# - 如何配置.net core Angular azure AD身份验证？

Question

我目前正在致力于将 Azure AD 身份验证集成到 Angular - .Net core 3.1 项目。这是一个从 Visual Studio 2019 模板(ASP.NET Core Web 应用程序)生成的项目。
在Azure门户中，我注册了2个应用程序并通过MS tutorial进行配置。和 this .

两个注册的应用程序:

1. frontend_app(客户端 ID:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxx16e3)
2. backend_api(客户端 ID:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxfcc1)

但我只发布了一项App服务，其中既包含SPA又包含API。登录后，我获得了一个 token ，该 token 附加到带有 MSAL 拦截器的每个 api 调用中。

问题是所有调用都返回:401，因为“观众无效”。在身份验证 token 中，受众值是 frontend_app 的客户端 ID。

如何解决才能让观众接受？仅对一项应用服务使用 2 个应用注册是否正确？

Answer 1

我和你遇到了同样的问题，我相信我已经找到了解决方案。我最初遵循的所有指南都使用隐式流程。正如卡尔在他的回答中指出的那样(我认为这不能正确解决您的问题)，有一个 auth flow这是推荐的方法。不幸的是，所有示例和指南中的标准 MSAL 库都是 1.x，并且不支持身份验证流程。相反，您需要使用 MSAL.js 2.0 。问题是 Angular 库仍在 alpha 中

所以，这就是我为使这一切顺利进行而所做的事情。我使用的是 Angular 10 前端和 ASP.NET Core 3.1 后端。

首先，您创建后端 API 应用程序注册(您可能不需要更改)。这是相关的文档:Register Web API 。重要提示:

• 使用此方法，您无需将前端客户端 ID 添加为“公开 API”部分下的授权应用程序。我们将使用身份验证流程以不同的方式处理该问题。
• 不需要重定向 URI，因为您的后端不会让用户登录
• 您至少需要一个范围才能让一切正常工作

然后按照 MSAL.js 2.0 操作创建前端应用程序注册的文档。重要说明如下:

• 确保选择 SPA 平台并输入有效的重定向 URI
• 请勿选中“隐式授予”复选框
• 在“API 权限”下，授予您的前端应用程序访问后端 API 的权限:
  • 在“API 权限”下，点击“添加权限”，然后点击“我的 API”标签
  • 找到您的后端应用程序并选择适当的范围。
  • 点击“添加权限”
  • 可以选择授予您的 API 同意

您的应用注册应类似于以下内容:

backend app registration expose an api

frontend app registration authentication

frontend app registration api permissions

现在是代码。对于您的 Angular 应用程序，首先安装必要的模块:

npm install @azure/msal-browser @azure/msal-angular@alpha

然后将其添加到您的应用模块中:

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { tap } from 'rxjs/operators';
import {
  IPublicClientApplication,
  PublicClientApplication,
  InteractionType,
  BrowserCacheLocation,
  LogLevel,
} from '@azure/msal-browser';
import {
  MsalGuard,
  MsalInterceptor,
  MsalBroadcastService,
  MsalInterceptorConfiguration,
  MsalModule,
  MsalService,
  MSAL_GUARD_CONFIG,
  MSAL_INSTANCE,
  MSAL_INTERCEPTOR_CONFIG,
  MsalGuardConfiguration,
} from '@azure/msal-angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

const PROTECTED_RESOURCE_MAP: Map<string, Array<string>> = new Map([
  ['https://graph.microsoft.com/v1.0/me', ['user.read']],
  [
    'api/admin/users',
    ['api://<backend app id>/access_as_admin'],
  ],
]);

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

export function loggerCallback(logLevel, message) {
  console.log(message);
}

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: '<frontend app id>',
      authority:
        'https://login.microsoftonline.com/<azure ad tenant id>',
      redirectUri: 'http://localhost:4200',
      postLogoutRedirectUri: 'http://localhost:4200/#/logged-out',
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: IS_IE, // set to true for IE 11
    },
    system: {
      loggerOptions: {
        loggerCallback,
        logLevel: LogLevel.Verbose,
        piiLoggingEnabled: false,
      },
    },
  });
}

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap: PROTECTED_RESOURCE_MAP,
  };
}

export function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return {
    interactionType: InteractionType.Redirect,
  };
}

export function initializeApp(appConfig: AppConfigService) {
  const promise = appConfig
    .loadAppConfig()
    .pipe(tap((settings: IAppConfig) => {}))
    .toPromise();
  return () => promise;
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    HttpClientModule,
    MsalModule,
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true,
    },
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory,
    },
    {
      provide: MSAL_GUARD_CONFIG,
      useFactory: MSALGuardConfigFactory,
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALInterceptorConfigFactory,
    },
    MsalService,
    MsalGuard,
    MsalBroadcastService,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

然后您只需将 MsalGuard 扔到您想要保护的任何路线上即可。

对于后端，首先安装 Microsoft.Identity.Web 包:

dotnet add package Microsoft.Identity.Web --version 1.3.0

这是我的 Startup.cs 中的相关代码:

public void ConfigureServices(IServiceCollection services)
{
  // other stuff...
  services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApi(options =>
    {
      Configuration.Bind("AzureAd", options);
    })
    .AddInMemoryTokenCaches();

  services.AddCors((options =>
  {
    options.AddPolicy("FrontEnd", builder =>
      builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
  }));
  // other stuff...
}
 
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
  // other stuff...
  app.UseCors("FrontEnd");
  app.UseAuthentication();
  app.UseAuthorization();
  // other stuff...
}

appsettings.json 包含:

"AzureAd": {
  "Instance": "https://login.microsoftonline.com/",
  "Domain": "<azure ad domain>",
  "TenantId": "<azure ad tenant id>",
  "ClientId": "<backend app id>"
}