Реализация, ориентированная на пользователя
Ваша команда решила использовать «Keycloak» в качестве нового безопасного инструмента, и вы, как фронтенд-разработчик, должны настроить его в своих приложениях Vue? Поздравляю! Вы только что нашли способ реализовать простой, умный и ориентированный на пользователя подход.
Нет функции setInterval, нет сохраненных бесполезных токенов
Как и вы, когда мне пришлось реализовать Keycloak в моем приложении Vue, я нашел несколько руководств, но большинство из них рассматривалось как POC (доказательство концепции), поскольку они используют setIntervalfunction для обновления токена или хранения бесполезных токенов и обновления токенов. Дело в том, что когда я хочу что-то реализовать, я хочу быть уверенным в себе и понимать, как это работает.
Обнаружение адаптера Keycloak JS
Покопавшись в официальной документации Keycloak JS Adapter, я заметил, что экземпляр Keycloak поставляется с конфигурацией, параметрами инициализации и двумя основными функциями:
Конфигурация
const keycloak = new Keycloak({
url: 'http://keycloak-server/auth',
realm: 'myrealm',
clientId: 'myapp'
});В конструкторе вы передаете конфигурацию проекта Keycloak.
в этом
keycloak.init(initOptions)keycloak.init({ onLoad: 'login-required' })
Функцию init следует вызывать в вашем приложении один раз. Можно установить параметры инициализации. В моем случае я решил использовать параметр onLoad со значением login-required, который проверяет, вошел ли пользователь уже в систему. В противном случае отобразится страница входа в Keycloak.
updateToken
keycloak.updateToken(minvalidity: number)Функция updateToken используется для обновления токена доступа и возобновления сеанса пользователя. Например, если срок жизни токена доступа в настройках вашей области установлен на 5 минут и вы установили 70 (секунд) в качестве минимального значения, функция updateToken проверит, истечет ли срок действия токена в течение этих 70 секунд. Если этого не произойдет, ничего не будет сделано. Если это так, Keycloak попытается возобновить сеанс пользователя. Если срок действия токена уже истек, Keycloak отключит пользователя и перенаправит на страницу входа.
Ориентированный на пользователя подход
Узнав, как работает JS-адаптер Keycloak, я решил использовать Keycloak с умным и ориентированным на пользователя подходом. Что это значит ? Значит, я сосредоточился на функции updateToken и подумал, где и когда ее использовать. По моему мнению, updateToken должен вызываться, когда пользователь выполняет действия в приложении. Я выделил 3 из них:
- Взаимодействие с API: создание, редактирование, удаление…
- Навигация
- Сосредоточьтесь на вкладке приложения
Это означает, что каждый раз, когда пользователь совершает одно из этих событий, должна вызываться функция updateToken. Таким образом, если пользователь совершит действие с истекшим сеансом, он будет отключен мгновенно. Это важно, чтобы пользователь доверял приложению.
Сколько раз я вижу пользователей, которые обновляют страницу, чтобы убедиться, что они все еще подключены.
В следующем разделе посмотрим, как мне это удалось.
Реализация с использованием Vue CLI
Я предполагаю, что у вас уже есть приложение Vue, созданное с помощью Vue CLI, или вы собираетесь его создать.
Создайте файл env с переменными конфигурации
Переменные должны быть предоставлены вашей командой. Не забывайте, что каждый из них должен иметь префикс VUE_APP, так как это обрабатывается с помощью Vue CLI.
Установите плагин Keycloak с vue cli
npm i keycloak-js —S
Создайте файл плагина Keycloak
Файл плагина создаст одноэлементный экземпляр Keycloak, который будет доступен с файлом Vue global.
import Vue from 'vue'; Vue.$keycloak
Другим разработчикам также легче найти, где настроен экземпляр Keycloak. Файл необходимо поместить в каталог плагинов. Вы заметили, что значения конфигурации устанавливаются из переменных среды. Если вы используете Netlify, их легко настроить.
Инициализация Keycloak
В вашем основном файле (main.js или main.ts) запустите Keycloak, используя параметр login-required, поэтому, если пользователь уже вошел в систему, приложение Vue будет загружено. В противном случае отобразится страница входа в систему. Обратите внимание, что Keycloak перенаправляет на страницу, где он был запущен. Поэтому, если вы загружаете свое приложение с URL-адреса, отличного от URL-адреса домашней страницы (например, страницы продукта), Keycloak будет перенаправлять на эту страницу продукта.
Поскольку приложение Vue загружается лениво, подумайте о том, чтобы показать пользователям приятное сообщение о загрузке, отредактировав индексный html-файл в общедоступном каталоге.
Обновите токен пользователя
Поскольку функция updateToken принимает параметр и ее нужно использовать в нескольких файлах, я решил создать функцию промежуточного программного обеспечения, чтобы упростить управление. Я поместил файл в каталог под названием "middleware", аналогично каркасу Nuxt. Функция промежуточного программного обеспечения возвращает новый токен, если он обновлен.
Вызов промежуточного программного обеспечения в действиях пользователя
Запомните действия, на которые я нацелен: взаимодействия с API, навигация, фокус на вкладке приложения.
Взаимодействие с API
Я предполагаю, что вы используете Axios и даже лучше плагин Axios для Vue CLI. Вам просто нужно добавить перехватчик запросов. У него есть 2 преимущества.
- Во-первых, перед отправкой запроса необходимо проверить, действителен ли сеанс пользователя.
- Во-вторых, токен всегда обновляется в заголовках авторизации запросов API.
Навигация
Просто вызовите промежуточное ПО в $routecallback в App.vue. Таким образом, для каждой навигации по маршрутизатору будет вызываться промежуточное программное обеспечение, которое отключит пользователя с истекшим сеансом.
Сосредоточьтесь на вкладке
У пользователей вашего приложения также есть другие открытые вкладки в своем браузере. Поэтому, если они вернутся через долгое время на вкладку вашего приложения, будет вызвано промежуточное ПО. Следующий код можно разместить в основном файле.
Что ж, все готово. Надеюсь, вы оценили это руководство по добавлению Keycloak в приложение Vue. Я был бы рад получить от вас аплодисменты и / или комментарии.
