从 JavaScript 检索自定义属性（使用 Javascript 适配器）Keycloak

Question

我有一个具有如下自定义属性的 keycloak 用户。

我使用 Reactjs 作为前端。我想从 javascript 端检索自定义属性。像这个答案状态。

但我在 javascript 方面找不到如何做到这一点。

我在 Chrome 中进行了调试，但找不到适合自定义属性的结果。

请帮忙

Answer 1

我找到了答案。

我会post在这里，因为有人可能会觉得它有用。

好吧，您可以向用户添加自定义属性，但是您需要额外的配置才能从 javascript 端检索它。为了初学者的方便，我将写从添加客户到从 javascript 检索属性的答案（在我的例子中是 react js）。

让我们为用户添加自定义属性。

登录 keycloak 并选择你的领域（如果你有多个领域，除非你会自动登录到领域）

之后select用户->查看所有用户 Select 你的用户在我的例子中是 Alice Select Attributes 并添加自定义属性（在我的例子中，我添加了自定义属性调用 companyId，如下所示）

现在点击保存

现在我们必须使用我们的 keycloak 客户端映射自定义属性。要在前端使用 keycloak，您必须在 Clients（左侧栏）中有客户端如果还没有，则必须为此配置客户端。就我而言，我的客户是 test-app

因此 select 客户端 -> 测试应用程序 -> 映射器 现在我们必须创建 Mapper。单击创建

对于 Token Claim Name 你应该给你的自定义属性键（在我的例子中是 companyId）为了我方便，我使用名称的公司 ID、领域角色前缀、令牌声明名称。您应该在 Mapper Type 中选择 User Attribute 并为 Claim [=83 选择 String =]类型

之后点击保存。现在您可以从 javascript.

获取您的自定义属性

假设你的 keycloak JavaScript 对象是 keycloak，你可以使用 keycloak 获取 companyId。

let companyId = keyCloak.idTokenParsed.companyId;

示例代码如下（我的代码在 react.js）

keyCloak.init({
    onLoad: 'login-required'
}).success(authenticated => {
    if (authenticated) {
        if (hasIn(keyCloak.tokenParsed, 'realm_access')) {
            if (keyCloak.tokenParsed.realm_access.roles === []) {
                console.log("Error: No roles found in token")
            } else {
                let companyId = keyCloak.idTokenParsed.companyId;
            }
        } else {
            console.log("Error: Cannot parse token");
        }
    } else {
        console.log("Error: Authentication failed");
    }
}).error(e => {
    console.log("Error: " + e);
    console.log(keyCloak);
});

希望有人觉得这个答案有用，因为我可以找到 JavaScript 的答案。编码愉快:)

Answer 2

可以通过用户配置文件检索属性：

keycloak = ... // Keycloak instance

keycloak.loadUserProfile().success(function(profile) {
    let companyId = profile.attributes.companyId[0];
    alert('Company Id: ' + companyId);
}).error(function() {
    alert('Failed to load user profile');
});

每个属性都是一个字符串数组。所以除非你有多个公司ID，否则数组的长度为1，相关数据在元素0中。

除了自定义属性之外，用户个人资料中还提供以下元素：

编号
用户名
电子邮件
名字
姓氏
启用
电子邮件已验证
顶
创建的时间戳

从 JavaScript 检索自定义属性（使用 Javascript 适配器）Keycloak

Retrieve Custom Attribute from JavaScript (using Javascript Adapter) Keycloak

javascript

reactjs

keycloak