Эта статья представляет собой руководство о том, как реализовать аутентификацию JSON Web Token (JWT) и интегрировать ее с аутентификацией Facebook с помощью Spring Boot и Facebook Graph API.
В этой статье мы сосредоточимся на аутентификации Facebook, но та же концепция может применяться и на других социальных платформах, таких как Google, LinkedIn и Twitter.
Рекомендуется усвоить следующее:
На видео ниже показано, что будет реализовано к концу этой статьи.
Вы можете найти исходный код здесь.
JWT аутентификация
Первая часть статьи будет посвящена реализации аутентификации JWT с использованием безопасности Spring.
Чтобы понять процесс аутентификации JWT, давайте посмотрим на диаграмму ниже.
Чтобы получить токен доступа (JWT), клиент отправляет запрос входа на сервер аутентификации с именем пользователя и паролем в теле запроса. Сервер проверяет имя пользователя и пароль, а затем возвращает клиенту токен доступа (JWT).
Клиент должен где-то хранить токен доступа и отправлять его с каждым запросом на сервер в заголовке Authorization.
Затем сервер проверяет токен доступа и, если он действителен, обслуживает запрос для клиента.
Реализация аутентификации JWT
Просто нам нужно настроить Spring security на перехват каждого запроса и проверку токена доступа.
Заглянем в весеннюю конфигурацию безопасности.
Как вы можете видеть в строке 10, он настраивает JwtTokenAuthenticationFilter для перехвата каждого запроса и проверки токена.
Давайте углубимся в JwtTokenAuthenticationFilter
Строка 4–9, проверяется, существует ли заголовок токена, если он не существует, все в порядке, возможно, пользователь обращается к общедоступному ресурсу, например «/ signin» или «/ signup».
В строке 13 он делегирует проверку токена службе tokenProvider. Если он действителен, он получает имя пользователя из токена, загружает данные пользователя из БД и создает контекст безопасности для пользователя.
На этом процесс аутентификации JWT завершен, а затем мы увидим, как социальная аутентификация работает с аутентификацией JWT.
Социальная аутентификация
Социальная аутентификация позволяет пользователям получать доступ к веб-сайтам, используя свои существующие идентификаторы социальных учетных записей, такие как Facebook, Twitter и LinkedIn.
Это улучшает взаимодействие с пользователем на веб-сайте, так как нет необходимости заполнять регистрационную форму или запоминать пароль.
На диаграмме ниже показан процесс аутентификации через социальные сети.
Когда пользователь нажимает Войти через Facebook, пользователь перенаправляется на Facebook для входа в свою учетную запись и предоставления нашему веб-сайту разрешения на доступ к информации профиля. Затем Facebook перенаправляет пользователя обратно на наш веб-сайт и возвращает токен доступа.
Клиент отправляет запрос входа в Facebook на сервер авторизации с токеном доступа Facebook, и сервер авторизации выполняет следующие действия:
- Отправляет запрос в Facebook на получение профиля пользователя с токеном доступа.
- Создает учетную запись для пользователя, если она не существует.
- Возвращает токен JWT клиенту.
Затем Клиент сохраняет токен JWT и отправляет его с каждым запросом на сервер.
Facebook Graph API
Вся информация на Facebook представлена в виде графика, который состоит из узлов (например, «Пользователь» или «Фотография»), ребер (например, комментариев к фотографии) и полей (например, дня рождения пользователя или адреса электронной почты). Этот граф называется социальным графом.
Facebook предоставляет API-интерфейсы на основе HTTP, которые позволяют получать данные на платформу Facebook и из нее.
Вы можете узнать больше о Facebook Graph API здесь.
Реализация аутентификации Facebook
Внедрение внешнего интерфейса
Сначала интерфейс (клиент) получает токен доступа от Facebook и отправляет его на сервер авторизации.
Вам нужно будет создать учетную запись разработчика Facebook и приложение, для их создания следуйте инструкциям здесь.
Затем, чтобы включить Facebook SDK, добавьте следующий скрипт сразу после тега body в index.html.
На странице login.js добавьте приведенный ниже код для инициализации API Facebook.
Замените {app_id} идентификатором своего приложения.
Кнопка «Войти через Facebook» должна вызвать следующую функцию.
Вышеупомянутая функция запускает вход в систему Facebook, получает токен доступа, а затем вызывает сервер авторизации для входа пользователя в систему и сохраняет токен JWT в localStorage.
Его часть «scope» просит пользователя дать разрешение на доступ к электронной почте.
Внедрение службы авторизации
Заглянем в FacebookService и посмотрим, как реализован сервер слежения.
Строка 2 вызывает getUser из FacebookClient, о чем мы поговорим чуть позже.
Строка 4. Проверяет, существует ли уже пользователь в БД.
Строка 5 регистрирует пользователя, если он не найден.
Строка 7–9: генерирует токен доступа и возвращает его клиенту.
Кроме того, обратите внимание, что в приведенной выше функции она генерирует случайное имя пользователя и пароль для регистрации пользователя.
Наконец, давайте посмотрим на FacebookClient
Это простой вызов GET для следующего API Facebook Graph.
https://graph.facebook.com/me?fields=email,first_name,last_name,id,picture.width(720).height(720)&access_token={access_token}
Самое интересное - это поля, в которых вы указываете обязательные поля.
Заключение
Интеграция социального входа в систему с аутентификацией JWT - довольно большая работа, но она улучшает взаимодействие с пользователем и упрощает регистрацию пользователя на вашем веб-сайте без необходимости заполнять регистрационную форму.
Другие статьи о Java и Spring, которые могут вам понравиться
