АВТОРИЗАЦИЯ ПОЛЬЗОВАТЕЛЯ ANGULAR ВЕБ ПРИЛОЖЕНИЯ С ИСПОЛЬЗОВАНИЕМ JWT-ТОКЕНА

Программирование веб приложений на данный момент имеет большой потенциал в своем развитии. Для этих целей разработано множество фреймворков: Vue, Angular, Ember, Backbone.js и т.д. Одним из популярных является Angular, который и будет использоваться. Основное предназначение данного фреймворка – проектирование одностраничных веб приложений.

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

В данной статье я хочу рассмотреть механизмы аутентификации и авторизации клиентов посредством технологии JWT (JSON Web Token).

Для достижения этой цели дополнительно будет использоваться веб сервер, построенный на базе REST API, с внедренной технологией авторизации и аутентификации пользователей. Для аутентификации на сервер необходимо послать POST запрос по адресу “/authenticate”.  Запрос должен иметь следующий вид (рис.1), где username и password содержат логин и пароль соответственно.

Рисунок 1. Запрос на аутентификацию

В ответ на данный запрос мы получаем token, который содержит наш JWT (рис. 2).

Рисунок 2. Ответ сервера

Теперь для любого запроса к серверу мы будем использовать этот токен, записав его в заголовок Authorization запроса и предварив строкой “Bearer ” (рис. 3).

Рисунок 3. Заголовок с токеном

В случае отправки запроса без этого заголовка или с неверным токеном, получим ответ 401 Unauthorized.

Angular приложение состоит из компонентов – отдельных блоков пользовательского интерфейса.  Для аутентификации пользователя будем использовать компонент login. Наш компонент состоит из двух основных файлов: login.component.html и login.component.ts. В первом (рис.4) содержится описание, на основе которого будет сгенерирован внешний вид приложения для пользователя.

Рисунок 4. Код login.component.html.

В теге form содержится форма для ввода логина и пароля. По нажатию кнопки Login данные из формы передаются в функцию-обработчик. Ее мы может увидеть в login.component.ts (рис. 5)

Рисунок 5. Код login.component.ts.

Здесь запрос формируется в сервисе login.service.ts, который внедрён в наш компонент с помощью механизма внедрения зависимостей. Кроме того, посредством того же механизма доступен для использования cookieService. Этот сервис позволяет сохранить полученный токен в куки браузера.

Как можно заметить, ответ от сервера представляется посредством интерфейса Token, который содержит всего одно поле token для значения JWT (рис. 6). Это значение записываем в куки с именем angular-auth.

Рисунок 6. Код token.ts.

Формирование самого запроса представляет собой запись в его тело логина и пароля (рис. 7).

Рисунок 7. Код login.component.ts.

Теперь, когда JWT получен и записан, можно использовать его для отправки запросов на сервер. Для того, чтобы при каждом запросе не повторять код записи токена в заголовок, будем перехватывать запросы к серверу и добавлять JWT, используя HttpInterceptor (рис. 8).

Рисунок 8. Код api.interceptor.ts.

В данном случаем, к токену, полученному из куков добавляется “Bearer “ и полученная строка записывается в заголовок Authorization запроса. В случае, если получен ответ со статусом 401 Unauthorized, куки удаляются, поскольку можно считать, что JWT устарел и сессия с пользователем завершена.

Выводы:

Для аутентификации пользователя Angular приложения необходим компонент отвечающий за отправку запросов на аутентификацию, получения JWT и организацию его хранения. Использование токена позволит избежать многократной отправки данных пользователя на сервер: логина и пароля. Благодаря перехвату запросов с помощью HttpInterceptor можно добавить заголовок авторизации к запросу. Это, в свою очередь, позволит избежать лишнего копирования кода и повысит способность приложения к масштабированию: добавление новых запросов к тому же серверу не будет требовать повторной реализации механизма авторизации.

Список литературы:

1. N. Murray, F. Coury, A. Lerner, C. Taborda.  ng-book The Complete Guide to Angular [Электронный ресурс] // Github. URL: https://github.com/Edwx/ng-book-8/blob/master/ng-book2-book-angular-8-r74.pdf (дата обращения: 25.04.2020)
2. Angular Docs [электронный ресурс] / Super-powered by Google. URL: https://angular.io/docs (дата обращения: 25.04.2020)
3. NGX Cookie Service [электронный ресурс] // Github. URL: https://github.com/stevermeister/ngx-cookie-service (дата обращения: 25.04.2020)
4. JSON Web Token [электронный ресурс] URL: https://jwt.io (дата обращения: 25.04.2020)