Keycloak позволяет создавать собственные темы оформления для страниц авторизации и администрирования. Ваш сценарий, включающий использование React и кастомных CSS/SCSS стилей, может быть реализован следующим способом:
1. **Создание кастомной темы:**
Keycloak использует темы для оформления интерфейса, которые можно модифицировать или создавать с нуля. Темы состоят из набора файлов `.ftl` (Freemarker templates), файлов ресурсов (картинки, CSS, JavaScript) и файла `theme.properties`, описывающего свойства и особенности темы.
2. **Настройка файлов стилей:**
Вы можете добавить свои CSS/SCSS файлы в каталог ресурсов своей темы. SCSS файлы следует сначала компилировать в CSS, так как Keycloak не поддерживает SCSS напрямую.
В структуре директории вашей темы это будет выглядеть примерно так:
```
/themes
/your-theme
/login
/resources
/css
your-custom-styles.css
/theme.properties
```
Ваши SCSS файлы также могут находиться в этой структуре, но вам нужно скомпилировать их в CSS перед тем, как Keycloak сможет их использовать.
3. **Настройка `theme.properties`:**
Вы должны указать в `theme.properties` относительные пути к вашим CSS файлам, чтобы Keycloak знал, какие стилевые файлы использовать:
```
styles=css/your-custom-styles.css
```
4. **Работа с файлами Freemarker (.ftl):**
Расширение файлов `.ftl` связано с шаблонами Freemarker, которые Keycloak использует для генерации HTML. Если у вас остается какая-то проблема после настройки своих стилей и темы, это может быть связано с тем, что вы не верно настроили или не внесли необходимые изменения в шаблоны `.ftl`.
5. **Деплой и выбор темы:**
После того как ваша тема и стили готовы, вы должны разместить их в соответствующей директории Keycloak и через админ-панель Keycloak выбрать вашу тему в настройках для специфического realm или в общих настройках для всех realm.
6. **Очистка кеша:**
Keycloak кеширует статические ресурсы. Вам может потребоваться очистить кеши Keycloak после изменения темы для уверенности, что новые стили применятся.
Примечание:
- Keycloak не поддерживает встраивание React (или любого другого modern JS фреймворка) непосредственно в страницы авторизации без значительных усилий, так как эти страницы преимущественно используют серверный рендеринг с помощью Freemarker шаблонов. Если вы хотите полностью использовать React, вам возможно придется использовать headless режим Keycloak, где авторизация обрабатывается через API, а интерфейс полностью контролируется вашим React приложением.
Если после настройки `theme.properties` и `.ftl` файлов проблемы остаются, убедитесь, что:
- Пути к ресурсам указаны верно в `theme.properties`.
- Измен