Главная
О нас
Услуги
Решения
Проекты
Публикации
Заказчики
Партнёры
Вакансии
Как нас найти
г. Москва
Петровско-Разумовская аллея д. 4
Главная
О нас
Услуги
Решения
Проекты
Публикации
Заказчики
Партнёры
Вакансии
Как нас найти
г. Москва
Петровско-Разумовская аллея д. 4
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()
Рисунок 8. метод HandleMessage()
Рисунок 7. FacebookRedirectComponent
В методе handleMessage() (рис. 8), получив ответ, мы закрываем диалоговое окно и в зависимости от успеха операции отображаем ошибку, либо отправляем авторизационный токен на наш WEB API (рис. 9)
Рисунок 9. Отправка authToken
Получив запрос на сервере, мы производим следующие действия:
1. Запрашиваем app access token, используя идентификатор и секрет нашего приложения.
2. Проверяем authToken пользователя, полученный от клиента
3. В случае успеха запрашиваем необходимые нам данные о пользователе.
4. Проверяем есть ли в нашей системе уже данный пользователь, и если нет, то мы его создаем
5. Генерируем свой собственный токен и отдаем его на клиент.

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