使用angular-oauth2-oidc的Angular SPA无法获取身份声明及令牌

针对你使用angular-oauth2-oidc库时无法获取idToken、accessToken和身份声明的问题，可按以下步骤排查修复：

1. 确保认证配置（authCodeFlowConfig）正确 #

你未提供sso.config.ts的内容，这是核心问题所在。授权码模式下，配置必须包含以下必填项：

export const authCodeFlowConfig = {
  clientId: '你的第三方客户端ID', // 第三方OAuth服务器分配的ID
  issuer: 'https://第三方认证服务器地址', // 认证服务器的issuer地址
  redirectUri: window.location.origin + '/home', // 必须与第三方服务器配置的回调地址完全一致
  responseType: 'code', // 授权码模式固定为'code'
  scope: 'openid profile email', // 必须包含`openid`才能获取id_token，其余按需添加
  showDebugInformation: true, // 开启调试，方便查看日志
};

重点：scope必须包含openid，否则服务器不会返回id_token。

2. 全局初始化认证逻辑 #

将认证配置和初始化移到全局服务（而非仅在Login组件初始化），确保应用启动时就能捕获重定向回来的授权码：

创建auth.service.ts：

import { Injectable } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
import { authCodeFlowConfig } from './config/sso.config';

@Injectable({ providedIn: 'root' })
export class AuthService {
  constructor(private oauthService: OAuthService) {
    this.initAuth();
  }

  private initAuth() {
    this.oauthService.configure(authCodeFlowConfig);
    // 加载发现文档并尝试从URL回调参数中获取令牌
    this.oauthService.loadDiscoveryDocumentAndTryLogin().then(() => {
      if (this.oauthService.hasValidAccessToken()) {
        // 令牌有效时开启自动静默刷新
        this.oauthService.setupAutomaticSilentRefresh();
        const claims = this.oauthService.getIdentityClaims();
        console.log('初始化获取到的声明:', claims);
      }
    });
  }

  login() {
    this.oauthService.initCodeFlow();
  }

  logout() {
    this.oauthService.logOut();
  }

  getIdentityClaims() {
    return this.oauthService.getIdentityClaims();
  }

  getAccessToken() {
    return this.oauthService.getAccessToken();
  }

  getIdToken() {
    return this.oauthService.getIdToken();
  }
}

该服务会在应用启动时自动初始化，确保重定向回应用时能及时解析令牌。

3. 调整组件内令牌获取逻辑 #

避免在同步getter中依赖异步加载的令牌，改为在组件初始化时通过事件订阅或直接检查令牌有效性获取：

修改home.component.ts：

import { Component, OnInit } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  claims: any;
  accessToken: string | null = null;
  idToken: string | null = null;

  constructor(private oauthService: OAuthService) { }

  ngOnInit(): void {
    // 订阅令牌接收事件，确保令牌加载完成后获取
    this.oauthService.events.subscribe(event => {
      if (event.type === 'token_received') {
        this.fetchTokens();
      }
    });

    // 直接检查当前是否有有效令牌
    if (this.oauthService.hasValidAccessToken()) {
      this.fetchTokens();
    }
  }

  private fetchTokens() {
    this.claims = this.oauthService.getIdentityClaims();
    this.accessToken = this.oauthService.getAccessToken();
    this.idToken = this.oauthService.getIdToken();
    console.log('-- home claims--', this.claims);
    console.log('-- idToken--', this.idToken);
  }
}

4. 检查重定向URL参数 #

登录成功后，浏览器地址栏应包含code和state参数（如/home?code=xxx&state=xxx）。如果没有这些参数，说明：

• 第三方服务器的回调地址配置与你的redirectUri不一致
• 授权请求未正确发送到第三方服务器

5. 调整Login组件的登录逻辑 #

将setupAutomaticSilentRefresh()移到令牌有效后调用，避免无效调用：

async login(){
  console.log('login');
  this.oauthService.initCodeFlow();
}

自动静默刷新的逻辑已在全局AuthService中处理，无需在登录前调用。

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