Социальная регистрация в SPA (Angular 2) с помощью REST API ASP.NET Core

Я реализовал простое приложение Angular 2, которое использует ASP.NET Core WebApi в качестве бэкэнда. Для аутентификации я добавил маршрут '/ login', который генерирует токены доступа JWT и обновления, которые, в свою очередь, хранятся SPA в localStorage и используются в HTTP-запросах.

Теперь я хочу интегрировать функцию социальной регистрации, чтобы пользователи могли входить в систему, например, с помощью кнопки Facebook. С точки зрения пользователей, я хочу разбить это на 3 этапа:

  1. Нажмите кнопку «Зарегистрироваться через Facebook» и перейдите на веб-сайт Facebook (для входа в систему и подтверждения моего запроса приложения).
  2. Нажал «Подтвердить» и был перенаправлен в мой SPA, где / страница регистрации, где его имя уже было заполнено из профиля Facebook
  3. Заполняет остальные поля (как любимая игрушка) и нажимает «Завершить регистрацию»

После этой регистрации, если пользователь снова нажимает кнопку регистрации через facebook, он будет перенаправлен на facebook (если он уже вошел в систему), он автоматически перенаправляется на серверный маршрут, который проверяет, был ли такой пользователь уже зарегистрирован, и если он затем перенаправляет его на домашнюю страницу SPA

Как правильно интегрировать такой рабочий процесс в свое приложение? Примечание: я хочу выполнить аутентификацию и регистрацию внутри моего приложения Angular2, а не на другом сервере аутентификации.


angular asp.net-core openid-connect openiddict oauth2
person Rem    schedule 01.10.2016    source источник
comment
как правило, аутентификация OAuth будет выполняться на сервере поставщика Oauth (например, серверы google, facebook). Я не понимаю, что вы имеете в виду, когда ваше приложение требует аутентификации   -  person Ravin Singh D    schedule 09.10.2016
comment
У меня есть собственная аутентификация, выполняемая по маршруту / login. Он использует поток ROPC OAuth2. Я хочу добавить аутентификацию тридцати сторон. Это выдача моего собственного токена JWT после аутентификации пользователя в сторонней службе.   -  person Rem    schedule 09.10.2016
comment
я понятия не имею, что поток ROPC OAuth :). удачи   -  person Ravin Singh D    schedule 10.10.2016
comment
kevinchalet.com/2016/07/13/   -  person Rem    schedule 10.10.2016
comment
спасибо, проверю   -  person Ravin Singh D    schedule 10.10.2016

Ответы (2)


arrow_upward
6
arrow_downward

Я хочу выполнить аутентификацию и регистрацию в моем приложении Angular2.

Вы ищете неявного предоставления с Facebook в качестве сервер авторизации и как сервер ресурсов. Неявное предоставление поддерживает авторизацию для одностраничных приложений (таких как приложение Angular2), а API Facebook Graph поддерживает запросы информации о пользователе.

Как правильно интегрировать такой рабочий процесс в свое приложение?

Поскольку Facebook не поддерживает OpenID Connect, вам нужно будет использовать псевдо-аутентификацию OAuth2 (которая имеет ловушки, которых следует избегать) . Это будет включать четырехэтапный процесс:

  1. перенаправить пользователя на Facebook для входа в систему,
  2. проверить перенаправление обратно со страницы входа в Facebook и сохранить токен доступа,
  3. вызовите Facebook Graph API, чтобы запросить информацию о пользователе для связанного токена доступа, и
  4. используйте эту информацию о пользователе для заполнения полей в вашем приложении.

Вызов API на третьем шаге может выглядеть примерно так:

FB.api('/me', (user) => { 
    console.log(user.id); // 101540562372987329832845483
    console.log(user.email); // [email protected]
    console.log(user.first_name); // Bob
});

/me - это специальная конечная точка Graph API, которая "преобразуется в user_id человека, чей токен доступа в настоящее время используется для вызовов API. "Затем конечная точка возвращает связанную информацию о пользователе.

Ваше приложение может использовать эту информацию о пользователе Facebook для заполнения своей клиентской стороны полей и / или его серверной базы данных. id уникален для вашего приложения и НЕ эквивалентен user_id Facebook; id - это разумный способ однозначно идентифицировать пользователей вашего приложения.

Четыре варианта правильной интеграции этого потока в ваше приложение.

В сторону: что вы подразумеваете под псевдо-аутентификацией OAuth2?

OAuth2 - это схема псевдо-аутентификации, поскольку OAuth2 НЕ является протоколом аутентификации. То есть после пользователя входит в систему, ваше клиентское приложение получает токен доступа, который он использует для запроса защищенного API. Чтобы избежать подводных камней, полезно знать о них:

  1. Жетоны доступа НЕ являются доказательством аутентификации.
  2. Доступ к защищенному API НЕ является доказательством аутентификации.
  3. Злоумышленники могут вводить токены доступа.
  4. У токенов доступа нет ограничения аудитории.
  5. Злоумышленники могут ввести неверную информацию о пользователе.
  6. Каждый провайдер идентификации может иметь свой собственный протокол идентификации.
person Shaun Luttin    schedule 10.10.2016
comment
Большое спасибо за ответ! Можете ли вы сказать, следует ли мне использовать OpenIddict или ASOS для реализации этой стратегии или лучше избегать их и DIY? Могу ли я после этого использовать ROPC для входа в систему клиентов, зарегистрированных без Facebook? - person Rem; 12.10.2016
comment
Токены доступа НЕ являются доказательством аутентификации - так в чем же польза аутентификации? - person Rem; 12.10.2016
comment
@Rem Протокол OAuth может быть составной частью протокола аутентификации. Именно это и сделал Facebook - он построил собственный протокол идентификации поверх OAuth. Реализовать это должным образом зависит от разработчика, в данном случае Facebook, поскольку OAuth не гарантирует аутентификацию. Как правило, мы можем быть уверены, что Facebook сделал это правильно, и в этом случае подтверждением аутентификации является доступ к защищенному ресурсу Facebook. - person Shaun Luttin; 12.10.2016
comment
Если бы вы использовали OpenIddict для реализации этой стратегии, вы бы использовали Code Grant вместо Implicit Grant. Судя по вашему вопросу, похоже, что вы предпочли бы использовать неявное предоставление, и это кажется разумным, потому что Facebook поддерживает его. Если бы это был мой сайт, я бы, вероятно, использовал бы неявный поток и лучшие практики Facebook (т.е. кнопку «Войти через Facebook» + их SDK). - person Shaun Luttin; 12.10.2016
comment
@pinpoint может что-то сказать по этому поводу, и он знает больше меня. - person Shaun Luttin; 12.10.2016
comment
Ok! Спасибо, Шон, за ответ и за отличный образец Аурелии :) - person Rem; 12.10.2016

arrow_upward
-3
arrow_downward

Я бы просто предложил this tut на auth0 + A2.

person Jon    schedule 08.10.2016
comment
У меня вопрос о программировании, а не о советах по покупке - person Rem; 09.10.2016