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

keycloak-angular：多租户应用程序

1 个答案: