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

Question

我根据以下示例构建了一个Angular应用程序：https://github.com/microsoftgraph/msgraph-training-angularspa

我能够从Angular应用登录甚至通过MS Graph进行身份验证。

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

WWW-Authenticate：承载错误=“ 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进行身份验证的应用程序。该应用程序具有以aspnetcore webapi作为后端的Angular前端。我不太具体如何实现这一目标。只是寻找完成它的方法。

Answer 1

[因此，在Junnas和NanYu的帮助下，并且没有几篇旧文章，我弄清楚了这个问题。在我以前的设置中，我将Api和MS Graph合并在一起，但问题是每个返回的令牌都不同。当到达不同的Api（mine 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附加在调用的标题中。