Keycloak-js客户端在Angular项目登录时传递自定义acr_values参数

keycloak-js 的 login 方法原生支持传入额外自定义参数，你需要的 acr_values 可以直接放在调用时的参数对象中传递，参数会自动拼接在授权请求的查询参数内，配合你已经配置好的 Keycloak 服务端参数转发规则，IDP 即可正常识别该参数。

下面按 Angular 项目两种常见的集成场景给出代码示例：

场景1：直接使用原生 keycloak-js 库 #

import Keycloak from 'keycloak-js';

// 初始化Keycloak实例的已有逻辑省略
const keycloak = new Keycloak({
  url: '你的Keycloak服务地址',
  realm: '你的Realm名称',
  clientId: '你的客户端ID'
});

// 调用登录时传入acr_values
keycloak.login({
  acr_values: '你需要传递的参数值，比如自定义登录方式标识'
}).then(() => {
  // 登录成功后的业务逻辑
});

场景2：使用 keycloak-angular 封装库（Angular 生态常用集成方案） #

初始化自动登录时传参 #

如果你的项目配置了启动自动登录，可以在初始化配置的 loginOptions 中统一配置参数：

import { KeycloakService } from 'keycloak-angular';

export function initializeKeycloak(keycloak: KeycloakService) {
  return () =>
    keycloak.init({
      config: {
        url: '你的Keycloak服务地址',
        realm: '你的Realm名称',
        clientId: '你的客户端ID'
      },
      initOptions: {
        onLoad: 'login-required',
        checkLoginIframe: false
      },
      // 配置全局默认登录参数
      loginOptions: {
        acr_values: '你的参数值'
      }
    });
}

手动触发登录时传参 #

如果是点击登录按钮这类手动触发的登录逻辑，直接在调用 login 方法时传参即可：

import { KeycloakService } from 'keycloak-angular';

@Component({
  // 组件基础配置省略
})
export class LoginComponent {
  constructor(private keycloakService: KeycloakService) {}

  handleLogin() {
    this.keycloakService.login({
      acr_values: '你的参数值'
    });
  }
}

小提示：如果需要传递多个acr值，用空格分隔即可，比如 acr_values: 'pwd otp'，Keycloak 会按优先级将参数传递给IDP。

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