如何自定义Keycloak登录主题将社交登录按钮置于顶部？

当然可以调整，核心是通过自定义Keycloak的登录主题来修改页面布局，具体步骤如下：

• 复制默认主题作为自定义基础
  找到Keycloak安装目录下的themes文件夹，复制其中的keycloak主题（推荐用这个，是默认的定制版主题）到同一目录下，重命名为比如custom-login-theme。如果是Quarkus版本的Keycloak（17+），主题目录可能在conf/themes下。

• 修改登录页面模板
  进入自定义主题的login子目录，打开login.ftl文件（这是登录页的FreeMarker模板）。找到社交登录相关的代码块——通常是包含<#include "social.ftl">的部分，或者直接是渲染社交登录按钮的${providerTemplates}变量。把这部分代码移动到用户名密码登录表单的前面。

  举个例子，原来的结构大概是：

  <div class="card-pf">
      <#include "messages.ftl">
      <form id="kc-login-form" class="form-horizontal" action="${url.loginAction}" method="post">
          <!-- 用户名密码输入框等内容 -->
      </form>
      <#include "social.ftl">
  </div>
  

  修改后变成：

  <div class="card-pf">
      <#include "messages.ftl">
      <#include "social.ftl">
      <form id="kc-login-form" class="form-horizontal" action="${url.loginAction}" method="post">
          <!-- 用户名密码输入框等内容 -->
      </form>
  </div>
  

• 启用自定义主题
  登录Keycloak管理控制台，进入你要修改的Realm，点击左侧菜单的「Themes」，在「Login Theme」下拉列表中选择你创建的custom-login-theme，保存后刷新登录页面，就能看到社交登录按钮移到顶部了。

注意：不要直接修改默认的keycloak或base主题，否则Keycloak升级时你的修改会被覆盖。如果是Docker部署的Keycloak，需要把自定义主题目录挂载到容器内对应的路径。

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