Angular msal_angular with ASP.NET Core Web API returns 无效令牌无效签名 AzureAD

Question

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

我可以从 Angular 应用程序登录甚至验证 MS Graph。

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

WWW-Authenticate: Bearer error="invalid_token", error_description="The signature is invalid"

到目前为止，我已经尝试了所有可能的方法，但没有成功。我继续收到此错误。我试过 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 图表）时，我需要获得不同的令牌。在拆分范围并独立获取令牌后，我能够对两者进行身份验证。如果设置正确，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 调用的 header 中。

Angular msal_angular with ASP.NET Core Web API returns 无效令牌无效签名 AzureAD

Angular msal_angular with ASP.NET Core Web API returns invalid token invalid signature AzureAD

azure-active-directory

bearer-token

msal

asp.net-core-webapi

angular