咨询是否存在可集成ADFS的Angular 5第三方工具包

嘿，刚好你这个需求有成熟的工具可以搞定！我之前帮团队处理过类似的多ADFS认证场景，@azure/msal-angular（基于MSAL.js）是最适合的选择——它原生支持ADFS 2019及以上版本的OpenID Connect认证流程，完全能满足你从多个ADFS获取令牌并自动附加到API请求的需求。

核心实现步骤 #

• 第一步：安装依赖
  先把需要的包装到项目里：

  npm install @azure/msal-angular @azure/msal-browser
  

• 第二步：配置多ADFS实例
  在Angular的AppModule中，通过MsalModule.forRoot()配置多个ADFS的权威地址（authority）。你可以把不同ADFS的配置单独抽离，比如：

  import { MsalModule, MsalService, MsalGuard } from '@azure/msal-angular';
  import { PublicClientApplication } from '@azure/msal-browser';
  
  // 多ADFS配置
  const adfsConfigs = {
    adfs1: {
      clientId: '你的ADFS1客户端ID',
      authority: 'https://adfs1.example.com/adfs',
      redirectUri: 'http://localhost:4200/auth-callback'
    },
    adfs2: {
      clientId: '你的ADFS2客户端ID',
      authority: 'https://adfs2.example.com/adfs',
      redirectUri: 'http://localhost:4200/auth-callback'
    }
  };
  
  @NgModule({
    imports: [
      MsalModule.forRoot(
        new PublicClientApplication({
          auth: {
            // 可以默认一个主ADFS，其他在需要时切换
            clientId: adfsConfigs.adfs1.clientId,
            authority: adfsConfigs.adfs1.authority,
            redirectUri: adfsConfigs.adfs1.redirectUri
          }
        })
      )
    ],
    providers: [MsalService, MsalGuard]
  })
  export class AppModule { }
  

• 第三步：针对不同API获取对应ADFS的令牌
  当你需要调用某个关联特定ADFS的API时，切换对应的authority并获取令牌：

  import { MsalService } from '@azure/msal-angular';
  
  constructor(private msalService: MsalService) {}
  
  async getAdfsToken(adfsConfig: any, scopes: string[]) {
    try {
      // 切换到目标ADFS的权威
      this.msalService.instance.setActiveAccount(null);
      this.msalService.instance.setAuthority(adfsConfig.authority);
      
      // 静默获取令牌（如果缓存失效会自动弹出登录）
      const response = await this.msalService.instance.acquireTokenSilent({
        clientId: adfsConfig.clientId,
        scopes: scopes,
        redirectUri: adfsConfig.redirectUri
      });
      return response.accessToken;
    } catch (error) {
      // 静默失败时触发弹出登录
      const response = await this.msalService.instance.acquireTokenPopup({
        clientId: adfsConfig.clientId,
        scopes: scopes,
        redirectUri: adfsConfig.redirectUri
      });
      return response.accessToken;
    }
  }
  

• 第四步：用HTTP拦截器自动附加令牌
  创建一个拦截器，根据请求的API域名判断需要使用哪个ADFS的令牌，自动加到Authorization头：

  import { Injectable } from '@angular/core';
  import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
  import { Observable, from } from 'rxjs';
  import { switchMap } from 'rxjs/operators';
  import { MsalService } from '@azure/msal-angular';
  
  @Injectable()
  export class AdfsTokenInterceptor implements HttpInterceptor {
    constructor(private msalService: MsalService) {}
  
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      // 根据API域名判断使用哪个ADFS配置
      let targetAdfsConfig;
      if (req.url.includes('api1.example.com')) {
        targetAdfsConfig = adfsConfigs.adfs1;
      } else if (req.url.includes('api2.example.com')) {
        targetAdfsConfig = adfsConfigs.adfs2;
      }
  
      if (!targetAdfsConfig) {
        return next.handle(req);
      }
  
      // 获取令牌并附加到请求头
      return from(this.getAdfsToken(targetAdfsConfig, ['api://your-api-scope'])).pipe(
        switchMap(token => {
          const authReq = req.clone({
            setHeaders: {
              Authorization: `Bearer ${token}`
            }
          });
          return next.handle(authReq);
        })
      );
    }
  
    // 复用之前的getAdfsToken方法
    private async getAdfsToken(adfsConfig: any, scopes: string[]) {
      // ... 这里是之前的令牌获取逻辑
    }
  }
  

  记得把这个拦截器加到AppModule的providers里：

  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AdfsTokenInterceptor, multi: true }
  ]
  

注意事项 #

• 确保你的ADFS版本是2019及以上，因为只有这个版本开始支持OpenID Connect协议，MSAL工具包依赖这个协议。
• 每个ADFS需要提前注册Angular客户端的重定向URI，避免认证失败。
• 可以利用MSAL的缓存机制，避免重复获取令牌，提升性能。

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