使用angular-oauth2-oidc实现OAuth2与SSO时无法获取access_token问题

排查及解决方法 #

1. 校验PKCE配置 #

前端OAuth2流程默认通常启用PKCE校验，若你的授权服务器未适配PKCE，会导致code交换token时校验失败。Postman默认不携带PKCE参数所以请求正常，可在配置中手动关闭PKCE：
在authCodeFlowConfig中新增配置项：

usePkce: false

若授权服务器要求必须使用PKCE，则保持usePkce: true，同时确认授权服务器侧已开启PKCE支持。

2. 调整客户端密钥传输方式 #

angular-oauth2-oidc默认携带客户端密钥时会将其放在Authorization请求头中以Basic认证方式传输，若你的授权服务器要求客户端ID和密钥放在请求体中，需新增配置项：

clientSecretInBody: true

3. 补充JWKS配置或调整令牌校验逻辑 #

你当前使用了JwksValidationHandler进行令牌签名校验，但配置中未指定JWKS端点，会导致令牌校验失败。两种解决方案：

• 补充JWKS端点配置：

jwksUri: 'https://你的授权服务器地址/.well-known/jwks.json'

• 临时使用NullValidationHandler跳过签名校验（仅测试用，生产环境不建议）：

// 替换原有tokenValidationHandler赋值逻辑
this.oauthService.tokenValidationHandler = new NullValidationHandler()

4. 检查跨域配置 #

Postman不会触发浏览器跨域校验，浏览器环境下需要授权服务器侧将你的Angular应用域名（包含协议、端口）添加到跨域白名单，允许POST请求访问token端点，同时允许携带Content-Type、Authorization等必要请求头。

5. 校验重定向URI一致性 #

确认授权服务器侧配置的重定向URI与Angular代码中redirectUri完全一致，包括协议（http/https）、域名、端口、路径，无多余尾斜杠。

调整后的参考配置 #

authCodeFlowConfig: AuthConfig = {
  issuer: 'https://URL.com/',
  loginUrl: 'https://URL.com/authorize-client',
  clientId: environment.API.CLIENT_ID,
  responseType: 'code',
  scope: environment.API.SCOPE,
  tokenEndpoint: 'https://URL.com/request-access',
  dummyClientSecret: environment.API.CLIENT_SECRET,
  redirectUri: window.location.origin,
  showDebugInformation: true,
  // 新增配置，按需调整
  usePkce: false,
  clientSecretInBody: true,
  jwksUri: 'https://URL.com/.well-known/jwks.json'
}

你可以打开浏览器控制台查看angular-oauth2-oidc输出的调试日志，获取token端点返回的具体错误码和错误信息，进一步定位问题。

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