Как интегрировать Social Войти с помощью существующего .Net ядра Web API бэкэнда и угловой SPA фронтэнда с рабочей OpenIddict пользователя / паролем и каналом передачи маркерами

Обновить

April 2019

Просмотры

18 раз

0

TL;DR

Question: how to implement social login (OAuth2 authorization flow) with an existing SPA/Web API application that is based on identity, user/password, bearer token authentication?


I have an existing application that has:

Backend: .Net Core 2 Web API with Identity and OpenIddict services configured, with a working authentication process based on user/password challenge for bearer token.

Users are stored with Identity (AspNetUsers).

Part of the Startup.cs code

// Register the OpenIddict services.
services.AddOpenIddict()
    .AddCore(options =>
    {
        options.UseEntityFrameworkCore().UseDbContext<ApplicationDbContext>();
    })
    .AddServer(options =>
    {
        options.UseMvc();
        options.EnableTokenEndpoint("/connect/token");
        options.AllowPasswordFlow();
        options.AllowRefreshTokenFlow();
        options.AcceptAnonymousClients();
        options.RegisterScopes(
            OpenIdConnectConstants.Scopes.OpenId,
            OpenIdConnectConstants.Scopes.Email,
            OpenIdConnectConstants.Scopes.Phone,
            OpenIdConnectConstants.Scopes.Profile,
            OpenIdConnectConstants.Scopes.OfflineAccess,
            OpenIddictConstants.Scopes.Roles);
    })
    .AddValidation();

.

Frontend: SPA Angular 7 app that consumes this backend API and token authorization

So basically the current setup is, user inputs user/password to the SPA that invokes the backend /connect/token endpoint that validates the credentials and generates the token for the client.

А теперь мне нужно интегрировать Social Login (OAuth2 авторизации потока), так что

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

Я понимаю, поток авторизации OAuth2, что необходимо запросить код авторизации, а затем Обмен код авторизации для доступа Токена для этого провайдера. Я также знаю, что этот поток должен использовать бэкенд, когда он использует конфиденциальную информацию, как client_secret, которые не могут быть сохранены в стороне клиента.

Но в какой - то момент пользователь должен взаимодействовать с веб - интерфейсе, так , соединяющим эти части , кажется , очень трудно , учитывая , что они широко используются технологии. Все практические примеры , которые я нашел на Google , были с помощью приложения .Net ядра MVC. Я также нашел эту статью ASP.NET Core , 3,0 Preview 4 - Аутентификация и авторизация для ООР , что кажется перспективным , но все еще в режиме предварительного просмотра 4.

Я уже создал социальные провайдеры приложений и я client_id, client_secret. Кроме того, зарегистрировавшись мои других страниц URL.

То, что я пытался без успеха было:

  1. В интерфейсе пользователь выбирает войти в системе с социальным поставщиком,
  2. Пользователь перенаправляется на страницу авторизации поставщика, проверяет подлинность себя и
  3. перенаправляются от поставщика к моему фронтэнду URL ( redirect_uri) с кодом поставщика затем
  4. мой интерфейс называет мой бэкенд /connect/tokenсуществующей конечной точке прохождения выбранного поставщика и полученный код, конечная точка была запрограммирована , чтобы получить у поставщика и код также, то
  5. мой бэкенд называет Получить маркер доступа URL - адрес проводки провайдера "grant_type", "authorization_code" "code", code "redirect_uri", "https://same_frontend_host/same/path" "client_id", providerClientId "client_secret", providerSecretи получает StatusCode: 401, ReasonPhrase: 'Unauthorized'ответ

Что я делаю неправильно? Это было очень трудно время, чтобы получить эту работу.

То, что работало, но это не то, что мне нужно

Неявный 2 шаг потока авторизации с использованием фронтэнда для вызовов аутентификации провайдера и вызов бэкэнда, чтобы получить мой предъявителю маркер и создать идентификатор пользователя. С этим пользователем установка сделал успешную регистрацию с помощью социального провайдера, к сожалению, это не то, что мне нужно

РЕДАКТИРОВАТЬ:

Составили схему того , что будет реализовано, оно терпит неудачу на этапе 5/6 с StatusCode: 401, ReasonPhrase: 'Unauthorized'и дальнейшие шаги не завершены.

введите описание изображения здесь

0 ответы