Angular v18基于angular-auth-oidc-client实现多身份认证的问题

核心思路 #

由于第二个身份提供商的配置依赖主认证返回的区域数据，无法预先通过checkAuthMultiple()一次性配置，因此采用先完成主认证→提取区域数据→动态生成次认证配置→完成次认证→启动应用的分步流程。

步骤1：配置主身份提供商静态初始化 #

在应用配置中仅初始化主身份提供商的配置，次配置后续动态添加。

// app.config.ts
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { AuthModule, provideAuth } from 'angular-auth-oidc-client';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAuth({
      config: {
        authority: 'https://main-identity-provider.com',
        clientId: 'your-main-client-id',
        redirectUri: `${window.location.origin}/callback-main`,
        postLogoutRedirectUri: window.location.origin,
        responseType: 'code',
        scope: 'openid profile email',
        useRefreshToken: false
        // 其他主提供商必要配置
      }
    })
  ]
};

步骤2：主认证完成后提取区域数据 #

在根组件中处理主认证流程，认证通过后从令牌Claims中提取区域信息。

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { OidcSecurityService, AuthConfig } from 'angular-auth-oidc-client';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  isAppReady = false;

  constructor(
    private oidcSecurityService: OidcSecurityService,
    private router: Router
  ) {}

  ngOnInit(): void {
    this.handleMainAuth();
  }

  private handleMainAuth(): void {
    this.oidcSecurityService.checkAuth().subscribe(authResult => {
      if (authResult.isAuthenticated) {
        // 从ID Token Claims中提取区域数据（需与主提供商确认Claims键名）
        const idTokenClaims = this.oidcSecurityService.getIdTokenClaims();
        const region = idTokenClaims?.region;

        if (!region) {
          this.oidcSecurityService.logoff();
          return;
        }

        // 动态生成次认证配置并启动次认证流程
        this.initSecondaryAuth(region);
      } else {
        // 未通过主认证，跳转至主提供商登录页
        this.oidcSecurityService.authorize();
      }
    });
  }

步骤3：动态添加次认证配置并完成认证 #

利用提取的区域数据生成次身份提供商的authority地址，动态添加配置后触发认证。

// app.component.ts 续
  private initSecondaryAuth(region: string): void {
    // 动态构建次认证配置
    const secondaryConfig: AuthConfig = {
      authority: `https://${region}-identity-provider.com`, // 用区域生成authority
      clientId: 'your-secondary-client-id',
      redirectUri: `${window.location.origin}/callback-secondary`,
      postLogoutRedirectUri: window.location.origin,
      responseType: 'code',
      scope: 'openid profile api-access',
      useRefreshToken: false,
      configId: 'secondary-auth' // 指定唯一ID区分主配置
    };

    // 动态添加配置并启动次认证
    this.oidcSecurityService.addAuthConfig(secondaryConfig).then(() => {
      this.oidcSecurityService.checkAuth({ configId: 'secondary-auth' }).subscribe(secondaryResult => {
        if (secondaryResult.isAuthenticated) {
          // 双认证完成，标记应用就绪并跳转至首页
          this.isAppReady = true;
          this.router.navigate(['/dashboard']);
        } else {
          // 未通过次认证，触发授权
          this.oidcSecurityService.authorize({ configId: 'secondary-auth' });
        }
      });
    });
  }
}

步骤4：配置认证回调路由 #

添加两个回调路由，分别处理主、次认证的回调逻辑。

// app.routes.ts
import { Routes } from '@angular/router';
import { CallbackComponent } from './callback/callback.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { OidcSecurityService } from 'angular-auth-oidc-client';
import { inject } from '@angular/core';

export const routes: Routes = [
  { path: 'callback-main', component: CallbackComponent },
  { path: 'callback-secondary', component: CallbackComponent },
  { 
    path: 'dashboard', 
    component: DashboardComponent,
    // 路由守卫：确保双认证均通过才可访问
    canActivate: [() => {
      const oidcService = inject(OidcSecurityService);
      return oidcService.isAuthenticated$ && oidcService.isAuthenticated$({ configId: 'secondary-auth' });
    }]
  },
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' }
];

回调组件实现 #

// callback.component.ts
import { Component, OnInit } from '@angular/core';
import { OidcSecurityService } from 'angular-auth-oidc-client';
import { ActivatedRoute } from '@angular/router';

@Component({
  template: '<p>处理认证中...</p>'
})
export class CallbackComponent implements OnInit {
  constructor(
    private oidcSecurityService: OidcSecurityService,
    private route: ActivatedRoute
  ) {}

  ngOnInit(): void {
    // 根据当前路由判断是主/次认证回调，指定对应配置ID处理
    const configId = this.route.routeConfig?.path === 'callback-main' ? undefined : 'secondary-auth';
    this.oidcSecurityService.checkAuth({ configId }).subscribe(() => {
      // 回调处理完成后返回应用首页
      window.location.href = window.location.origin;
    });
  }
}

注意事项 #

• 确认主身份提供商的令牌Claims中包含有效的区域数据，需与提供商核对键名
• 动态添加次配置时必须指定唯一configId，避免与主配置冲突
• 可通过路由守卫同时校验两个认证的状态，确保未完成双认证的用户无法访问应用核心页面

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