Как установить MongoDB на Ubuntu 18.04

Разработка #VDS #Ubuntu #Базы данных MongoDB – это бесплатная СУБД с открытым исходным кодом. Это документоориентированная СУБД, реализованная при...

16 лучших игровых шаблонов для WordPress

Разработка #Веб-дизайн #Шаблоны #Подборка #WordPress Создание своего сайта на игровую тематику – мечта многих геймеров. Ранее она была...

Как создать сайт на WordPress с нуля

Разработка #Настройка #WordPress #Базы данных #Оптимизация Поговорим о том, как создать сайт на базе WordPress и Timeweb. Сайт,...

7 самых популярных фреймворков JavaScript

Разработка #Фреймворки #Обзор #JavaScript Статья посвящена самым популярным фреймворкам, библиотекам и инструментам JavaScript. Каждый из них может значительно облегчить...

Что должен знать Junior-разработчик

Разработка #Карьера #Обзор #Технологии #JavaScript #HTML/CSS После обучения многие выпускники начинают активно искать работу по специальности. Диплом IT-специалиста...

Лучшие антивирусы для Windows 10 – бесплатные и платные программы для защиты от вирусов

Мнение рынка #Антивирус #Подборка #Windows Реклама. ООО «ТаймВэб». erid: LjN8K4eSW Несмотря на наличие предустановленного Windows Defender, пользователи справедливо...

Создаем калькулятор-конвертер на базе React. Часть 8: Конвертер валют и собственный парсер данных

Разработка #Фреймворки #JavaScript Эпопея с калькулятором продолжается. В этот раз мы добавим в него конвертер валют, который в реальном...

Что такое формат JSON

Разработка #IDE #Разбор #JavaScript За представление структурированных данных на основе синтаксиса JavaScript отвечает стандартный текстовый формат под названием JSON,...

«Чистая» ОС, или Неведома зверушка. Ставим ClearOS

Разработка #FTP #Ubuntu #VPN #Firewall #Apache #Routing #Базы данных #Панель управления Как-то раз нужно было быстро запустить веб-сервер с...

Работаем с репозиториями в Git

В Linux выполните команду: ‎ cd /home/user/directory В macOS: cd /Users/user/directory В Windows: cd C:/Users/user/directory Остается только ввести...

5 интересных трюков CSS

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

Диджитал-реклама сегодня: интервью с Павлом Баракаевым из eLama

Мнение рынка #Реклама #Таргетинг #Социальные сети #ВКонтакте #Конверсия В гостях у Комьюнити побывал Павел Баракаев, евангелист сервиса eLama,...

Когда и зачем нужно проектирование сайта: основные этапы

Разработка #Веб-дизайн #Контент #Оптимизация Изучаем такой процесс, как проектирование сайта. Разбираем каждую стадию – от разработки базовых концепций...

Создаем калькулятор-конвертер на базе React. Часть 4: Декомпозиция и мелкие исправления

Разработка #Фреймворки #JavaScript Продолжаем разработку калькулятора-конвертера на базе Реакта с визуальной библиотекой Chakra. В этой статье речь пойдет...

В Telegram доступны функции для бизнеса в рамках подписки Premium

Новости #Telegram #Обновления Реклама. ООО «ТаймВэб». erid: LjN8KYcMk В мессенджере Telegram на iOS и Android с последним обновлением...

Максимальная производительность 1С-Битрикс: Настройка виртуальной машины

Системы управления контентом (CMS) стали неотъемлемой частью современных веб-проектов, предоставляя множество возможностей для разработки и управления сайтами. 1С-Битрикс —...

Что такое Sass

Разработка #Обзор #HTML/CSS Sass – это своего рода расширение, созданное для упрощения каскадных таблиц стилей (CSS). Все те, кто начинает...

Создаем калькулятор-конвертер на базе React. Часть 5: Добавляем историю результатов

Разработка #Фреймворки #JavaScript Очередной этап разработки конвертера-калькулятора на базе Реакта. В этом уроке создадим компонент для сохранения всех...

Сокращение ТТМ запуска продуктов в компании: кейс Авито

Мнение рынка #Менеджмент #Разбор #Продуктология #Аналитика #Оптимизация При запуске нового продукта важно как можно быстрее и дешевле проверить...

Лучшие редакторы кода

Atom Выпущенный в 2015 году редактор уже полюбился многим разработчикам. Это open-source проект для Linux, Windows и macOS....

Авторизация и аутентификация пользователя при помощи JWT. Часть 1: Что такое JWT и как его создать?

Реклама. ООО «ТаймВэб». erid: LjN8KaXqo

Что такое JWT?

JWT или JSON Web Token представляет собой надежный и безопасный метод передачи информации между сторонами в виде JSON-объектов. Не просто так этот метод один из наиболее популярных в мире.

JWT (далее токен) состоит из трех частей, закодированных в формате Base64. Эти части разделены между собой точками.

header

Первая часть токена является заголовком. Содержит в себе алгоритм шифрования подписи (наш signature) и тип токена (JWT/JWE/JWS). В большинстве случаев при использовании библиотек или сервисов по генерации токенов заголовок выставляется автоматически.

Для ручного варианта напишем функцию createBase64String(), которая будет принимать в себя javascript-объект и вернет готовую строку в формате base64:

const myHeader = {
    alg: 'HS256',
    typ: 'JWT',
}

const createBase64String = (object) => {
    const jsonObject = JSON.stringify(object);
    return btoa(jsonObject)
}

const header = createBase64String(myHeader);
console.log(header) // 'eyJhbGciOiJoczI1NiIsInR5cCI6IkpXVCJ9'

