Facebook аутентификация

Facebook аутентификация в приложении на Angular 5, ASP.NET Core 2 Web Api

В большинстве современных приложений для упрощения процесса регистрации и аутентификации применяется вход через социальные сети. В этой статье мы расскажем, как можно реализовать JWT аутентификацию через Facebook, используя в качестве frontend фреймворка Angular5 и backend на asp.net core 2 web api.

 

 

Для начала нам необходимо зарегистрироваться и создать приложение на портале https://developers.facebook.com/  (рис. 1)

Рисунок 1. Создание приложения

 

Переходим в основные настройки нашего приложения. (рис. 2) Здесь мы сможем получить идентификатор и секрет приложения, которые нам пригодятся в дальнейшем.

 Рисунок 2. Меню приложения

 


Указываем домены приложения (рис. 3) и url нашего сайта.

Рисунок 3. Домены приложений

Теперь добавляем продукт «Вход через Facebook» (рис. 4) и в настройках указываем URI перенаправления для OAuth (рис. 5) (адрес, куда будет перенаправляться facebook после процесса аутентификации, он должен совпадать с тем uri, который мы передадим при вызове метода в коде). Так же Facebook требует, чтобы сайт работал на https.


Рисунок 4. Вход через Facebook    

Рисунок 5. URI перенаправления для OAuth

Теперь перейдем к проекту. Angular использует компонентную модель. Мы создаем компонент FacebookLoginComponent (рис. 6). В разметке компонента будет находиться кнопка, которая будет вызывать метод launchFbLogin(), который, в свою очередь отобразит диалоговое окно с Facebook логин страницей, где пользователь сможет ввести свои данные.


Рисунок 6. FacebookLoginComponent

После авторизации произойдет перенаправление на страницу https://my-web-app.com/facebook-redirect , где мы можем определить успешно ли пользователь залогинился.
По этому адресу у нас расположен компонент FacebookRedirectComponent (рис. 7). Мы перехватываем данные ответа и отправляем их обратно, используя native windows messaging api и метод window.opener.postMessage()

 Рисунок 7. FacebookRedirectComponent



Рисунок 8. метод HandleMessage()

В методе handleMessage() (рис. 8), получив ответ, мы закрываем диалоговое окно и в зависимости от успеха операции отображаем ошибку, либо отправляем авторизационный токен на наш WEB API (рис. 9)

Рисунок 9. Отправка authToken

Получив запрос на сервере, мы производим следующие действия:
1. Запрашиваем app access token, используя идентификатор и секрет нашего приложения.
2. Проверяем authToken пользователя, полученный от клиента
3. В случае успеха запрашиваем необходимые нам данные о пользователе.
4. Проверяем есть ли в нашей системе уже данный пользователь, и если нет, то мы его создаем
5. Генерируем свой собственный токен и отдаем его на клиент.

На этом процесс аутентификации закончен, и пользователь может совершать запросы к закрытому API.

< июл > < 2018 >
Пн Вт Ср Чт Пт Сб Вс
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31