Пошаговое руководство по JWT-аутентификации в Angular 14.

Мы собираемся обсудить аутентификацию JWT в Angular 14 шаг за шагом.

Если вы хотите узнать основы и подробности о токене JWT, перейдите по следующему URL-адресу.



Введение и подробности об аутентификации и авторизации JWT
Мы обсудим аутентификацию и авторизацию с использованием токена JWT и различных криптографических алгоритмов и методов…medium.com



Там я объяснил основы и детали аутентификации и авторизации JWT.

Кроме того, я рекомендую вам прочитать следующую статью, прежде чем начать эту статью, я объяснил, как настроить серверное приложение с использованием .NET Core 6.



Аутентификация токена JWT с использованием веб-API .NET Core 6
Мы собираемся обсудить аутентификацию и реализацию токена JWT с использованием .NET Core API 6.medium.com



В этом разделе мы шаг за шагом обсудим следующие вещи:

  • Введение
  • Создать угловое приложение
  • Добавьте модуль Bootstrap и Toaster
  • Охранники авторизации
  • Угловой сервис
  • Создание угловых компонентов

Давайте начнем с вещей один за другим

Введение

  • JSON Web Token — это автономный способ открытого стандарта (RFC 7519), который будет использоваться для безопасной передачи данных в различных средах в виде объекта JSON.
  • RFC (Request for Comment) — это сокращенная форма удаленного вызова функции и официального документа Инженерной группы Интернета. RFC 7519 JSON Web Token (JWT), май 2015 г. Уведомление об авторских правах © 2015 IETF Trust и лица, указанные в качестве авторов документа. Все права защищены.
  • JWT — это надежный способ аутентификации, поскольку он имеет цифровую подпись и является секретным с использованием алгоритма HMAC или иногда с использованием открытого/закрытого ключа с использованием RSA.
  • По сути, HMAC означает код аутентификации сообщений на основе хеширования, он использует отличный метод криптографического хэширования, который обеспечивает нам большую безопасность.
  • Кроме того, JWT является частью замечательных платформ аутентификации и авторизации, таких как OAuth и OpenID, которые обеспечивают отличный механизм для безопасной передачи данных.

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

Шаг 1:

Создайте приложение Angular, используя следующую команду

ng new WebAPP

Шаг 2:

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

npm install bootstrap

Затем добавьте сценарий начальной загрузки в файл angular.json в разделе сценариев и стилей.

Шаг 3.

Установите модуль Toaster для всплывающих окон и уведомлений

npm install ngx-toastr –save

Затем добавьте тостер в раздел стилей внутри файла angular.json.

Шаг 4:

Структура приложения

Шаг 5.

Создайте папку конфигурации внутри активов и создайте внутри нее файл config.json, как показано ниже, и поместите в нее URL-адрес API серверного приложения.

{
    "apiServer": {
      "url": "https://localhost:7299",
      "version": "v1"
    }
}

Шаг 6:

Создайте Auth Guard внутри папки Guard

Итак, здесь вы можете видеть, что мы берем токен JWT из локального хранилища, а затем проверяем, истек ли срок действия токена или нет. Если срок действия токена истек, он будет перенаправлен на вход в систему и вернет false.

Шаг 7:

Откройте файлы компонента приложения и добавьте в него следующий код.

app.component.ts

app.component.html

Шаг 8:

Создайте папку «Модель» внутри каталога приложения и создайте в ней класс «Продукт».

Шаг 9:

Создать компонент домашней страницы

домашняя страница.component.ts

домашняя страница.component.html

Шаг 10:

Создать компонент входа

логин.component.ts

логин.component.html

Шаг 11.

Создать компонент продуктов

продукты.component.ts

products.component.html

Шаг 12.

Затем создайте Product Service для отправки всех наших запросов и получения данных из серверного приложения.

Шаг 13.

Поместите следующий код в модуль приложения

Итак, здесь вы можете видеть, во-первых, мы размещаем несколько маршрутов и создаем один метод для получения токена JWT из локального хранилища, а также настраиваем внутри него модуль JWT и Auth Guard.

Шаг 14.

Наконец, запустите ваше приложение

npm start

Вы увидите страницу входа при запуске приложения

После авторизации вы увидите страницу продукта

Заключение

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

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.