如何使用带有 idphint 属性的 angular keycloak 配置？

Question

我正在使用 angular keycloak 适配器 (https://www.npmjs.com/package/keycloak-angular) 与我们的 keycloak 服务器建立连接。这工作得很好。

现在，我正在尝试使用 idphint 属性将请求委托给不同的 idp。

问题: login() 方法有可能添加 idphint 属性，但我不确定如何将我的实现与此登录方法结合起来。有什么建议吗？

我的实现：

export function initAuth(authService: KeycloakAuthenticationService): () => void {
  return () => authService.init({
    config: {
      url: KEYCLOAK_AUTH_URL,
      realm: 'Example-REALM',
      clientId: 'angular-client'
    },
    initOptions: {
      onLoad: 'login-required',
      checkLoginIframe: false
    }
  });
}

@NgModule({
 ...
  providers: [
    {provide: APP_INITIALIZER, useFactory: initAuth, multi: true, deps: [KeycloakAuthenticationService]}
  ]
...
})

Answer 1

我刚才遇到了同样的问题，做了一些研究，我想在这里为其他人指出。原则上，您可以在调用 login() 函数时提供 idpHint，在适配器初始化之后但在您登录之前（否则第一次登录尝试将不会在 loginUrl 中提供提供程序。所以我认为您必须使用 init() 方法并手动检查登录状态以手动登录或不登录...

经过一番研究后，我决定改用此解决方案，并绕过登录方法以困难的方式添加我的 idpHint：

const keycloakInit: KeycloakInit = {
  onLoad: 'login-required',
  flow: 'implicit'
};
const keycloakLoginParams = {
  idpHint: 'XXX-YYY'
};

export const environment: EnvironmentData = {
  production: false,
  keycloakJsUrl,
  keycloakConfig,
  keycloakInit,
  keycloakLoginParams,
  ...
};

  private initKeycloak(resolve, reject) {
    if (!environment.keycloakConfig) {
      reject('keycloak config missing, but init triggered. reject');
    }

    this.keycloakAuth = new Keycloak(environment.keycloakConfig);

    if (environment.keycloakLoginParams) {
      // wrap an custom function around original login to support idpHint
      const kcLogin = this.keycloakAuth.login;
      this.keycloakAuth.login = (options) => {
        Object.assign(options, environment.keycloakLoginParams);
        kcLogin(options);
      };
    }

    this.keycloakAuth.init(environment.keycloakInit || {onLoad: 'login-required'})
      .success(() => {
        const tokenParsed = this.tokenParsed;
        this.user = this.createUserObject(tokenParsed);
        console.log('logged in', this.user, tokenParsed);
        resolve();
      })
      .error((resp) => {
        reject(resp.error + ': ' + resp.error_description);
      });

    // called when the access token is expired. we use implicit flow, just show login mask
    this.keycloakAuth.onTokenExpired = () => {
      this.redirectToLogin();
    };

  }

Answer 2

keycloak-angular 有一个未解决的问题，通过添加将 KeycloakLoginOptions 添加到 keycloak-angular 的 init 方法的功能来支持 idpHint：https://github.com/mauriciovigolo/keycloak-angular/issues/334

如果他们解决了这个问题，我们就可以使用 keycloak-angular 中的 KeycloakService.init(...) 方法，而不必编写我们自己的 init 方法。

如何使用带有 idphint 属性的 angular keycloak 配置？

How can I use my angular keycloak configuration with a idphint attribute?

keycloak

keycloak-services

angular