Keycloak配置onLoad: 'check-sso'初始化时URL出现login_required错误如何解决？

使用onLoad: 'check-sso'初始化时，Keycloak默认会通过当前页面302跳转完成登录态校验，未登录时服务端会将error=login_required等参数带回回调地址，因此会短暂出现在地址栏。

可行解决方案 #

方案1：启用静默SSO校验（官方推荐） #

通过隐藏iframe完成登录态校验，完全不会污染当前页面地址栏，是最适配该场景的方案：

1. 项目根目录新增静默回调页silent-check-sso.html，内容如下：

<!DOCTYPE html>
<html>
<body>
  <script src="/path/to/keycloak.js"></script>
  <script>
    // 无需额外逻辑，Keycloak会自动处理iframe内的回调校验
  </script>
</body>
</html>

2. 登录Keycloak服务端控制台，进入对应客户端配置页，将http://你的域名/silent-check-sso.html添加到「有效重定向URI」和「Web Origins」列表中，保存配置。
3. 修改初始化配置，新增静默校验相关参数：

keycloak.init({
  onLoad: 'check-sso',
  // 配置静默回调地址
  silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html',
  // 开启iframe校验
  checkLoginIframe: true,
  prompt: 'none'
}).then(authenticated => {
  // 后续自定义逻辑，authenticated为布尔值表示是否已登录
})

方案2：手动调用静默登录校验 #

如果方案1不符合业务场景，可以放弃onLoad自动校验，改为手动触发静默校验：

keycloak.init({
  // 去掉onLoad配置
  checkLoginIframe: false
}).then(() => {
  // 手动触发静默校验
  return keycloak.login({ prompt: 'none' })
}).then(() => {
  // 已登录逻辑
}).catch(() => {
  // 未登录逻辑
})

注意事项 #

• Keycloak 15.0.2版本存在silentCheckSso偶发失效的已知bug，如果配置后仍然出现地址栏参数问题，可以将keycloak-js依赖升级到15.0.4版本，和15.0.2版本服务端完全兼容，无需升级服务端。
• 所有重定向地址必须严格匹配，不能遗漏端口、路径，15.x版本对重定向地址校验严格，通配符配置需要符合规则。

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