You need to import realm/users data and add /shell endpoint too.
第1步:启动关键行动
Step 2: Import realm/users
步骤3:修改<代码>指数.html
步骤4:启动<代码>express 服务器
第5步:用户名
第1步:启动关键行动
Version 23.0.3
Port 8180
version: 3.7
services:
postgres:
image: postgres
volumes:
- postgres_data:/var/lib/postgresql/data
environment:
POSTGRES_DB: keycloak
POSTGRES_USER: keycloak
POSTGRES_PASSWORD: password
keycloak:
image: quay.io/keycloak/keycloak:23.0.3
command: start-dev
environment:
KC_DB: postgres
KC_DB_URL: jdbc:postgresql://postgres/keycloak
KC_DB_USERNAME: keycloak
KC_DB_PASSWORD: password
KC_HTTP_ENABLED: true
KC_HEALTH_ENABLED: true
KEYCLOAK_ADMIN: admin
KEYCLOAK_ADMIN_PASSWORD: admin
ports:
- 8180:8080
restart: always
depends_on:
- postgres
volumes:
postgres_data:
driver: local
送达
docker compose up
Step 2: Import realm/users
Save as realm-shell-import.json
{
"realm": "lifeinsurace",
"enabled": true,
"clients": [
{
"clientId": "lifeinsurace-appshell",
"enabled": true,
"publicClient": true,
"directAccessGrantsEnabled": true,
"redirectUris": [ "http://localhost:8080/shell/*" ]
}
],
"users" : [
{
"username" : "alice",
"enabled": true,
"email" : "[email protected]",
"firstName": "Alice",
"lastName": "Liddel",
"credentials" : [
{ "type" : "password",
"value" : "alice" }
],
"realmRoles": [ "user", "offline_access" ],
"clientRoles": {
"account": [ "manage-account" ]
}
},
{
"username" : "admin",
"enabled": true,
"email" : "[email protected]",
"firstName": "Admin",
"lastName": "Test",
"credentials" : [
{ "type" : "password",
"value" : "admin" }
],
"realmRoles": [ "user","admin" ],
"clientRoles": {
"realm-management": [ "realm-admin" ],
"account": [ "manage-account" ]
}
}
],
"roles" : {
"realm" : [
{
"name": "user",
"description": "User privileges"
},
{
"name": "admin",
"description": "Administrator privileges"
}
]
}
}
After Import
步骤3:修改<代码>指数.html
File location
该法典将包括该法典。
const keycloak = new Keycloak({
"realm": "lifeinsurace",
"auth-server-url": "http://localhost:8180",
"ssl-required": "external",
"resource": "lifeinsurace-appshell",
"public-client": true,
"clientId":"lifeinsurace-appshell"
});
指数.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Keycloak Single-Page Application Example</title>
</head>
<body>
<div id="user" style="display: none;">
<button id="logout" type="button">Logout</button>
<button id="showMyAccount" type="button">My Account</button>
<button id="showIdToken" type="button">Show ID Token</button>
<button id="showAccessToken" type="button">Show Access Token</button>
<button id="refreshToken" type="button">Refresh</button>
<hr>
<h2 id="name"></h2>
<pre id="output"></pre>
</div>
<script src="KC_URL/js/keycloak.js"></script>
<script type="module">
const outputElement = document.getElementById("output");
const nameElement = document.getElementById("name");
const userElement = document.getElementById("user");
function output(content) {
if (typeof content === "object") {
content = JSON.stringify(content, null, 2);
}
outputElement.textContent = content;
}
function showProfile() {
const name =
keycloak.idTokenParsed.name ||
keycloak.idTokenParsed.preferred_username;
nameElement.textContent = `Hello ${name}`;
userElement.style.display = "block";
}
document.getElementById("logout").addEventListener("click", () => {
keycloak.logout();
});
document.getElementById("showIdToken").addEventListener("click", () => {
output(keycloak.idTokenParsed);
});
document
.getElementById("showAccessToken")
.addEventListener("click", () => {
output(keycloak.tokenParsed);
});
document
.getElementById("refreshToken")
.addEventListener("click", async () => {
await keycloak.updateToken(-1);
output(keycloak.idTokenParsed);
showProfile();
});
document
.getElementById("showMyAccount")
.addEventListener("click", async () => {
await keycloak.accountManagement()
});
const keycloak = new Keycloak({
"realm": "lifeinsurace",
"auth-server-url": "http://localhost:8180",
"ssl-required": "external",
"resource": "lifeinsurace-appshell",
"public-client": true,
"clientId":"lifeinsurace-appshell"
});
await keycloak.init({ onLoad: "login-required" });
showProfile();
</script>
</body>
</html>
Step 4: launching express server
Save as app.js
import express from express ;
import stringReplace from string-replace-middleware ;
const app = express();
const port = 8080;
app.use(stringReplace({
KC_URL: process.env.KC_URL || "http://localhost:8180"
}));
app.use( / , express.static( public ));
app.use( /shell , express.static( shell ));
app.listen(port, () => {
console.log(`Listening on port ${port}.`);
});
普遍依赖
npm install
采用相同的<代码>包装。
{
"name": "spa",
"type": "module",
"scripts": {
"start": "node app.js",
"test": "npm run create-realm && npx playwright test --project=chromium && npm run delete-realm",
"create-realm": "node scripts/create-realm.js",
"delete-realm": "node scripts/delete-realm.js"
},
"dependencies": {
"@keycloak/keycloak-admin-client": "23.0.6",
"express": "^4.18.2",
"string-replace-middleware": "^1.0.2"
},
"devDependencies": {
"@playwright/test": "^1.33.0"
}
}
送达
npm start
第5步:用户名
开放式浏览器
http://localhost:8080/shell/
username: admin
password: admin
Result
