如何安裝keycloak,並且更換login page

Published: at 下午05:26

docker-cli

docker run -p 127.0.0.1:8080:8080 -e KC_BOOTSTRAP_ADMIN_USERNAME=admin -e KC_BOOTSTRAP_ADMIN_PASSWORD=admin quay.io/keycloak/keycloak:26.5.2 start-dev

docker-compose

version: '3.8'

services:
  keycloak:
    image: quay.io/keycloak/keycloak:latest
    container_name: keycloak
    ports:
      - "8080:8080"
    environment:
      KEYCLOAK_ADMIN: admin
      KEYCLOAK_ADMIN_PASSWORD: admin
    command: 
      - start-dev
    volumes: 
      - keycloak_data:/opt/keycloak/data 
volumes: 
  keycloak_data:

docker volume create keycloak_data

如何修改登入頁面?

按照 以下資料夾結構創建 檔案

keycloak-theme/
└── mytheme
    └── login
        ├── theme.properties
        ├── login.ftl
        └── resources
            └── css
                └── style.css
parent=base
import=common/keycloak

繼承 base（官方推薦）

使用 Keycloak 共用樣式

<!DOCTYPE html>
<html>
<head>
  <title>My Custom Login</title>
  <link rel="stylesheet" href="${url.resourcesPath}/css/style.css">
</head>
<body>
  <h1>🚀 My Company Login</h1>

  <form action="${url.loginAction}" method="post">
    <input name="username" placeholder="Username">
    <input name="password" type="password" placeholder="Password">
    <button type="submit">Login</button>
  </form>
</body>
</html>

ftl 格式 是keycloak的使用格式


body {
  background: #111;
  color: #fff;
  font-family: sans-serif;
}

input {
  display: block;
  margin: 10px 0;
}

然後 在docker-compose.yml 增加 volumes 增加

      - ./keycloak-theme:/opt/keycloak/themes

就會看起來像

version: '3.8'

services:
  keycloak:
    image: quay.io/keycloak/keycloak:latest
    container_name: keycloak
    ports:
      - "8080:8080"
    environment:
      KEYCLOAK_ADMIN: admin
      KEYCLOAK_ADMIN_PASSWORD: admin
    command: 
      - start-dev
    volumes: 
      - keycloak_data:/opt/keycloak/data 
      - ./keycloak-theme:/opt/keycloak/themes
volumes: 
  keycloak_data:

然後

docker-compose up -d

連線上去時 看到的登入頁面 會還是預設的

但登入後 進到

Realm Settings -> Themes

更換 Login Theme: mytheme 存檔

登出後 重新登入 就可以看到客製化的 loging page 了

問題排除

請刪除 docker volumes 再重新創創看

ref

https://www.keycloak.org/getting-started/getting-started-docker

https://devsoap.com/setting-up-keycloak-with-docker-a-step-by-step-guide/