Демонстрационный проект, показывающий интеграцию Keycloak с Spring Boot (бэкенд) и Vue.js (фронтенд).
Проект состоит из трех основных элементов:
- Keycloak - сервер аутентификации и авторизации
- Spring Boot - бэкенд-приложение, взаимодействующее с Keycloak
- Vue.js - фронтенд-приложение, взаимодействующее с бэкендом
+-------------+ +---------------+ +------------+
| | | | | |
| Frontend +----->+ Backend +----->+ Keycloak |
| (Vue.js) | | (Spring Boot) | | |
| | | | | |
+-------------+ +---------------+ +------------+
Все компоненты проекта можно запустить в Docker-контейнерах.
1. Запуск Keycloak http://localhost:8080
# Запуск Keycloak в Docker
docker run --name kc_demo -d -p 8080:8080 -e KC_BOOTSTRAP_ADMIN_USERNAME=admin -e KC_BOOTSTRAP_ADMIN_PASSWORD=admin quay.io/keycloak/keycloak:26.1.4 start-devПосле запуска Keycloak необходимо минимально настроить сервер: (p.s. визуальная инструкция здесь: keycloak/README.md)
- Создать новый realm (
demo_realm) - Создать клиент (
demo_client) с настройками:
- Client authentication:
On - Authentication flow:
off - Direct access grants:
On
- Важно: Скопировать секретный ключ клиента из настроек Keycloak и обновить его в файле
backend/src/main/resources/application.propertiesв переменнойkeycloak.credentials.secret - Создать пользователя (
demo_user) Важно: для пользователя необходимо заполнить все поля: "Username", "Email", "First name", "Last name" - Задать пользователю пароль (
1234, temporary:off)
2. Запуск бэкенда http://localhost:8888
Подробные инструкции по запуску бэкенда находятся в файле backend/README.md.
# Сборка образа в директории ./backend
docker build -t kc_demo_backend_image .
# Запуск контейнера
docker run --name kc_demo_backend_container -d -p 8888:8888 kc_demo_backend_image3. Запуск фронтенда http://localhost:5173
Подробные инструкции по запуску фронтенда находятся в файле frontend/README.md.
# Сборка образа в директории ./frontend
docker build -t kc_demo_frontend_image .
# Запуск контейнера
docker run --name kc_demo_frontend_container -d -p 5173:80 kc_demo_frontend_image