Автор оригинала: FreeCodeCamp Community Member.
Томас Рейнке
В этом руководстве вы узнаете, как настроить приложение BoaterPlate на основе Vert.x (Java) в качестве бэкэнда и Vuejs в качестве внешнего фокуса с фокусом на аутентификации пользователя против KeyCloak через OAUTH2. Как только пользователь вошел в систему, Vertx-Vue-KeyCloak Приложение также демонстрирует, как запросить Backend vert.x, отправлять данные (мутации) и как публикация/подписаться между vert.x и vuejs.
Код E2E для этой статьи размещен на GH здесь Отказ
Шаг 1 – Подготовительная работа
Установить KeyCloak
В этом примере мы собираемся использовать KeyCloak в качестве поставщика управления аутентификацией и авторизацией. KeyCloak Является ли идентификатор с открытым исходным кодом и управлением доступами, предлагая Redhat, что обеспечивает OAUTH2 и многое другое. KeyCloak поставляется с консолью веб-администратора для администрирования сервера. Мы можем легко запустить его на основе Docker:
docker run -d — name keycloak -p 38080:8080 -e KEYCLOAK_USER=admin -e KEYCLOAK_PASSWORD=admin -e KEYCLOAK_LOGLEVEL=DEBUG jboss/keycloak
После запуска этого контейнера KeyCloak Консоль администратора будет доступна на http://127.0.0.1:38080 Отказ Будьте в курсе версии KeyCloak – в то время, когда эта статья была написана, это была 4.5.0.Винал Таким образом, пользовательский интерфейс может выглядеть немного отличаться с более новыми или более ранними версиями.
Создание клиентских учетных данных KeyCloak
Для приложения Vert.x мы собираемся развиваться, нам нужен зарегистрированный клиент в KeyCloak. Заполните форму с данными выделенными значениями:
Сохраните это, откройте и проверьте только что созданные Vertx-аккаунт Клиентский объект:
Мы вернемся на эту страницу, в частности информацию о Учетные данные Вкладка позже, когда мы встроили данные клиента в код VertX.
Создавать роли
На вкладке ролей с левой боковой панели в KeyCloak создайте две примерные роли Модифицировать аккаунт и Учетная запись View :
Создать пользователя
На вкладке «Управление пользователями» создайте новый пользователь, дайте ему имя пользователя Теститель и адрес электронной почты test@tester.com и сохранить это:
Все еще на странице «Просто созданных пользователей» перейдите на вкладку «Учетные данные» и установите пароль этого пользователя на контрольная работа. Также не выяснить Временный Переключатель и нажмите на Сбросить пароль кнопка. Будьте в курсе: поведение этого пользовательского интерфейса немного странно. Когда вы нажимаете эту кнопку, Временный Флаг переключается верно, но просто игнорируйте это. Пароль, который вы дали, должен быть хорошо установлен.
Переключитесь на вкладку сопоставления ролей и назначьте только созданные роли Модифицировать аккаунт и Учетная запись View Для этого пользователя:
Это завершает настройку KeyCloak. Поздравляю! Теперь мы готовы работать над нашими вершинами Vert.x и Vuejs Frestend.
Подробнее о настройке KeyCloak и настройка его для Vert.x можно найти в Эта отличная статья , который я также использовал в качестве источника для приведенных выше инструкций (благодаря Piotr Minkowski) Отказ
Шаг 2 – Создать Vert.x Backend и Vuejs Frestend
Я использовал Eclipse для создания простого проекта Maven (без выбора Archtype) и оттуда добавил VertX в список зависимостей в Pom.xml Отказ В то время была написана эта статья, Vertx был на версии 3.5.4.
Клонировать следующий репозиторий (включая исходный код для этой статьи):
Vertx-Stack/VertX-Vue-KeyCloak Способствуйте разработку Vertx-Stack/Vertx-Vue-KeyCloak, создавая учетную запись на GitHub. github.com.
git clone https://github.com/vertx-stack/vertx-vue-keycloak.git
Создать файл клавишных магазинов
Вы можете захотеть следовать любой процедуре, которую вы находите подходящими для создания правильной цепочки сертификата и получить его в формат JKS. Пример, который я даю здесь, основан на самозагоренном сертификате, и он отлично работает на местных или для испытательных сред. Репо, которую вы только что клонировали, поставляется с файлом, поэтому вы можете пропустить этот раздел. Для производства, пожалуйста, получите сертификат с подписанием CA (например, один, например, от Letsencrypt ).
Запустите следующую команду OpenSSL, чтобы создать свой закрытый ключ и открытый сертификат. Используйте « TestPassword » в качестве пароля и оставьте все значения по умолчанию (нажмите Enter, пока вы не проходите):
openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 365
Просмотрите файл сертификата:
openssl x509 -text -noout -in cert.pem
Объедините ключ и сертификат в пакете PKCS # 12 (P12), а как использование экспорта пароля « TestPassword » снова:
openssl pkcs12 -inkey key.pem -in cert.pem -export -out certificate.p12
Преобразуйте его в файл JKS. Используйте « TestPassword » в качестве пароль клавиатуры назначения:
keytool -importkeystore -srckeystore certificate.p12 -srcstoretype pkcs12 -destkeystore test.jks -deststoretype jks
Теперь у нас есть наш хранилище сертификатов в Test.jks, готов к использованию Vert.x для закрепления подключения HTTPS. Этот файл также поставляется с репо, вы только что клонировали.
Понять приложение Vertx-Vue-Keycloak
Приложение содержит как исходные коды VROTX для бэкэнда и кода Frontend на основе VEUEJS.
На Backend (SRC/Main/Java), Maintule.java является основной точкой входа. Это вершина Vertx, которая создает сервер HTTP/HTTPS, настроить различные маршруты, выставляя конечную точку/входа/входа в систему, которая интегрируется с KeyCloak, и, наконец, предоставляет конечные точки API для нашего интерфейса.
Frestend (размещенный в SRC/Main/Frontend) – это обычный интерфейс Vuejs, который был создан с Vuejs CLI. Он содержит активы, библиотеки и компоненты.
Шаг 3 – Интеграция с KeyCloak
Откройте SRC/Main/Java/Backend/Maintule.java и проверьте метод createhttpserverandroutes:
JsonObject keycloakJson = new JsonObject() .put("realm", "master") .put("realm-public-key", "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAqZeGGDeEHmmUN4/UXh2gQD0yZEZirprsrdYK7GfcE1+QF9yfYfBrIv5cQUssFQKISVpbbLcoqYolsxcOvDyVFSQedHRsumOzqNZK38RHkidPMPrSNof5C3iMIHuXOCv/6exnLZvVoeYmkq42davYEz1tpSWzkZnlUMbRZFs1CfzLMM2rsAJWsO1/5zbDm0JhFl7EFUsTki72ihac1Q5zUUSFyf1jKUEkL7rrkYINjgAaQKktE8pnubc3Y44F5llY4YyU9/bqUWqMYDx868oiDcnoBpGGd4QrUMlbULZZLRqqUKK6iG1kHxDCJQ9gaCiJoELyAqXjnnO28OODQhxMHQIDAQAB") .put("auth-server-url", "http://127.0.0.1:38080/auth") .put("ssl-required", "external") .put("resource", "vertx-account") .put("credentials", new JsonObject() . put("secret", "0c22e587-2ccb-4dd3-b017-5ff6a903891b")); OAuth2Auth oauth2 = KeycloakAuth.create(vertx, OAuth2FlowType.PASSWORD, keycloakJson);
Получить царство и реальный ключ от общественности Из консоли администратора KeyCloak. Чтобы получить ключ, нажмите кнопку «Открытый ключ» на Ключи вкладка Мастер область:
В качестве ресурса включите ранее созданные Vertx-аккаунт клиент. В качестве его учетных данных перейдите к нему на меню клиентов> VertX-аккаунт> вкладка учетных данных и скопируйте секрет оттуда:
В качестве OAUTH2FLOWTYPE мы собираемся выбрать пароль, представляя Поток учетных данных паролей Отказ Дополнительные детали на OAuthflows можно найти здесь Отказ
Теперь мы можем определить /Вход Маршрут для обработки фактического входа:
Теперь мы можем запустить наш первый тест вершины вершины, запустив установку VERT.X. Используя почтальон, теперь мы можем запустить первый пользователь Auth через сообщение против 127.0.0.1:8080/login (Наш Vertx Server с /login Маршрут). На теле мы выбираем необработанные данные и введите следующий объект JSON:
{ "username":"testuser", "password":"test", "scope":"modify-account view-account"}Нажмите Отправить В Postman и отправьте это на наш Vertx Server:
Результатом на сервере будет выглядеть так, указывая на то, что мы успешно нашли пользователь « TestUser » на KeyCloak. Молодец!
Аутентифицировать с нашим фактором
Теперь, когда у нас есть основной аутентификация, работающая и проверила ее с почтальоном, пришло время получить наше приложение Frontend, интегрированное с ним. Forntend приходит на SRC/Main/Frontend Отказ Чтобы пойти, запустите быструю установку зависимостей с помощью пряжа И, наконец, начните это с пряжа dev Отказ Подробнее здесь Отказ
Frestend теперь начнется на localhost: 8081 Отказ Он собирается представить довольно простую страницу входа в систему (Bootstrap был использован для его стиля):
Я не буду войти во все особенности этого приложения здесь. Для многих более подробной информации о том, как это было создано, пожалуйста, проверьте Эта отличная статья от Paweł J. Wal Отказ
Единственная дополнительная вещь, которую нам нужно изменить, – это настроить CORS на стороне Backend Vert.x, чтобы убедиться, что интерфейс может говорить с ним.
Теперь вы готовы аутентифицировать пользователь из приложения Vuejs Frontend к Backend Vert.x. Войдите с вашим TestUser: Test Получает вас в защищенное пространство вашего приложения:
Поздравляем, теперь у вас есть довольно щедрость, чтобы войти в приложение Vuejs, бегущую к серверу API vert.x и сервера аутентификации, встроенного в keycloak.
Шаг 4 – Интегрируйте запрос и логику обновления данных
Мы собираемся реализовать очень простую систему управления сообщениями здесь, что выглядит примерно так:
Интернет и кусочки интеграции Eventbus в этом примере были вдохновлены Mateusz Parzonka ‘s VERTX-ПРИМЕРЫ Проект На Github – спасибо за это!
Предлагаемая процедура в этом примере является использование стандартных конечных точек сообщений, производителей и потребителей на VertX EventBus для полностью сложного обращения с клиент-сервером, включая запросы, мутации данных и публикацию/подписки. Идея довольно проста:
- На бэкэнде мы обнаруживаем ряд потребителей сообщений, которые действуют как Get, создают и удалять методы.
- На Frontend мы подписываемся на определенные каналы данных, которые позволяют нам отправлять все, что от бэкэки к Frontend, что также значительно помогает в туннелевом клиенте клиентской связи через бэкэнду.
На стороне интерфейса мы собираемся создать сервис Vertx Eventbus, использующий Vertx3-Eventbus-Client Отказ Основные методы здесь Callapi и Подписаться (Для более подробной информации о Pubsub см. Шаг 5):
Чтобы получить, удалить и создать новое сообщение, проверьте компонент Home.Vue, в частности использование Eventbus Сервис от Utils/Eventbus:
В результате вы теперь можете использовать этот интерфейс для получения массива известных сообщений от Backend, создавать новые сообщения и удалять их. Пока так хорошо, но подожди минутку: что на самом деле происходит с другими клиентами, которые используют одно и то же приложение, параллельное мне? Давайте наконец-то погрузимся в Pubsub …
Шаг 5 – Интегрировать публикацию и подписаться
Мы уже видели, что бэкэнд публикует полный массив сообщений на Vertx Eventbus, когда обновляется обновление (что немного настроен, но давайте принять это для этого примера). Как, как Frestend может завершить эти обновления?
К счастью, Vertx Eventbus (который основан на Sockjs) позволяет нам подписаться клиентами на каналы, которые могут быть подпитываться любым другим клиентом (C2C Communication) или также с сервера.
Наша служба Eventbus обеспечивает функцию Подписаться на такой канал (см. код выше). Это снова используется в компоненте Home.Vue для захвата изменений в массиве сообщений и на количество подключений сервер Vertx управляется следующим образом:
Здесь мы захватываем сообщения, исходящие из : pubsub/Соединения и : pubsub/Сообщения Каналы, и мы толкаем входящие данные в интерфейс. Это позволяет сохранить несколько браузеров, которые отлично запускают одно и то же приложение в синхронизации через VertX EventBus.
Ограничения
Одним из крупнейших ограничений этого примера является настройка вершины VertX. В частности, безопасность на VertX Eventbus еще не настроена, поскольку мы не проверяем, является ли пользователь, вызывающий API, действительно аутентифицируется на бэкэнде. Так что не используйте этот код для производственных приложений, не работая над этим.
Другим аспектом является то, что EventBus, а также обработчик//вход в систему на бэкэнде, все еще работают по HTTP. Перенаправление к коду HTTPS, которое на месте относится только к статическим ресурсам, еще не к Eventbus, насколько я проверен с ограниченным временем. Я думаю, что поскольку мы на самом деле не обслуживаем статическое содержимое HTML через VertX, он имеет смысл полностью отключить сервер HTTP и просто перейти с HTTPS.
Наконец, сертификат HTTPS был подписан на себя и, безусловно, вы не хотите использовать это для серьезного использования за пределами localhost. Получите себе сертификат подписанного CA (например, от вытекания) и отправляйтесь оттуда.
Кроме того: happy vertx’ing!
Если вам нужна OAUTH на основе Google вместо KeyCloak, оформить заказ Google Oauth2 с vuejs и vert.x