@vorotech

Social Login и Angular — на клиенте или сервере?

Привет. Мне не хватает аргументов, чтобы выбрать сторону (frontend или backend) для реализации social login (Google, Facebook...) для приложения, состоящего из двух контейнеров: Angular+Nginx (frontend) и NodeJs+Express (backend).

Каждый из вариантов имеет право на реализацию. Вкратце напишу что я рассматривал выполнить для каждой из сторон.

Немного контекста.
После успешной аутентификации на backend (например, сейчас реализован логин через email+password) клиент получает JWT токен, который Angular сохраняет в localStalorage и с помощью Interceptor добавляет, в качестве заголовка, к каждому запросу к защищенным методам на backend.

Планируемая реализация social login в общих чертах предполагает следующую логику (на примере facebook):
  1. Пользователь переходит на страницу, которая делает redirect на страницу login в facebook.
  2. Если пользователь разрешил приложению доступ к своему профилю, то будет вызван callback метод, которому в качестве параметров передаются access_token, refresh_token, profile { id, email, ... }
  3. В базе нашего приложения выполняется поиск пользователь по profile.id
  4. Если пользователь не найден, то выполняется поиск по email, чтобы автоматически связать профиль существующего пользователя с facebook профилем
  5. Если пользователь не найден по email, создается новый пользователь.
  6. Для пользователя генерируется JWT токен и отдается на клиент.

Вариант 1 - если на frontend:
Логика по аутентификации (редирект + вызов callback) выполняется полностью на клиенте. Это легко настраивается с помощью node модулей, например https://github.com/abacritt/angularx-social-login

Клиент, в результате успешной аутентификации, получит access_token провайдера. Этот токен необходимо передать на backend, где используя sdk провайдера, backend передав токен выполнит запрос для получения данных из профиля: id, email, name.

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

Странность, которую я вижу - необходимость передавать на backend токен, и логику для валидации этого токена, и такая логику будет дублироваться для каждого social login провайдера.

Больше про этот способ https://theinfogrid.com/tech/developers/angular/fa...

Вариант 2 - если на backend:
На backend реализованны REST методы для frontend. В случае реализации social login необходимо добавить несколько новых.
app.get('/auth/facebook', ...);
app.get('/auth/facebook/callback', ...);

После нажатия на клавишу [Sign In with Facebook] на клиенте, выполняется браузерный переход на страницу '/auth/facebook'

Для аутентификации пользователя с помощью Facebook (и любых других провайдеров) достаточно добавить стратегию для Passport.js, которая вызывается при обработке запроса по выше указанному методу. www.passportjs.org/packages/passport-facebook

После успешной аутентификации стратегия выполняет редирект на '/auth/facebook/callback' метод, который содержит логику по сопоставлению данных из профиля и базы данных.

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

Сложность, которую я вижу - это сохранение дополнительных параметров, которые опционально могут передаваться с клиента (например, реферальный код) между редиректами (к facebook и обратно). Для этого, скорее всего, нужно сохранять такие данные в сессию.
  • Вопрос задан
  • 1025 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы