JWT-аутентификация в JavaScript за 5 минут
Как использовать JWT для аутентификации пользователей - Express JWT Middleware, Node.js Crypto & React
Аутентификация - сложная и в основном разделенная тема, некоторые предпочитают подход с использованием файлов cookie сеанса с сохранением состояния, а другие выбирают JWT без сохранения состояния. Я один из последних, так как мне нравится, насколько быстро и эффективно внедряется JWT Auth.
Каждый раз, когда мы создаем приложение, мы должны знать о некоторых важных аспектах безопасности:
1. Пароли
Пароли никогда не следует хранить в базе данных в виде обычного текста, поскольку это может оказаться серьезной уязвимостью.
Предположим, злоумышленник (хакер) получил доступ к нашей базе данных, что уже является серьезной проблемой безопасности, и поэтому наше приложение было скомпрометировано. Если мы сохранили информацию для входа в открытый текст, злоумышленник может повторно использовать комбинацию электронной почты и пароля для доступа к другим распространенным веб-сайтам, которые пользователь может использовать, например, к Google или даже к онлайн-банку.
Да, большинство этих платформ требует 2FA или других дополнительных шагов для аутентификации, но это не причина сознательно рисковать раскрытием учетных данных клиента.
К счастью, решение довольно простое и заключается в хранении хеша в базе данных вместо простого пароля.
Хеш - это результат работы криптографической функции, которая получает ввод и всегда возвращает уникальный фиксированный размер (256 бит для SHA256) для этого конкретного ввода.
Сгенерировать SHA256
2. Аутентификация (JWT)
JWT (веб-токены JSON) - это глобально стандартизированный способ хранения учетных данных пользователя и их безопасной передачи между двумя сторонами (клиентский интерфейс и внутренний сервер).
По сути, JWT - это строка, которая должна быть сгенерирована на сервере и сохранена во внешнем интерфейсе для отправки с каждым запросом.
Но как мы создаем этот токен и где его хранить на клиенте?
Давайте посмотрим, как мы можем использовать JWT для аутентификации пользователей в приложении Express:
Я буду использовать библиотеку промежуточного программного обеспечения express-jwt, поскольку она очень проста и понятна, и хочу отметить, что есть и другие, возможно, более надежные пакеты, такие как паспорт.
Создать JWT
Сначала нам нужно создать наш образец проекта с помощью следующих команд:
После этого просто создайте index.js файл и добавьте стартовый скрипт в package.json следующим образом "start": "node index"
Нам нужно предоставить 2 конечные точки, одну для регистрации пользователей, а другую для входа в систему.
регистр
Здесь мы должны сгенерировать хешированный пароль и вставить его в базу данных с указанным адресом электронной почты.
Авторизоваться
Как и в случае с регистрацией, нам нужно хеш-значение пароля и использовать его, чтобы проверить, существует ли пара электронной почты и hashedPassword в базе данных. Используя объект пользователя, мы подписываем токен JWT и возвращаем его в раскрытом заголовке ответа авторизации.
Магазин JWT
Есть 2 распространенных способа сохранить JWT на стороне клиента:
- Печенье
- Локальное хранилище
Оба связаны с проблемами безопасности, такими как XSS, CSRF или расширенный XST, поэтому ни один из этих вариантов хранения не является полностью безопасным.
Я предпочитаю хранить JWT в файлах cookie, поскольку это может быть немного безопаснее, чем IMOP в локальном хранилище.
Предположим, что наш клиент - это SPA, а точнее приложение на основе React, и клиент часто делает запросы к API с помощью клиента Axios.
Давайте создадим собственный клиентский класс Axios, который мы назовем request.js.
Мы будем использовать response-cookie, поскольку он предоставляет простой API-интерфейс для управления файлами cookie.
Заключение
Безопасность - это непростая задача, и аутентификация часто бывает еще сложнее, поскольку защита данных пользователя - самая важная цель приложения.
Если вы хотите проверить код, вот ссылка CodeSandbox.
Другие мои работы можно найти на alexstreza.dev.
Надеюсь, вам понравилась эта короткая демонстрация аутентификации JWT в JavaScript, и вам понравится, если вы поставите ей!
Больше контента на plainenglish.io
