如何使用Keycloak为Angular应用内页面配置自定义CSS样式

可以实现应用内页复用Keycloak主题CSS，Keycloak本身没有内置自动向独立前端应用注入样式的机制，但可以通过复用Keycloak主题资源的方式，实现登录页和应用内页的风格统一，以下是适配多租户场景的最优实现方案：

1. 抽离双端通用样式 #

在你自定义的Keycloak主题目录下，找到登录页的核心样式文件，默认路径为themes/<自定义主题名>/login/resources/css/styles.css，将全局通用的样式规则（包括色值、字体规范、布局规则、通用组件样式等）抽离为独立的common-theme.css文件，同时存放在Keycloak主题的resources目录和Angular项目的静态资源目录中。

多租户场景可按租户ID拆分独立样式文件，命名为common-theme-<租户ID>.css，分别存放到对应租户的主题目录和Angular静态资源目录。

2. Angular端动态加载对应租户主题 #

提前在Keycloak的租户mapper配置中，将租户ID字段添加到token的返回字段中，在Angular应用的根组件初始化或全局路由守卫阶段，根据当前登录用户的租户ID动态加载对应样式：

// AppComponent.ts 示例代码
import { KeycloakService } from 'keycloak-angular';

constructor(private keycloakService: KeycloakService) {}

ngOnInit() {
  if (this.keycloakService.isLoggedIn()) {
    const tokenClaims = this.keycloakService.getKeycloakInstance().tokenParsed;
    const tenantId = tokenClaims?.tenant_id as string;
    this.loadTenantTheme(tenantId);
  }
}

private loadTenantTheme(tenantId: string): void {
  // 避免重复加载样式
  const existTheme = document.getElementById(`theme-${tenantId}`);
  if (existTheme) return;

  const styleLink = document.createElement('link');
  styleLink.id = `theme-${tenantId}`;
  styleLink.rel = 'stylesheet';
  styleLink.href = `assets/themes/common-theme-${tenantId}.css`;
  document.head.appendChild(styleLink);
}

3. 样式同步维护 #

每次更新Keycloak侧的主题样式时，同步更新Angular项目中对应的CSS文件即可。如果不想手动同步，也可以直接在Angular中加载Keycloak服务端的主题静态资源，路径格式为${keycloak服务地址}/resources/${keycloak版本号}/themes/<自定义主题名>/login/resources/css/common-theme.css，只需提前配置Keycloak的CORS规则允许你的Angular应用域名访问静态资源即可。

如果是单租户应用不需要动态切换主题，直接将抽离的通用CSS文件引入到angular.json的styles数组中即可：

"styles": [
  "src/styles.css",
  "src/assets/themes/common-theme.css"
]

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