带有 ASP.NET Core Web API 的 Angular msal_angular 返回无效令牌 无效签名 AzureAD

Question

我按照这个例子构建了一个 Angular 应用程序： https://github.com/microsoftgraph/msgraph-training-angularspa

我可以从 Angular 应用程序登录 MS Graph，甚至对其进行身份验证。

我正在尝试将令牌传递给我创建的 API 服务。但是我不断收到以下错误：

WWW-Authenticate: Bearer error="invalid_token", error_description="签名无效"

到目前为止，我已经尝试了所有可能的方法，但没有运气。我继续收到此错误。我试过AzureADBearer 库：

services.AddAuthentication(AzureADDefaults.BearerAuthenticationScheme)
    .AddAzureADBearer(options => Configuration.Bind("AzureAd", options));

services.Configure<JwtBearerOptions>(AzureADDefaults.JwtBearerAuthenticationScheme, options => 
{
    options.Authority += "/v2.0";
    options.TokenValidationParameters.ValidAudiences = new string[]
    {
        options.Audience, $"api://{options.Audience}"
    };

    options.TokenValidationParameters.ValidateIssuer = false;
    options.TokenValidationParameters.IssuerValidator = AadIssuerValidator.GetIssuerValidator(options.Authority).Validate;
});

我也尝试过 Microsoft.Identity.Web 库，但我遇到了同样的错误：

services.AddProtectedWebApi(Configuration);

我已经搜索了几天，我发现其他人有同样的问题，但到目前为止还没有明确的解决方案。任何帮助将不胜感激。

编辑

我正在尝试为我的组织构建一个使用我们的 AzureAD 进行身份验证的应用程序。该应用程序具有 Angular 前端和 aspnetcore webapi 作为后端。我对如何实现这一点并不太特别。只是想办法完成它。

Answer 1

所以在 Junnas 和 NanYu 的一些帮助和一些旧帖子之后，我找到了问题所在。在我之前的设置中，我将 Api 和 MS Graph 的范围放在一起，但问题是为每个返回的令牌不同。到达不同的 Api（我的 vs Graph）时，我需要获取不同的令牌。在拆分范围并独立获取令牌后，我能够对两者进行身份验证。如果设置正确，MsalInterceptor 也可以很好地工作，并且使我无需编写单独的调用来获取令牌。这是我的代码：

oauth.ts

export const OAuthSettings = {
    appId: '{client Id}',
    authority: 'https://login.microsoftonline.com/{tenant Id}',
    apiScopes: [
        'api://{api id}/access_as_user'
    ],
    graphScopes: [
        'user.read'
    ]
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { MsalModule, MsalInterceptor } from '@azure/msal-angular';
import { LogLevel } from 'msal';

import { AppComponent } from './app.component';
import { OAuthSettings } from '../oauth';

// this is only for logging and tracing
export function msalLogCallBack(level: LogLevel, message: string, containsPii: boolean) {
  console.log('[MSAL]:' + message);
}

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    MsalModule.forRoot({
      clientID: OAuthSettings.appId,
      authority: OAuthSettings.authority,
      unprotectedResources: ['{angular app uri}'],
      protectedResourceMap: [
        ['{api endpoint}', OAuthSettings.apiScopes],
        ['https://graph.microsoft.com/v1.0/me', OAuthSettings.graphScopes]
      ],
      level: LogLevel.Verbose,
      logger: msalLogCallBack
    })
  ],
  providers: [ {
    provide: HTTP_INTERCEPTORS,
    useClass: MsalInterceptor,
    multi: true
}],
  bootstrap: [AppComponent]
})
export class AppModule { }

从此时起，任何对 Api 的调用都将被拦截，并且正确的令牌将通过 MsalInterceptor 附加到调用的标头中。