Как создать шаблон программы с Vert.x, VueJS и OAuth2 в пяти шагах.

1656513027 kak sozdat shablon programmy s vertx vuejs i oauth2 v

Томас Райнеке

1*bcIzB5Jcrcw25eIITJYsJg
VueJS + Vert.x + Keycloak

В этом учебнике вы узнаете, как настроить шаблон программы на основе Vert.x (Java) как бэкенд и VueJs в качестве интерфейса с акцентом на аутентификацию пользователя против Keycloak через OAuth2. После того, как пользователь вошел в систему, vertx-vue-keycloak Приложение также демонстрирует, как запрашивать сервер Vert.x, отправлять данные (мутации) и как Publish/Subscribe работает между Vert.x и VueJS.

1*775YhFPwxnHVON-d1kYtTg

Код 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 – на момент написания этой статьи она была 4.5.0.Заключительныйпоэтому пользовательский интерфейс может выглядеть несколько иначе в более новых или предыдущих версиях.

1*rkUMZMj2ZcUhwgwrhpXbXw

Создайте учетные данные клиента Keycloak

Для программы Vert.x, которую мы собираемся разрабатывать, нам нужен зарегистрированный клиент в Keycloak. Заполните форму указанными выделенными значениями:

1*vJ7I1kdx_pUX2p2Jmwe90A

Сохраните это, откройте и проверьте только что созданное vertx-аккаунт объект клиента:

1*cDKLhjCJbC6rjI2MMsBa7A

Мы вернемся к этой странице, в частности к информации о Удостоверение вкладку позже, когда мы вставим данные клиента в vertx код.

Создание ролей

На вкладке «Роли» с левой боковой панели в Keycloak создайте две образцовые роли изменить учетную запись и просмотр-счет:

1*oX6B46F7Y6M_NMm-NvDJkg

Создать пользователя

На вкладке Управление пользователями создайте нового пользователя, введите имя пользователя testuser и электронный адрес test@tester.com и сохраните его:

1*UsN-3sfPvPYCpoISNFoqDA

На созданной странице пользователей перейдите на вкладку Учетные данные и установите пароль этого пользователя тест. Также снимите выбор Временный переключатель и нажмите кнопку Сбросить пароль кнопку. Имейте в виду: поведение этого пользовательского интерфейса немного странно. Когда вы нажимаете эту кнопку, Временный флажок возвращается на true, но просто игнорируйте это. Указанный пароль должен быть правильно установлен.

1*OwG-b2hQHBJFmySnO0_iGg

Перейдите на вкладку сопоставления ролей и назначьте только что созданные роли изменить учетную запись и просмотр-счет этому пользователю:

1*ln-lwh-TaTZzlTtwtwGStQ

На этом настройка Keycloak завершена. Поздравляю! Теперь мы готовы работать над бэкендом vert.x и интерфейсом VueJS.

Более подробную информацию о настройках Keycloak и его настройках для Vert.x можно найти в этой замечательной статье, которую я также использовал в качестве источника для приведенных выше инструкций (спасибо Петру Минковскому).

Шаг 2 — Создайте Vert.x Backend и VueJs Frontend

Я использовал Eclipse для создания простого проекта Maven (без выбора архитипа), а оттуда добавил 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

Создайте файл Keystore

Вы можете выполнить любую процедуру, которую вы считаете необходимой, чтобы создать правильную цепочку сертификатов и перевести ее в формат jks. Пример, который я привожу здесь, основан на самоподписанном сертификате, и он отлично работает в локальной или тестовой среде. Репо, которое вы только что клонировали, поставляется вместе с файлом, поэтому вы можете пропустить этот раздел. Для производства пожалуйста получите сертификат, подписанный CA (бесплатный, например, от LetsEncrypt).

Выполните такую ​​команду OpenSSL, чтобы создать закрытый ключ и открытый сертификат. Используйте «тестовый пароль” как пароль и оставьте все значения по умолчанию (нажимайте 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) и в качестве пароля экспорта используйте «тестовый пароль” снова:

openssl pkcs12 -inkey key.pem -in cert.pem -export -out certificate.p12

Превратите его в файл JKS. Используйте «тестовый пароль” как пароль хранилища ключей назначения:

keytool -importkeystore -srckeystore certificate.p12 -srcstoretype pkcs12 -destkeystore test.jks -deststoretype jks

