Создайте простое интерфейсное приложение VueJS, работающее на серверной части Vert.x, обеспечивающее вход с помощью Google OAuth2 с нуля.

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

Для нетерпеливых:

  • настройте среду разработки, инициализировав серверную часть Vert.x
  • Настройте Google OAuth2, чтобы иметь свой идентификатор клиента и секрет клиента
  • повторно использовать Frontend из Vert.x + VueJS и OAuth2 за 5 шагов
  • измените серверную часть, чтобы использовать Google OAuth2

Вы можете скачать финальный проект из следующего репозитория GH:



vertx-stack / vertx-vue-oauth2
пример использования vertx с Google OAuth2. Участвуйте в разработке vertx-stack / vertx-vue-oauth2, создав… github.com



Настройка среды разработки

Воспользуйтесь стартовой страницей Vert.x и сгенерируйте свой проект:

При нажатии Создать проект будет загружен ZIP-файл, содержащий только что сгенерированный проект, и мы перейдем оттуда. Чтобы создать свой проект Vert.x, вы также можете использовать vertx-cli-starter в качестве альтернативы.

Я использую Eclipse в качестве IDE и импортирую этот проект в свою рабочую область. Стартовая страница Vert.x использует мой artifactId vertx-vue-oauth2 также для создания структуры пакета java (что немного странно), поэтому давайте немного выровняем это: переименуем файл com.ibm.vertx-vue-oauth2 в com.ibm.example (или что угодно еще) в src и test папки. Я также изменил vertx.version с 3.5.4 на 3.6.0.CR1, поскольку позже нам понадобится несколько новых вещей в Vert.x для обнаружения службы OAuth2.

Создайте стартер для Eclipse: выберите новый файл с именем vertx.launch и используйте следующий код:

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

В качестве альтернативы Eclipse вы также можете собрать этот проект из командной строки с помощьюmvn package и запустить / запустить его с помощью следующей команды:

java -jar vertx-vue-oauth2-1.0.0-SNAPSHOT-fat.jar run com.ibm.example.MainVerticle

Процесс входа в Google

На следующей диаграмме показан процесс входа в систему с помощью Google, который мы собираемся рассмотреть, однако я разделю его на два сценария:

  • Сценарий-1: это поток, который вы видите там, интерфейс - это Vue, бэкэнд - это Vert.x, аутентификация происходит в некоторых частях с обеих сторон.
  • Сценарий 2: мы обрабатываем OAuth2 исключительно во внешнем интерфейсе и разрешаем общаться с серверной частью Vert.x только после успешной аутентификации.

Можно подумать о третьем сценарии: OAuth2 просто выполняется на сервере. В этой статье это не рассматривается.

Настроить Google OAuth2

Прежде чем мы начнем, мы должны убедиться, что Google правильно настроен для OAuth2 для вашего нового приложения. Посетите Консоль Google API, чтобы получить учетные данные OAuth 2.0, такие как идентификатор клиента и секрет клиента, которые известны как Google, так и нашему приложению. Набор значений зависит от типа создаваемого приложения. Например, приложение JavaScript не обязательно требует секрета, но наше приложение Vert.x требует.

  • войдите в Консоль разработчика Google
  • нажмите на раскрывающееся меню Выбрать проект и выберите Новый проект.
  • дайте ему название проекта, которое вы хотите, я выбрал vertx-oauth2
  • как только проект будет создан (занимает несколько секунд), снова используйте селектор проектов и выберите свой новый проект.

  • в левом навигаторе выберите и откройте Библиотеку API.
  • найдите Google+ API и нажмите на него

  • откроется страница сведений о Google+ API, нажмите кнопку Включить.

  • Откроется панель управления API, нажмите Учетные данные на левой панели навигации и перейдите на вкладку OAuth Consent Screen - укажите название приложения по вашему выбору и необязательный логотип. Сохранить без публикации

  • перейдите на вкладку Учетные данные, нажмите всплывающее окно Создать учетные данные и выберите Идентификатор клиента OAuth - Google также предлагает мастер, который поможет вам принять это решение. если вы хотите использовать Google Auth в другом контексте

  • На следующем экране выберите Веб-приложение в качестве типа приложения и дайте ему имя - я использовал vertx-vue-oauth2.
  • поместите http: // localhost: 8081 в авторизованные источники JavaScript и используйте http: // localhost: 8081 / callback для URI авторизованного перенаправления и нажмите кнопку Создать.
  • Появляется всплывающее окно с вашими идентификатором клиента и секретом клиента - скопируйте эти значения, они нам понадобятся в нашем коде через мгновение.

