@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 и обратно). Для этого, скорее всего, нужно сохранять такие данные в сессию.
  • Вопрос задан
  • 80 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
от 200 000 до 300 000 руб.
Cindx Москва
от 130 000 до 180 000 руб.
Reelmotion Games Санкт-Петербург
от 45 000 до 75 000 руб.