React集成Keycloak：如何区分用户登录来源并获取用户ID？

一、区分用户登录来源 #

Keycloak在用户通过第三方身份提供商（比如Google）登录时，会在ID Token中注入identity_provider字段，你可以直接从解析后的Token中读取这个值判断登录渠道：

• 用户用Keycloak自有账号登录时，该字段不存在，或值为keycloak（取决于Keycloak版本）
• 用户通过Google登录时，该字段的值就是你在Keycloak中配置的Google身份提供商别名（通常是google）

在React项目中，用keycloak-js库的话，登录成功后可这样获取判断：

// 拿到解析后的ID Token数据
const idTokenData = keycloak.idTokenParsed;
// 识别登录来源
if (idTokenData.identity_provider === 'google') {
  console.log('用户通过Google登录');
} else {
  console.log('用户通过Keycloak自有账号登录');
}

二、获取用户ID存入数据库 #

Keycloak为每个用户分配了唯一的sub（Subject）字段，这就是用户的全局唯一ID，可直接存入数据库作为关联标识。获取方式如下：

// 方式1：从解析后的ID Token中提取
const userId = keycloak.idTokenParsed.sub;
// 方式2：直接从keycloak实例属性获取
const userId = keycloak.sub;

这个sub值在用户生命周期内不会变更，完全可以作为数据库用户记录的唯一标识。如果需要获取用户其他自定义属性，可调用keycloak.loadUserProfile()方法获取完整用户信息：

keycloak.loadUserProfile().then(profile => {
  console.log('用户完整信息:', profile);
  // profile.id 和 sub 为同一值
});

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