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

Question

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

https://stackoverflow.com/a/32890003/2940265

但我找不到如何在javascript端实现它。

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

请帮帮忙

Answer 1

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

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中。

除了自定义attrbutes之外，以下元素可作为用户配置文件的一部分：

• id
• 用户名
• 电子邮件
• 名字
• 姓氏
• 已启用
• 电子邮件验证
• totp
• 创建时间戳

Answer 2

我找到了答案。

我将在这里发布，因为有人可能会发现它很有用。

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

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

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

然后选择用户-

现在点击保存

现在，我们必须将自定义属性映射到KeyClope客户端。要使用KeyClope，前端必须在客户端（左侧栏）中有客户端，如果没有，则必须为此配置客户端。就我而言，我的客户是测试应用

选择客户-

对于令牌声明名称，为了方便起见，你应该给出你的自定义属性键（在我的情况下是公司ID），我使用公司ID作为名称、领域角色前缀、令牌声明名称。您应该在映射器类型中选择用户属性，在声明JSON类型中选择字符串

然后点击Save。现在，您可以从javascript获取自定义属性。

假设您的keydove JavaScript对象是keydove，您可以使用keydove获得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的答案。快乐编码：）