在 keycloak 登录页面上显示应用程序名称

Posted 2023-02-19

【中文标题】在 keycloak 登录页面上显示应用程序名称

【英文标题】：Display application name on keycloak login page

【发布时间】：2018-11-22 19:13:49

【问题描述】：

我有两个应用程序 App1 和 App2 与 keycloak 交互以进行用户身份验证。

我想在keycloak 登录页面上显示应用程序名称。

例如：如果用户正在登录App1，keycloak 登录页面应显示“登录到 App1”。 App2 也应该发生同样的情况。

如何做到这一点？

【参考方案1】：

如果您使用自定义登录主题，您可以在 Freemarker 模板中访问客户端名称或客户端 ID，分别为 $client.name 或 $client.clientId。客户端名称可能最适合这种情况：只需通过 Keycloak 管理控制台将其设置为应用程序的名称即可。

不幸的是，可用的 Freemarker 变量没有得到很好的记录。您可以查看 Keycloak 的源代码（尤其是 FreemarkerLoginFormsProvider 类）以查找其他可用的变量。寻找到attributes.put的电话。

【参考方案2】：

如果您想将两者保持在同一个领域，只需将 javascript 代码添加到 custom theme login page。 client_id 作为请求参数传递给登录页面。例如：

function getParameterByName(name, url) 
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));


$(window).load(function() 
    var clientName = getParameterByName('client_id');
    var title = document.getElementById('title');
    title.innerhtml += clientName;
);

另请参阅：

How can I get query string values in JavaScript? How to append data to div using JavaScript? JavaScript that executes after page load

【参考方案3】：

我的猜测：使用两个不同的领域 (App1, App2) 并为每个领域创建自定义 Keycloak 主题 - https://www.keycloak.org/docs/latest/server_development/index.html#_themes

【讨论】：

我也想到了这个。但我正试图在同一个领域做到这一点。

找到解决方案，在 admin>client>your client 的 Client 中有一个属性 Name，可以通过 $client.name 在客户端层访问。这解决了我的目的。

如果我有 20 个客户端，我应该复制我的领域 20 次吗？

阅读我的评论..第二个。

最初的问题是关于应用程序名称，而不是客户端名称。所以这取决于你想在 UI 中显示什么。