Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular 2+
Code

Аутентификация Angular с JWT

by
Difficulty:IntermediateLength:MediumLanguages:

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

Безопасность является важной частью каждого веб-приложения, и разработчики должны убедиться, что они разрабатывают приложения с безопасной аутентификацией. В этом руководстве вы узнаете, как реализовать аутентификацию на основе JWT в приложениях Angular с помощью простого сервера Express.

Полный код можно найти в нашем репозитории GitHub. Приложение, которое мы будем создавать, будет выглядеть так:

Final Look

Концепция веб-токенов JSON

JSON Web Token (JWT) - это в основном объект, представленный тремя строками, которые используются для передачи пользовательской информации. Три строки, разделенные точками:

  • заголовок
  • полезная нагрузка
  • подпись

Когда пользователь входит на любую веб-страницу со своим именем пользователя и паролем, сервер аутентификации обычно создает и отправляет обратно JWT. Затем этот JWT передается вместе с последующими вызовами API на сервер. JWT остается в силе, пока не истечет срок его действия или пользователь не выйдет из приложения.

Этот процесс может быть проиллюстрирован на диаграмме ниже.

JWT authorization flow

Файлы cookie и локальное хранилище

Мы будем использовать локальное хранилище для хранения токенов. Локальное хранилище - это средство, с помощью которого данные хранятся локально и могут быть удалены только через JavaScript или путем очистки кэша в браузере. Данные, хранящиеся в локальном хранилище, могут сохраняться очень долго. С другой стороны, файлы cookie - это сообщения, которые отправляются с сервера в браузер и имеют ограниченное хранилище.

Создание Express сервера

Мы начнем с создания внутреннего сервера, который будет иметь следующие конечные точки:

  • POST <webservice>/login
  • POST <webservice>/profile

Давайте начнем с создания каталога для приложения Express, а затем запустим команду npm init, чтобы установить необходимые файлы для проекта.

Затем создайте файл server.js и установите модули: express, jsonwebtoken, cors и bodyParser.

Теперь откройте server.js и начните с импорта модулей.

Затем создайте приложение Express и определите секретный ключ, который будет использоваться для кодирования и декодирования данных пользователя.

Мы не будем использовать базу данных для этого примера. Тем не менее, концепции были бы похожи, если бы вы писали правильный сервер с поддержкой базы данных.

В нашем примере мы просто будем использовать переменную для определения тестового пользователя, как показано ниже.

Последний шаг - создание маршрутов для аутентификации пользователя.

Давайте разберем код для маршрута выше.

Сначала мы проверяем, есть ли какие-либо данные в теле запроса. Если данные не найдены, мы предлагаем пользователю ввести некоторые данные. В случае, когда пользователь предоставил правильные данные, мы сравниваем их с данными из testUser и, если они совпадают, мы используем идентификатор пользователя, чтобы сгенерировать уникальный токен и отправить ответ пользователю.

Наконец, мы создаем конечную точку для запуска приложения.

Наш бэкэнд теперь готов, и вы можете протестировать его с помощью Postman или CURL и посмотреть, какие данные будут возвращены пользователю.

Создайте приложение Angular

Наше приложение Angular будет содержать следующие страницы:

  • Главная страница - эта страница будет содержать ссылки на страницы входа и профиля.
  • Логин - на этой странице пользователь введет свой адрес электронной почты и пароль, которые будут отправлены на сервер для аутентификации. Если учетные данные верны, то будет возвращен токен JWT, и пользователь будет перенаправлен на страницу профиля.
  • Профиль - это защищенная страница, доступ к которой может получить только пользователь с действительным токеном.

Создайте приложение Angular и создайте компоненты Login и Profile, как показано ниже:

Затем добавьте код для домашней страницы в app.component.html.

Затем импортируйте RouterModule и определите маршруты в app.module.ts.

Создаем страницу входа

Страница входа будет содержать два поля ввода для адреса электронной почты и пароля, а также кнопку отправки, как показано ниже:

Создаем страницу профиля

Страница профиля будет просто сообщением, как показано ниже:

Авторизация с JWT в Angular

Мы начнем с создания сервиса Auth, который облегчит проверку ввода пользователя и взаимодействия с сервером.

Это создает два файла, но в основном нас заинтересует файл auth.service.ts, в который мы напишем весь код, взаимодействующий с сервером. Мы начнем с определения REST API и токена, как показано ниже:

Далее мы напишем код, который выполняет POST-запрос к серверу с учетными данными пользователя. Здесь мы делаем запрос к API - если он успешен, мы сохраняем токен в localStorage и перенаправляем пользователя на страницу профиля.

Мы также определяем функции входа и выхода из системы, как показано ниже.

  • logout - очищает токен от локального хранилища
  • logIn - возвращает логическое свойство, которое определяет, аутентифицирован ли пользователь

Затем мы обновляем свойство logIn на домашней странице, как показано.

Ответ на пользовательские события

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

Мы напишем функцию, которая будет прослушивать события щелчка со страницы входа в систему, а затем передавать значения в AuthService для аутентификации пользователя. Обновите файл login.component.ts, чтобы он выглядел следующим образом:

Теперь, если вы запустите ng serve и перейдете по адресу http://localhost:4200, вы можете протестировать свое приложение.

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

Заключение

Из этого руководства вы узнали, как начать работу с аутентификацией JWT в Angular. Теперь вы можете проходить аутентификацию и авторизацию с помощью JWT в ваших приложениях Angular. Есть много аспектов JWT, которые не были рассмотрены в этом руководстве - посмотрите, можете ли вы изучить некоторые из них самостоятельно!

Обратите внимание, что это руководство было написано для Angular 6, но те же концепции должны работать с Angular 2 или Angular 4.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.