Теперь у нас есть наше хранилище сертификатов в test.jks, готовое к использованию vert.x для защиты соединения HTTPS. Этот файл также поставляется с репозиторией, которую вы только что клонировали.

Поймите программу vertx-vue-keycloak

1*075b-eAX9emp_XlWQvpTKg

Приложение содержит исходные vertx коды для серверной части и интерфейсный код на основе VueJS.

на Бекенд (src/main/java), файл MainVerticle.java является основной точкой входа. Вертикаль Vertx создает сервер HTTP/HTTPS, настраивает разные маршруты, открывает конечную точку /login, которая интегрируется с Keycloak, и, наконец, предоставляет конечные точки API для нашего интерфейса.

Frontend (расположен в src/main/frontend) — это обычный интерфейс VueJS, созданный с помощью VueJS CLI. Он включает активы, библиотеки и компоненты.

Шаг 3 — Интеграция с KeyCloak

Откройте src/main/java/backend/MainVerticle.java и проверьте метод createHttpServerAndRoutes:

JsonObject keycloakJson = new JsonObject()  .put("realm", "master")   .put("realm-public-key", "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAqZeGGDeEHmmUN4/UXh2gQD0yZEZirprsrdYK7GfcE1+QF9yfYfBrIv5cQUssFQKISVpbbLcoqYolsxcOvDyVFSQedHRsumOzqNZK38RHkidPMPrSNof5C3iMIHuXOCv/6exnLZvVoeYmkq42davYEz1tpSWzkZnlUMbRZFs1CfzLMM2rsAJWsO1/5zbDm0JhFl7EFUsTki72ihac1Q5zUUSFyf1jKUEkL7rrkYINjgAaQKktE8pnubc3Y44F5llY4YyU9/bqUWqMYDx868oiDcnoBpGGd4QrUMlbULZZLRqqUKK6iG1kHxDCJQ9gaCiJoELyAqXjnnO28OODQhxMHQIDAQAB")     .put("auth-server-url", "  .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. Чтобы получить ключ, нажмите кнопку «Открытый ключ». Ключи вкладка мастер сфера:

1*kV2D7ULMc3mULzT8cknPUg

Как ресурс включить ранее созданный vertx-аккаунт клиента. Как его учетные данные, перейдите к нему в меню Клиенты > vertx-account > вкладка Учетные данные и скопируйте секрет оттуда:

1*cT1QhkYcbt3L9T_v41bTyg

Как OAuth2FlowType мы собираемся выбрать PASSWORD, представляющий Поток учетных данных пароля. Более подробную информацию о OAuthFlows можно найти здесь.

Теперь мы можем определить /войти маршрут для обработки фактического входа:

Теперь мы можем запустить наш первый тест серверной части vertx, запустив программу запуска vert.x. Используя Postman, мы теперь можем запустить аутентификацию первого пользователя через POST 127.0.0.1:8080/логин (наш сервер vertx с /войти маршрут). На теле выбираем необработанные данные и вводим следующий объект JSON:

{  "username":"testuser",   "password":"test",   "scope":"modify-account view-account"}

Нажмите Отправить в Postman и отправьте это на наш сервер vertx:

1*uSCums5-I5HlHEt0d76NBw

Результат на сервере будет выглядеть так, что указывает на то, что мы успешно нашли пользователя.testuser” на Keycloak. Хорошая работа!

1*fSNZf5x45PwH0QPs8p5nYw

Аутентификация с помощью нашего Frontend

Теперь, когда базовая аутентификация работает и мы протестировали ее с помощью Postman, пора интегрировать с ней нашу программу Frontend. Приходит Forntend src/main/frontend. Чтобы запустить его, запустите быструю установку зависимостей с пряжи и, наконец, начать с пряжи разв. Детальнее здесь.

Теперь начнется Frontend локальный хост: 8081. Он будет представлять довольно простую страницу входа (для ее стилизации использовался bootstrap):

1*sUnQjpRfDUo5YtnERMPTg

Я не буду вдаваться здесь во все особенности этой программы. Чтобы узнать больше о том, как это было создано, посмотрите эту замечательную статью Павла Дж. Валя.

Единственная дополнительная вещь, которую нам нужно изменить, это настроить CORS на серверной части Vert.x, чтобы убедиться, что Frontend может общаться с ним.

Теперь вы готовы к проверке подлинности пользователя из приложения VueJS Frontend на сервере Vert.x. Вход с помощью своего testuser:test переносит вас в защищенное пространство вашей программы:

1*gWu5FC3-6UVVwp0_0YaBSA

Добро пожаловать, теперь у вас есть довольно простой способ войти в программу VueJS, которая работает с API Vert.x и сервером аутентификации, интегрированным с Keycloak.

Шаг 4 — Интеграция логики запросов и обновления данных

В качестве примера мы собираемся реализовать очень простую систему управления сообщениями, которая выглядит примерно так:

1*2ohG2OZCp5u3-FecF6GKAA

Интерфейс и части интеграции eventbus в этом примере были вдохновлены Матеушем Парзонком. vertx-примеры проект на GitHub – спасибо за это!

Предлагаемая процедура в этом примере заключается в использовании стандартных конечных точек сообщений, производителей и потребителей на Vertx EventBus для полностью сложного шаблона связи клиент/сервер, включая запросы, мутации данных и публикацию/подписку. Идея достаточно проста:

  • на серверной части мы открываем ряд потребителей сообщений, действующих как методы получения, создания и удаления.
  • на интерфейсе мы подписываемся на определенные каналы данных, позволяющие нам посылать любые данные из серверной части в интерфейс, что также значительно помогает перенастроить коммуникацию между клиентом через серверную часть.

На стороне Frontend мы собираемся создать службу vertx eventbus, использующую vertx3-eventbus-клиент. Основные методы здесь callApi и подписаться (подробнее о pubsub см. шаг 5):

Чтобы получить, удалить и создать новое сообщение, проверьте компонент Home.vue, включая использование eventbus услуга от utils/eventbus:

Как результат, теперь вы можете использовать этот пользовательский интерфейс для получения массива известных сообщений из серверной системы, создания новых сообщений и их удаления. Пока все хорошо, но подождите минутку: что на самом деле происходит с другими клиентами, которые используют ту же программу параллельно со мной? Давайте наконец погрузимся в PubSub…

Шаг 5 — Интеграция Publish & Subscribe

Мы уже видели, что бэкенд публикует полный массив сообщений на Vertx EventBus каждый раз, когда выполняется обновление (что лишнее, но давайте примем это для этого примера). Как интерфейс может наконец-то уловить эти обновления?

К счастью, Vertx EventBus (который основан на SockJS) позволяет нам подписывать клиентов на каналы, которые могут быть подпитаны любым другим клиентом (связь c2c) или с сервера.

Наш сервис eventBus предоставляет функцию для подписаться к такому каналу (см. код выше). Это снова используется в компоненте Home.vue, чтобы фиксировать изменения в массиве сообщений и в количестве подключений, которыми управляет сервер vertx следующим образом:

Здесь мы фиксируем поступающие сообщения :pubsub/connections и :pubsub/messages каналы, и мы посылаем входящие данные в интерфейс. Это позволяет идеально синхронизировать несколько браузеров, запускающих ту же программу, через vertx EventBus.

1*rA8whChtm8U_o080Ue1dog

Ограничение

Одним из самых больших ограничений этого примера является настройка серверной части vertx. В частности, безопасность на шине событий vertx еще не настроена, поскольку мы не проверяем, действительно ли пользователь, вызывающий API, аутентифицирован в серверной части. Поэтому не используйте этот код для рабочих программ, не работая над этим.

Другой аспект состоит в том, что EventBus, а также обработчик /login в Backend все еще работают через HTTP. Перенаправление к существующему коду HTTPS касается только статических ресурсов, но еще не к EventBus, насколько я проверил за ограниченное время. Я думаю, поскольку мы на самом деле не обслуживаем статическое HTML-содержимое через vertx, было бы смысл полностью отключить HTTP-сервер и просто использовать HTTPS.

Наконец, сертификат HTTPS был самоподписан, и, конечно, вы не хотите использовать его для серьезного использования за пределами localhost. Получите подписанный сертификат CA (например, от LetsEncrypt) и переходите оттуда.

Кроме этого: счастливого vertx’ing!

Если вам необходим OAuth на основе Google вместо Keycloak, оформите заказ
Google OAuth2 из VueJS и Vert.x

Добавить комментарий

Ваш адрес email не будет опубликован.