Keycloak 集成项目教程

Keycloak 集成项目教程

keycloak-integrationsRepository will contain integration patterns with keycloak项目地址:https://gitcode.com/gh_mirrors/ke/keycloak-integrations

1. 项目的目录结构及介绍

keycloak-integrations/
├── README.md
├── docker-compose.yml
├── keycloak/
│   ├── Dockerfile
│   ├── themes/
│   │   └── custom/
│   │       └── login/
│   │           └── theme.properties
│   └── realm-config/
│       └── realm-export.json
├── scripts/
│   └── setup.sh
└── webapp/
    ├── Dockerfile
    ├── package.json
    ├── public/
    │   └── index.html
    └── src/
        ├── App.js
        ├── index.js
        └── keycloak.json

目录结构介绍

• README.md: 项目说明文档。
• docker-compose.yml: Docker 容器编排文件。
• keycloak/: Keycloak 服务配置目录。
  • Dockerfile: Keycloak 服务的 Dockerfile。
  • themes/: 自定义主题目录。
    • custom/: 自定义主题文件夹。
      • login/: 登录页面主题。
        • theme.properties: 主题配置文件。
  • realm-config/: 领域配置文件目录。
    • realm-export.json: 领域配置导出文件。
• scripts/: 脚本目录。
  • setup.sh: 项目初始化脚本。
• webapp/: 前端应用目录。
  • Dockerfile: 前端应用的 Dockerfile。
  • package.json: 前端应用的依赖管理文件。
  • public/: 公共资源目录。
    • index.html: 前端应用的入口 HTML 文件。
  • src/: 前端应用源码目录。
    • App.js: 前端应用主组件。
    • index.js: 前端应用入口文件。
    • keycloak.json: Keycloak 客户端配置文件。

2. 项目的启动文件介绍

Docker Compose 文件 (docker-compose.yml)

version: '3.8'
services:
  keycloak:
    image: jboss/keycloak:latest
    container_name: keycloak
    ports:
      - "8080:8080"
    environment:
      - KEYCLOAK_USER=admin
      - KEYCLOAK_PASSWORD=admin
    volumes:
      - ./keycloak/realm-config:/opt/jboss/keycloak/standalone/configuration/realm-config
      - ./keycloak/themes:/opt/jboss/keycloak/themes

  webapp:
    build: ./webapp
    container_name: webapp
    ports:
      - "3000:3000"
    environment:
      - KEYCLOAK_URL=http://keycloak:8080/auth
    depends_on:
      - keycloak

前端应用启动文件 (webapp/src/index.js)

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Keycloak from 'keycloak-js';

const keycloak = Keycloak('/keycloak.json');

keycloak.init({ onLoad: 'login-required' }).then((authenticated) => {
  if (authenticated) {
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    );
  } else {
    console.log('Failed to authenticate');
  }
});

3. 项目的配置文件介绍

Keycloak 客户端配置文件 (webapp/src/keycloak.json)

{
  "realm": "myrealm",
  "url": "http://localhost:8080/auth",
  "clientId": "myclient",
  "credentials": {
    "secret": "your-keycloak-client-secret"
  }
}

Keycloak 领域配置文件 (keycloak/realm-config/realm-export.json)

{
  "realm": "myrealm",
  "enabled": true,
  "sslRequired": "external",
  "clients": [
    {

keycloak-integrationsRepository will contain integration patterns with keycloak项目地址:https://gitcode.com/gh_mirrors/ke/keycloak-integrations