Создайте интерфейс и страницу входа

Мы собираемся использовать почти такой же простой интерфейс, как и в этой статье. Однако целевая страница стала еще проще: вместо формы входа на нее теперь просто есть кнопка Войти через Google.

Создание внешнего интерфейса в src / main / frontend с yarn и yarn dev предоставит эту целевую страницу WebUi на localhost:8081

На интерфейсе мы собираемся использовать vue-google-oauth для выполнения первых трех шагов нашей блок-схемы для обоих сценариев.



TinyNova / vue-google-oauth
Обработка входа и выхода из Google для приложений Vue.js - TinyNova / vue-google-oauth github. com



Функция signIn позволяет запускать два разных сценария для внутреннего и внешнего интерфейса OAuth.

Используйте свойство useBackendScenario , чтобы выбрать и запустить нужный сценарий. Прежде чем вы начнете, самое время добавить ваш Google OAuth2 идентификатор клиента и секрет клиента в нужные места.

В интерфейсе откройте src / main.js и измените эту строку:

Vue.use(GoogleAuth, { client_id: ‘<your google auth client id>’ })

На бэкэнде откройте MainVerticle.java и измените следующие строки:

OpenIDConnectAuth.discover(
   vertx,
   new OAuth2ClientOptions()
   .setClientID(“<your google auth client id>”)
   .setClientSecret(“<your google auth client secret>”)

Как только вы это сделаете, перезапустите бэкэнд и интерфейс и загрузите страницу входа с http: // localhost: 8081 /

При нажатии этой кнопки Google Auth отображается в отдельном всплывающем окне, которое позволяет либо ввести учетные данные Google, либо аутентифицировать приложение:

После того, как вы предоставили свои учетные данные Google, интерфейс теперь выполняет следующую логику аутентификации:

После успешной аутентификации приложение Frontend выглядит так, как в нашем последнем примере, и Стена сообщений может использоваться для отправки сообщений на Vert.x, включая PubSub для автоматического обновления интерфейса.

Как Vert.x обрабатывает Google OAuth2?

Мы собираемся использовать новое обнаружение службы OAuth, поставляемое с Vert.x 3.6.0.CR1, для настройки поставщика и обработчика OAuth2 для Google. Обнаружение службы происходит, когда основная статья запускается вместе с серверной частью. Убедитесь, что вы указали идентификатор клиента и секрет клиента Google OAuth2:

Когда пользователь вошел в Google из внешнего интерфейса, затем запускается шаг 5 из блок-схемы, чтобы получить информацию профиля для пользователя Google. Это происходит в этом коде:

Вкратце, этот код использует поставщика Google OAuth2, созданного нами ранее во время обнаружения службы, для аутентификации на основе кода авторизации, предоставленного интерфейсом. При этом Vert.x получает access_token (и другие), которые он использует для получения профиля пользователя, и отвечает на него во внешнем интерфейсе.

Поскольку пользователь теперь правильно аутентифицирован в Google и теперь хорошо известен во внешнем и внутреннем интерфейсе, можно реализовать любую желаемую логику для хранения и управления пользователем в серверной части - позаботьтесь о соответствии GDPR, когда вы это сделаете.

Подведение итогов и перспективы на будущее

Вы узнали, как связать вместе ряд отличных технологий, чтобы обеспечить аутентификацию пользователя Google для вашего приложения на основе бэкэнда Vert.x и внешнего интерфейса VueJS. В этой статье описаны два варианта аутентификации: один - с помощью внешнего интерфейса, а другой - с помощью гибридного интерфейса и серверной части. Оба имеют свои преимущества в различных бизнес-ситуациях. Еще один сценарий, который я не рассматривал (пока), - это OAuth2 исключительно на бэкэнде, о котором я собираюсь рассказать в ближайшее время. Еще я бы изменил необходимость в PopUp для входа в Google - я не нашел быстрого способа сообщить vue-google-oauth, используя для этого мою страницу входа, но я думаю, что мы должен сделать это и избавиться от этого. Если у кого-то из них есть идея по этому поводу, или у вас есть отзывы или вопросы в целом, не стесняйтесь оставлять комментарии или связаться со мной в Твиттере.

Надеюсь, вам понравится Google OAuth с вашим приложением VueJS и Vert.x. Не пропустите и другие мои технические статьи:

Спасибо