Angular生成JWT认证失败，Postman生成正常的问题排查求助

背景 #

正在开发集成后端服务的Angular Web应用，采用JWT令牌做身份认证。Postman生成的令牌能正常通过认证，但Angular前端生成的令牌认证失败。

实现细节 #

用Angular搭建UI并调用后端服务，同时用Postman测试令牌生成做对比。

问题 #

Postman生成的JWT令牌可成功认证，Angular前端生成的令牌却认证失败。两者结构看似相似，但Angular生成的令牌存在导致认证失败的问题。

疑问 #

1. 为什么Angular和Postman生成的JWT令牌行为有差异？
2. Angular中是否存在特定配置错误影响JWT令牌生成？
3. 如何调试并定位前端生成令牌认证失败的根本原因？

相关代码 #

// Azure AD
import {
  MsalModule,
  MsalService,
  MSAL_INSTANCE,
  MsalGuard,
  MsalInterceptorConfiguration,
  MSAL_INTERCEPTOR_CONFIG,
  MsalBroadcastService,
  MsalGuardConfiguration,
  MsalRedirectComponent,
  MSAL_GUARD_CONFIG,
} from '@azure/msal-angular';
import { InteractionType, PublicClientApplication } from '@azure/msal-browser';

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

export function MSALInstanceFactory(): PublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: '(ui-client-id)',
      authority:
        'https://login.microsoftonline.com/(my-tenant-id)',
      redirectUri: 'http://localhost:4200',
    },
    cache: {
      cacheLocation: 'localStorage',
      storeAuthStateInCookie: isIE,
    },
  });
}

export function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: ['api://(api-client-id)', 'User.Read'],
      authority:
        'https://login.microsoftonline.com/(my-tenant-id)',
    },
  };
}

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();

  protectedResourceMap.set('http://localhost:5004', [
    'api://(api-client-id)/client',
  ]);

  protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', [
    'User.Read',
  ]);

  return {
    interactionType: InteractionType.Popup,
    protectedResourceMap,
  };
}

@NgModule({
  declarations: [
   [my-declarations]
  ],
  imports: [
    MsalModule.forRoot(
      MSALInstanceFactory(),
      {
        interactionType: InteractionType.Popup,
        authRequest: {
          scopes: ['api://(api-client-id)', 'User.Read'],
          authority:
            'https://login.microsoftonline.com/(my-tenant-id)',
        },
      },
      MSALInterceptorConfigFactory(),
    ),
    [...]
  ],
  providers: [
    httpInterceptorProviders,
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory,
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALInterceptorConfigFactory,
    },
    {
      provide: MSAL_GUARD_CONFIG,
      useFactory: MSALGuardConfigFactory,
    },
    MsalService,
    MsalGuard,
    MsalBroadcastService,
  ],
  bootstrap: [AppComponent, MsalRedirectComponent],
})
export class AppModule {}

备注：后端基于C#开发，因能正常认证Postman生成的令牌，故未提供后端代码。

问题排查与解决方案 #

1. 令牌内容差异对比 #

• 分别获取Postman和Angular生成的令牌，用JWT解码工具解析，重点对比以下核心字段：
  • aud（受众）：确认Angular生成的令牌aud是否匹配后端API的客户端ID，Postman可能直接指定了API的clientId作为受众，而Angular若请求的scope格式错误，会导致aud指向Azure AD默认受众而非目标API。
  • scp/roles：检查权限范围是否正确，Angular配置的api://(api-client-id)/client是否为后端认可的有效权限，Postman可能请求了正确的完整scope。
  • iss（签发者）：确认两者的签发者URL完全一致，避免Angular的authority配置有误。

2. Angular配置错误检查 #

• Scope配置问题：
  • 当前MSALGuardConfigFactory和MsalModule.forRoot的authRequest中，scopes使用api://(api-client-id)不完整，需指定具体权限（如api://(api-client-id)/client），否则Azure AD返回的令牌受众不是目标API。统一所有auth请求的scope，确保和protectedResourceMap配置一致。
• Interceptor配置验证：
  • 确认protectedResourceMap中的后端地址http://localhost:5004是否和实际请求地址完全匹配（含端口、路径前缀），若请求的是http://localhost:5004/api/xxx，需调整映射键为http://localhost:5004/api，否则MsalInterceptor不会自动附加正确令牌。
• Client ID一致性：
  • 检查Angular配置的ui-client-id是否为Azure AD中注册的正确前端应用ID，同时确认API的api-client-id无误，避免混淆前后端clientId。

3. 调试方法 #

• 浏览器控制台调试：
  • 登录后，在浏览器开发者工具Application标签中查看localStorage的msal存储项，提取accessToken解码分析；查看网络请求，检查调用后端时Authorization头携带的令牌是否正确，是否存在用ID Token代替Access Token的情况。
• 后端日志辅助：
  • 开启后端认证日志，查看Angular令牌认证失败的具体错误（如受众不匹配、权限不足、签名验证失败等），直接定位问题根源。
• Postman对比测试：
  • 在Postman中使用Angular生成的令牌调用后端，查看具体错误；同时将Postman的请求scope复制到Angular中测试，逐步缩小问题范围。

内容的提问来源于stack exchange，提问作者AlehandroSV