如何在React中实现Keycloak单Realm多客户端登录并获取对应角色

完全可以通过Keycloak同一登录页实现单个Realm下多客户端的SSO登录，并且能正确获取用户在对应客户端的角色权限，以下是具体实现方案：

方案一：初始化多个Keycloak实例（对应不同客户端） #

适合两个React应用（或同一应用内独立模块）分别对应testClient1和testClient2的场景：

1. 分别创建对应客户端的Keycloak实例：

// 对应testClient1的实例
const keycloakClient1 = new Keycloak({
  url: "你的Keycloak服务地址",
  realm: "testRealm",
  clientId: "testClient1",
});

// 对应testClient2的实例
const keycloakClient2 = new Keycloak({
  url: "你的Keycloak服务地址",
  realm: "testRealm",
  clientId: "testClient2",
});

2. 登录与角色获取逻辑：

• 访问testClient1对应页面时，调用实例初始化完成登录，通过resourceAccess字段获取该客户端下的角色：

// 初始化testClient1实例（按需选择onLoad模式）
await keycloakClient1.init({ onLoad: "login-required" });
// 获取testClient1下的角色列表
const client1Roles = keycloakClient1.resourceAccess?.testClient1?.roles || [];
// 判断用户是否拥有tester角色
const isTester = client1Roles.includes("tester");

• 访问testClient2对应页面时，由于Keycloak的SSO机制，用户无需重复登录，直接初始化实例并获取角色：

await keycloakClient2.init({ onLoad: "check-sso" });
// 获取testClient2下的角色列表
const client2Roles = keycloakClient2.resourceAccess?.testClient2?.roles || [];
// 判断用户是否拥有viewer角色
const isViewer = client2Roles.includes("viewer");

方案二：单实例动态切换客户端（适合同一应用内切换身份场景） #

如果是同一React应用需要切换不同客户端身份，可以封装初始化函数动态指定clientId：

1. 封装Keycloak初始化工具函数：

const initKeycloak = async (clientId) => {
  const keycloak = new Keycloak({
    url: "你的Keycloak服务地址",
    realm: "testRealm",
    clientId: clientId,
  });
  
  return keycloak.init({
    onLoad: "login-required",
    silentCheckSsoRedirectUri: `${window.location.origin}/silent-check-sso.html`
  });
};

2. 切换客户端时调用该函数：

// 先注销当前客户端会话（可选，根据业务需求）
await keycloakAuth.logout();
// 初始化testClient2实例
const keycloakClient2 = await initKeycloak("testClient2");
// 获取testClient2下的角色
const client2Roles = keycloakClient2.resourceAccess?.testClient2?.roles || [];

关键配置注意事项 #

• 确保Keycloak后台中，testClient1和testClient2的Valid Redirect URIs都配置了你的React应用地址（如http://localhost:3000/*）
• 如果使用静默SSO检查，需在项目根目录放置silent-check-sso.html文件，内容如下：

<!DOCTYPE html>
<html>
  <body>
    <script>
      parent.postMessage(location.href, location.origin);
    </script>
  </body>
</html>

• 确保客户端开启Full Scope Allowed（或手动配置了角色权限），否则resourceAccess字段无法返回对应角色信息

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