Keycloak SPA集成问题：keycloak.js未使用配置的Keycloak端口

我已经成功运行了Keycloak SPA快速启动Demo，但自己搭建示例时，keycloak.js始终使用应用端口（8080）而非配置的Keycloak端口（8180）访问Keycloak服务。

我对比了Demo和自己的实现，仅存在以下差异：

• 我的应用入口URL包含“shell”节点
• 我使用JavaScript代码配置而非keycloak.json文件
• 使用了不同的Realm

这些差异源于我正在微前端方案中测试Keycloak，前两项看起来不应该导致端口错误。想请教是否存在Realm设置会影响此行为？并希望获得相关解决建议。我使用的是Keycloak 23.0.3版本，两个应用连接的是同一Keycloak实例。

快速启动示例信息 #

• 应用入口URL：http://localhost:8080
• step1.html调用地址：http://localhost:8180/realms/quickstart/protocol/openid-connect/3p-cookies/step1.html

配置文件内容：

{
  "realm": "quickstart",
  "auth-server-url": "http://localhost:8180",
  "ssl-required": "external",
  "resource": "spa",
  "public-client": true
}

我的示例信息 #

• 应用入口URL：http://localhost:8080/shell
• step1.html调用地址：http://localhost:8080/realms/lifeinsurace/protocol/openid-connect/3p-cookies/step1.html

JavaScript配置代码：

const keycloak = new Keycloak({
          "realm": "lifeinsurace",
      "auth-server-url": "http://localhost:8180",
      "ssl-required": "external",
          "resource": "lifeinsurace-appshell",
          "public-client": true,
      "clientId":"lifeinsurace-appshell"
});

1. 排查Realm配置问题 #

登录Keycloak管理控制台，进入lifeinsurace Realm：

• 查看Realm设置→常规标签下的前端URL，确保该字段为空或设置为http://localhost:8180，不要填写应用的8080端口
• 检查Realm设置→登录标签下的Root URL，同样确保指向Keycloak的8180端口，而非应用端口

2. 修正JavaScript配置冗余项 #

你的代码中同时配置了resource和clientId，这两个字段在Keycloak JS适配器中等价（resource是旧版字段，clientId是新版），冗余配置可能导致解析异常。建议删除resource字段，仅保留clientId：

const keycloak = new Keycloak({
    "realm": "lifeinsurace",
    "auth-server-url": "http://localhost:8180",
    "ssl-required": "external",
    "public-client": true,
    "clientId":"lifeinsurace-appshell"
});

3. 检查客户端配置 #

进入Keycloak控制台的lifeinsurace-appshell客户端设置：

• 确认设置标签下的访问类型为公共（public）
• 检查有效重定向URI是否包含你的应用入口http://localhost:8080/shell/*，避免因重定向配置错误导致适配器异常
• 确保Web Origins设置为http://localhost:8080或*（测试环境可用，生产环境需限制具体域名）

4. 清除浏览器缓存与Cookie #

Keycloak会在浏览器中存储认证相关缓存，旧的错误配置可能残留：

• 清除当前域名下的所有Cookie（尤其是KEYCLOAK_*开头的）
• 强制刷新页面（Ctrl+F5），确保加载最新配置

5. 验证适配器初始化逻辑 #

确保调用keycloak.init()时没有覆盖auth-server-url参数：

keycloak.init({
    onLoad: 'login-required'
    // 不要在此添加auth-server-url，避免覆盖已有配置
}).then(authenticated => {
    console.log(authenticated ? '认证成功' : '未认证');
}).catch(err => {
    console.error('初始化失败', err);
});

如果以上步骤无效，可开启适配器调试模式查看日志：

const keycloak = new Keycloak({
    // 原有配置
    "debug": true
});

在浏览器控制台查看请求日志，确认auth-server-url是否被正确读取。

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