keycloak-angular:多租户应用程序

Question

我已经安装了keycloak-angular包，我使用它就像下面描述的那样：https://www.npmjs.com/package/keycloak-angular

问题是，在我的应用程序中，我希望有多租户。这意味着领域名称在应用程序加载期间是未知的。

在说明中，它说“应该使用APP_INITIALIZER令牌在应用程序加载期间初始化KeycloakService”，问题是领域是由用户提供的，并且在应用程序初始化期间无法访问。

有什么建议吗?我如何在应用程序的运行时而不是在应用程序加载期间设置领域字符串？

Answer 1

我已经实现了这一点的解决办法和一个默认领域初始化的应用程序，首先创建一个预登录页面，此页面用于手动选择realem或调用api取决于用户输入，也应排除此页面从auth防护，在预登录页面保存在本地存储中选择的领域和初始化keycloack服务再次与新的领域。应用初始值设定项代码

​

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',
      });
    });
  }
}

​