Angular 13中如何在运行时修改MSAL配置？

我正在构建一个需通过AAD认证的Web应用，目前在app.module.ts中按如下代码配置MSAL：

MsalModule.forRoot(new PublicClientApplication(
  {
    auth:{
      clientId: environment.clientId,
      redirectUri: environment.apiUrl,
      authority:'https://login.microsoftonline.com/' + environment.tenantId
    },
    cache:
    {
      cacheLocation:'localStorage',
      storeAuthStateInCookie:isIE
    }
  }
),
{
  interactionType:InteractionType.Redirect,
  authRequest:{
    scopes:['user.read']
  }
},
{
  interactionType:InteractionType.Redirect,
  protectedResourceMap:new Map(
    [
      ['https://graph.microsoft.com/v1.0/me',['user.Read']],
      [environment.apiUrl, ['api://' + environment.clientId + '/access_as_user']]
    ]
  )
}
)

但我不想从环境文件获取参数，希望通过服务端GET请求获取，需在运行时完成，请问是否有可行方法？我使用的是Angular 13。

在Angular 13中实现MSAL运行时动态配置可以通过以下步骤完成：

1. 创建配置加载服务 #

先编写一个服务，专门用于从后端接口获取认证相关配置：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

// 定义配置结构，匹配后端返回的数据格式
export interface MsalRuntimeConfig {
  clientId: string;
  tenantId: string;
  apiUrl: string;
}

@Injectable({ providedIn: 'root' })
export class ConfigLoaderService {
  constructor(private http: HttpClient) {}

  // 调用后端接口获取配置
  loadConfig(): Observable<MsalRuntimeConfig> {
    return this.http.get<MsalRuntimeConfig>('/api/auth-config');
  }
}

2. 利用APP_INITIALIZER提前加载配置 #

Angular的APP_INITIALIZER可以在应用初始化前执行异步操作，确保配置加载完成后再初始化MSAL：

首先在app.module.ts中导入所需依赖：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { MsalModule, PublicClientApplication, InteractionType, MsalService } from '@azure/msal-angular';
import { ConfigLoaderService, MsalRuntimeConfig } from './config-loader.service';

然后定义初始化函数，确保配置加载完成后再启动应用：

export function initializeApp(configLoader: ConfigLoaderService) {
  return () => configLoader.loadConfig().toPromise();
}

最后在模块中配置APP_INITIALIZER，并在模块构造函数中动态更新MSAL配置：

@NgModule({
  imports: [
    HttpClientModule,
    // 先传入空配置占位，后续动态更新
    MsalModule.forRoot(
      new PublicClientApplication({ auth: {}, cache: {} }),
      { interactionType: InteractionType.Redirect, authRequest: { scopes: ['user.read'] } },
      { interactionType: InteractionType.Redirect, protectedResourceMap: new Map() }
    )
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [ConfigLoaderService],
      multi: true
    }
  ]
})
export class AppModule {
  constructor(
    private pca: PublicClientApplication,
    private configLoader: ConfigLoaderService,
    private msalService: MsalService
  ) {
    // 加载配置后更新MSAL实例的所有参数
    this.configLoader.loadConfig().subscribe(config => {
      // 更新认证核心配置
      this.pca.setConfiguration({
        auth: {
          clientId: config.clientId,
          redirectUri: config.apiUrl,
          authority: `https://login.microsoftonline.com/${config.tenantId}`
        },
        cache: {
          cacheLocation: 'localStorage',
          storeAuthStateInCookie: isIE // 保留原有IE兼容判断逻辑
        }
      });

      // 更新受保护资源映射
      this.msalService.instance.setProtectedResourceMap(
        new Map([
          ['https://graph.microsoft.com/v1.0/me', ['user.Read']],
          [config.apiUrl, [`api://${config.clientId}/access_as_user`]]
        ])
      );
    });
  }
}

3. 关键注意事项 #

• 确保后端接口/api/auth-config返回的数据格式与MsalRuntimeConfig接口完全匹配
• 保留原有isIE的判断逻辑，可以将其封装为工具函数复用
• 若应用包含受保护路由，需在路由守卫中添加判断，确保配置加载完成后再触发认证流程，避免因配置未就绪导致的错误

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