Настраиваем Spring Security и oAuth2 в Vue.js. Spring Boot REST
Spring Boot Rest Application: настраиваем Spring Security oAuth2 с авторизацией Google на нашем Vue.js фронтэнде. В rest приложении недостаточно просто подключить авторизацию и сделать ссылку на страницу авторизации Google, также требуется потратить немного времени на доработку интерфейса: позаботиться о том, чтобы у JavaScript также была информация о том, авторизован ли пользователь, а также всё необходимое для отрисовки информации о пользователе на экране. Ссылка на код из видео: https://github.com/drucoder/sarafan/tree/AddOAuth2Client В качестве ориентира при настройке авторизации мы продолжаем использовать официальный гайд по oAuth2 из блога проекта Spring: https://spring.io/guides/tutorials/spring-boot-oauth2/ Первым шагом мы подключаем к проекту шаблонизатор Thymeleaf и заменяем нашу статичную стартовую страницу на шаблон, способный динамически подхватить информацию об авторизованном пользователе и список существующих сообщений. Зависимости на необходимые в этом видео модули лежат тут: https://gist.github.com/drucoder/06f31e82cd680ace89e795d82d407793 Далее мы немного дорабатываем наш JavaScript код для отображения приглашения авторизоваться, если пользователь не авторизован и кнопки, предлагающей разавторизоваться для авторизованных пользователей. Когда авторизация успешно прошла, мы добавляем поддержку Spring Session для хранения сессий активных пользователей в БД. Это позволит избегать повторных запросов авторизации для пользователей после перезагрузки приложения. Проперти, необходимые для Spring Session: https://gist.github.com/drucoder/9f8cc07f16930cc739b2b0a85ce5fc8c Видео настройки Spring Session для Sweater Application: https://youtu.be/7cDpbAbhyjc Использование oAuth2 авторизации вносит свои корректировки и нам необходимо немного изменить структуру таблицы, хранящей сессии пользователей. Скорректированный скрипт таблиц для Postgres: https://gist.github.com/drucoder/a1bd8d83d7b7ff96fd150916bc5c5bf9 Личный кабинет в Google Developer Console, где создаются токены: https://console.cloud.google.com/apis/credentials Ссылка на плейлист Sweater App (Spring MVC): https://www.youtube.com/watch?v=jH17YkBTpI4&list=PLU2ftbIeotGoGSEUf54LQH-DgiQPF2XRO ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖ ➡ Твиттер: https://twitter.com/letsCodeDru ➡ Чат в Discord: https://discord.gg/xs6XxSx ➡ Группа Вконтакте: https://vk.com/letscodedru ➡ Канал в Telegram: https://t.me/letsCode_dru ➡ Чат в Telegram: https://t.me/joinchat/FeiP9xEhqHajfqhLr4z-Nw ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖ Поддержать проект: ➡ Patreon https://www.patreon.com/letscodedru ➡ Яндекс.Деньги https://money.yandex.ru/to/41001451675086 ➡ PayPal paypal.me/letscodedru ➡ Qiwi https://qiwi.me/letscode ➡ WebMoney/BitCoin https://funding.webmoney.ru/d/drucoder ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖ ➡ Ссылка на канал: https://www.youtube.com/channel/UC1g3kT0ZcSXt4_ZyJOshKJQ ➡ Ссылка на Яндекс.Дзен: https://zen.yandex.ru/media/id/5ac20956168a91ffeae449c5
Spring Boot Rest Application: настраиваем Spring Security oAuth2 с авторизацией Google на нашем Vue.js фронтэнде. В rest приложении недостаточно просто подключить авторизацию и сделать ссылку на страницу авторизации Google, также требуется потратить немного времени на доработку интерфейса: позаботиться о том, чтобы у JavaScript также была информация о том, авторизован ли пользователь, а также всё необходимое для отрисовки информации о пользователе на экране. Ссылка на код из видео: https://github.com/drucoder/sarafan/tree/AddOAuth2Client В качестве ориентира при настройке авторизации мы продолжаем использовать официальный гайд по oAuth2 из блога проекта Spring: https://spring.io/guides/tutorials/spring-boot-oauth2/ Первым шагом мы подключаем к проекту шаблонизатор Thymeleaf и заменяем нашу статичную стартовую страницу на шаблон, способный динамически подхватить информацию об авторизованном пользователе и список существующих сообщений. Зависимости на необходимые в этом видео модули лежат тут: https://gist.github.com/drucoder/06f31e82cd680ace89e795d82d407793 Далее мы немного дорабатываем наш JavaScript код для отображения приглашения авторизоваться, если пользователь не авторизован и кнопки, предлагающей разавторизоваться для авторизованных пользователей. Когда авторизация успешно прошла, мы добавляем поддержку Spring Session для хранения сессий активных пользователей в БД. Это позволит избегать повторных запросов авторизации для пользователей после перезагрузки приложения. Проперти, необходимые для Spring Session: https://gist.github.com/drucoder/9f8cc07f16930cc739b2b0a85ce5fc8c Видео настройки Spring Session для Sweater Application: https://youtu.be/7cDpbAbhyjc Использование oAuth2 авторизации вносит свои корректировки и нам необходимо немного изменить структуру таблицы, хранящей сессии пользователей. Скорректированный скрипт таблиц для Postgres: https://gist.github.com/drucoder/a1bd8d83d7b7ff96fd150916bc5c5bf9 Личный кабинет в Google Developer Console, где создаются токены: https://console.cloud.google.com/apis/credentials Ссылка на плейлист Sweater App (Spring MVC): https://www.youtube.com/watch?v=jH17YkBTpI4&list=PLU2ftbIeotGoGSEUf54LQH-DgiQPF2XRO ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖ ➡ Твиттер: https://twitter.com/letsCodeDru ➡ Чат в Discord: https://discord.gg/xs6XxSx ➡ Группа Вконтакте: https://vk.com/letscodedru ➡ Канал в Telegram: https://t.me/letsCode_dru ➡ Чат в Telegram: https://t.me/joinchat/FeiP9xEhqHajfqhLr4z-Nw ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖ Поддержать проект: ➡ Patreon https://www.patreon.com/letscodedru ➡ Яндекс.Деньги https://money.yandex.ru/to/41001451675086 ➡ PayPal paypal.me/letscodedru ➡ Qiwi https://qiwi.me/letscode ➡ WebMoney/BitCoin https://funding.webmoney.ru/d/drucoder ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖ ➡ Ссылка на канал: https://www.youtube.com/channel/UC1g3kT0ZcSXt4_ZyJOshKJQ ➡ Ссылка на Яндекс.Дзен: https://zen.yandex.ru/media/id/5ac20956168a91ffeae449c5