1) Мы создаем объект с нужными заголовками.
2) Преобразовываем его в JSON-строку.
3) Встроенной в JS функцией btoa() кодируем в base64.
4) Теперь header содержит в себе строку ‘eyJhbGciOiJoczI1NiIsInR5cCI6IkpXVCJ9’.

payload

Вторая часть содержит в себе пользовательские данные – любые, какие захотим. Однако нужно иметь ввиду, что включать сюда sensitive-информацию (например, пароли в явном виде, ключи, хэши паролей и т.д.) не стоит. Сюда мы можем поместить информацию о времени создания токена (iat), даты окончания (exp), id пользователя и тд. Другими словами, любую информацию, владение которой не сильно поможет хакеру, ну а нам даст своеобразную маркировку на конкретного пользователя.

Пример из моего проекта: iat, exp – указываются в формате UNIX-времени. То есть количестве секунд, прошедших с начала «UNIX-эпохи» (1 января 1970 г. 00ч 00м 00с по UTC):

const myPayload = {
    nickname: "userNickname",
    deviceId: "userDeviceId",
    iat: 9999999,
    exp: 9999999,
}

const payload = createBase64String(myPayload);

console.log(payload) //"eyJuaWNrbmFtZSI6InVzZXJOaWNrTmFtZSIsImRldmljZUlkIjoidXNlckRldmljZUlkIiwiaWF0Ijo5OTk5OTk5LCJleHAiOjk5OTk5OTl9"

1) Создаем объект и включаем в него нужные данные.
2) Пользуемся ранее созданной функцией и передаем туда наш новый объект.
3) Полученная строка лежит в переменной payload.

signature

Пожалуй, самая важная и ответственная часть JWT – это подпись. Подпись является строкой, которая генерируется в результате хэширования строк header и payload, разделенных точкой, и последующей кодировкой хэша в base64 (стало сложновато, давайте пошагово).

Нам нужно сперва создать подпись HMAC-SHA256 (далее просто хмак) из следующей строки и суперсекретного ключа:

const superKey = 'Этот секретный ключ нельзя никому показывать и передавать!'
const myString = header + '.' + payload;
// eyJhbGciOiJoczI1NiIsInR5cCI6IkpXVCJ9.eyJuaWNrbmFtZSI6InVzZXJOaWNrTmFtZSIsImRldmljZUlkIjoidXNlckRldmljZUlkIiwiaWF0Ijo5OTk5OTk5LCJleHAiOjk5OTk5OTl9

Секретный ключ может быть абсолютно любой, даже просто «а». Его нужно самостоятельно придумать, записать и после прочтения сжечь… Ну или просто никому не показывать и не передавать, ведь он нам еще понадобится для декодирования токенов.

Так как JS не имеет встроенных функций для создания подписи хмак, необходимо воспользоваться какой-нибудь сторонней библиотекой (например, CryptoJS). Но мы такими самодурствами заниматься не будем и просто предположим, что получили нужную подпись. Ведь вышенаписанная информация нужна для понимания всего процесса создания токена и общего развития, на практике же мы будем пользоваться готовой библиотекой jsonwebtoken.

После получения подписи необходимо и ее закодировать в base64:

const sign = // Тут мы получили подпись и преобразовали ее в строку
const signature = btoa(sign)

Таким образом в signature будет лежать строка (например: LxTQVx8JgzSBPyG0pSf7Z9Ojo4N7442loY0k1POK1v4), расшифровать которую без суперсекретного ключа нельзя, либо очень-очень сложно (почти невозможно).

Объединив все три части точками, мы получим наш токен:

eyJhbGciOiJoczI1NiIsInR5cCI6IkpXVCJ9.eyJuaWNrbmFtZSI6InVzZXJOaWNrTmFtZSIsImRldmljZUlkIjoidXNlckRldmljZUlkIiwiaWF0Ijo5OTk5OTk5LCJleHAiOjk5OTk5OTl9.LxTQVx8JgzSBPyG0pSf7Z9Ojo4N7442loY0k1POK1v4

«Чота сложна, мож попроще как-нить?»

Да, можно намного проще. Для этого нам понадобится библиотека с открытым исходным кодом. В нашем случае это jsonwebtoken:

Установим через npm:

npm i jsonwebtoken

Далее просто импортируем и воспользуемся методом .sign(payload, secretKey, options):

import jwt from 'jsonwebtoken';
const payload = {
    id: 12,
    name: 'Alesha',
    city: 'Moscow',
}
const secretKey = 'EzPzLmnSqzy';
const options = {
    expiresIn: '10m'
}

const token = jwt.sign(payload, secretKey, options)
Итак:
1. Мы определили нашу полезную нагрузку (payload). Разумеется, мы не включаем сюда никаких чувствительных данных. Имя к таковым не относится (наверное…). iat и exp библиотека вставляет автоматически, так что явно их указывать не нужно.

2. Мы придумали секретный ключ. Он довольно простой, но на боевом сервере лучше определить что-то более надежное =)

3. В options передаются опции, которые можно найти в официальной документации к библиотеке. Мы выбрали только expiresIn, который определяет срок годности токена (тот самый exp).

В результате в нашей переменной токен будет лежать наш свеженький JWT со сроком действия 10 минут. 

Проверить токен можно с помощью метода .verify(token, secretKey, callback(err, decoded)), о чем я раскажу в следующей части статьи.

Итоги

  • Пользуемся библиотеками с открытым кодом, чтобы быть уверенными, что наши данные никуда не утекают.
  • Не тратим время на самодеятельность по собственноручному созданию токенов (время разработчика дорогое).
  • Лайкаем, подписываемся и ждем следующих моих постов.
Межтекстовые Отзывы
Посмотреть все комментарии
guest