keycloak-angular: 多租户应用程序

Question

我已安装keycloak-angular包，并按照其说明使用了它： https://www.npmjs.com/package/keycloak-angular 问题在于，我希望我的应用程序支持多租户。这意味着在应用程序加载期间不知道领域名称。

关于初始化指南中提到“KeycloakService应该在应用程序加载期间使用APP_INITIALIZER令牌进行初始化”，但问题在于realm是由用户给出的，在应用初始化期间无法访问。

是否有任何建议可以在应用程序运行时设置领域字符串而不是在应用程序加载期间进行设置？

- Nick6707

---

我们的架构也遇到类似的问题。尝试在你的APP_INITIALIZER工厂中使用一个Web服务，以提供在keycloak初始化器中所需的客户端/领域特定JSON。 - Tim Burton

Answer 1

我通过一种变通的方式和默认领域来初始化应用程序，首先创建一个预登录页面，该页面用于手动选择领域或根据用户输入调用API进行选择。此外，应将此页面从身份验证保护中排除。在预登录页面的操作中，将所选领域保存在本地存储中，并使用新领域重新初始化keycloak服务。 应用程序初始化器代码

return keycloak.init({
  config: {
    url: environment.authUrl,
    realm: window.localStorage.getItem('realm') || 'default',
    clientId: window.localStorage.getItem('client') || 'default',
  },
  initOptions: {
    onLoad: 'check-sso',
    checkLoginIframe: true,
    checkLoginIframeInterval: 5,
  },
  loadUserProfileAtStartUp: true,
  enableBearerInterceptor: true,
});

预登录页面操作

submitForm() {
  if (this.preloginForm.valid) {
    this.authService.getMapping(this.preloginForm.value.email).subscribe((res) => {
      localStorage.setItem('realm', res.realmId);
      localStorage.setItem('client', res.clientId);
      const config = {
        url: environment.authUrl,
        realm: res.realmId,
        clientId: res.clientId
      };
      this.keycloakService.init({
        config,
        initOptions: {
          onLoad: 'check-sso',
          checkLoginIframe: true,
          checkLoginIframeInterval: 5,
        },
        loadUserProfileAtStartUp: true,
        enableBearerInterceptor: true,
      }).then();
      await this.keycloakService.login({
        redirectUri: window.location.origin + '/home',
      });
    });
  }
}

- Bassem Salama