Автор оригинала: Sampada Wagde.
1. Обзор
Keycloak -это сторонний сервер авторизации, используемый для управления требованиями к аутентификации и авторизации наших веб-или мобильных приложений. Он использует страницу входа по умолчанию для входа пользователей от имени нашего приложения.
В этом уроке мы сосредоточимся на том, как мы можем настроить страницу входа в систему для нашего сервера Keycloak , чтобы у нас был другой внешний вид. Мы увидим это как для автономных, так и для встроенных серверов.
Для этого мы будем опираться на настройку тем для учебника Keycloak.
2. Настройка автономного сервера блокировки ключей
Продолжая наш пример пользовательской темы, давайте сначала рассмотрим автономный сервер.
2.1. Настройки консоли Администратора
Чтобы запустить сервер, давайте перейдем в каталог, в котором хранится наш дистрибутив Keycloak, и выполним эту команду из папки bin :
./standalone.sh -Djboss.socket.binding.port-offset=100
После запуска сервера нам нужно только обновить страницу, чтобы увидеть отражение ваших изменений, благодаря изменениям, которые мы ранее внесли в standalone.xml .
Теперь давайте создадим новую папку с именем login внутри каталога themes/custom . Чтобы все было просто, мы сначала скопируем все содержимое каталога themes/keycloak/login здесь. Это тема страницы входа по умолчанию.
Затем мы перейдем в консоль администратора , введите initial 1 / zag 1!QAZ учетные данные и перейдите на вкладку Темы для нашего царства:
Мы выберем custom для темы Входа в систему и сохраним наши изменения.
С этим набором мы теперь можем попробовать некоторые настройки. Но перед этим давайте взглянем на страницу входа по умолчанию :
2.2. Добавление Настроек
Теперь предположим, что нам нужно изменить фон. Для этого мы откроем login/resources/css/login.css и изменим определение класса:
.login-pf body {
background: #39a5dc;
background-size: cover;
height: 100%;
}Чтобы увидеть эффект, давайте обновим страницу:
Далее, давайте попробуем изменить метки для имени пользователя и пароля.
Для этого нам нужно создать новый файл messages_en.properties в папке theme/login/messages . Этот файл переопределяет пакет сообщений по умолчанию, используемый для заданных свойств:
usernameOrEmail=Enter Username: password=Enter Password:
Чтобы проверить, снова обновите страницу:
Предположим, мы хотим изменить весь HTML или его часть, нам нужно будет переопределить шаблоны freemarker, которые Keycloak использует по умолчанию. Шаблоны по умолчанию для страницы входа хранятся в каталоге base/login .
Допустим, мы хотим, чтобы WELCOME TO BAELDUNG отображался вместо SPRINGBOOTKEYCLOAK .
Для этого нам нужно скопировать base/login/template.ftl в нашу папку custom/login .
В скопированном файле измените строку:
${kcSanitize(msg("loginTitleHtml",(realm.displayNameHtml!'')))?no_esc}
К:
WELCOME TO BAELDUNG
На странице входа в систему теперь будет отображаться наше пользовательское сообщение вместо имени области.
3. Настройка встроенного сервера блокировки ключей
Первым шагом здесь является добавление всех артефактов, которые мы изменили для автономного сервера, в исходный код нашего встроенного сервера авторизации.
Итак, давайте создадим новую папку login внутри src/main/resources/themes/custom с этим содержимым:
Теперь все, что нам нужно сделать, это добавить инструкцию в наш файл определения области baeldung-realm.json , чтобы custom использовался для нашего типа темы входа в систему:
"loginTheme": "custom",
Мы уже перенаправили в каталог пользовательских тем, чтобы наш сервер знал, откуда взять файлы тем для страницы входа в систему.
Для тестирования давайте перейдем на страницу входа в систему:
Как мы видим, здесь отображаются все настройки, выполненные ранее для автономного сервера, такие как фон, имена меток и заголовок страницы.
4. Обход Страницы Входа в Keycloak
Технически мы можем полностью обойти страницу входа в Keycloak, используя пароль или прямой доступ поток. Однако настоятельно рекомендуется, чтобы этот тип гранта вообще не использовался.
В этом случае нет промежуточного этапа получения кода авторизации, а затем получения токена доступа в обмен. Вместо этого мы можем напрямую отправить учетные данные пользователя через вызов REST API и получить в ответ маркер доступа.
Это фактически означает, что мы можем использовать нашу страницу входа в систему для сбора идентификатора и пароля пользователя и вместе с идентификатором клиента и секретом отправить его в Keycloak в СООБЩЕНИИ на его токен конечную точку.
Но опять же, поскольку Keycloak предоставляет богатый набор функций для входа в систему, таких как remember me, сброс пароля и MFA, и это лишь некоторые из них, нет особых причин обходить его.
5. Заключение
В этом уроке мы узнали, как изменить страницу входа по умолчанию для Keycloak и добавить наши настройки .
Мы видели это как для автономного, так и для встроенного экземпляра.
Наконец, мы вкратце обсудили, как полностью обойти страницу входа в Keycloak и почему бы этого не сделать.
Как всегда, исходный код доступен на GitHub. Для автономного сервера он находится на учебниках GitHub , а для встроенного экземпляра-на OAuth GitHub .