Привет Мир! По просьбам заинтересованных в GraphQL, подготовил full-stack пример с авторизацией, регистрацией, личным профилем, изменением и удалением данных.



Для начала, расскажу из чего он состоит и что у него под капотом:

• Регистрация нового пользователя с проверкой на существующего.
• Шифрование пароля SHA3 512.
• Аутентификация на базе JSON Web Token HS256.
• Роутинг с ограничением доступа.
• Real-time профиль пользователя.
• Изменение данных пользователя.
• Удаление пользователя.

Под капотом приложения:

• Client: Apollo GraphQL + Vue Apollo + Vue.js+ Vue router + LocalStorage
• Server: Apollo GraphQL + Koa2 + Mongoose & MongoDB + JWT

5 минут вам хватит на быстрое прочтение и 1 час на понимание. Готовый репозиторий Github.

Введение

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

1. Register?—?регистрация нового пользователя.
2. Authentication?—?аутентификация пользователя.
3. Profile & Settings?—?профиль с личными данными, и настройки с редактированием и удалением данных пользователя.

Весь материал основан на предыдущих статьях с доработкой:

• GraphQL сервер с Koa2 и MongoDB
• GraphQL subscriptions для real-time приложения

Register

При регистрации выполняется обычная GraphQL мутация, с одним нюансом. Перед сохранением, пароль шифруется. Алгоритм шифрования SHA3 512.

Authentication

Аутентификацию не путать с авторизацией.

Аутентификация—проверка подлинности пользователя.
Авторизация?—?выдача прав пользователю.

Для аутентификации используется JSON Web Token (JWT). Это замена кукисам и сессиям. Я сделаю акцент на основных моментах JWT в контексте статьи. Более подробно вы можете ознакомится на главном сайте проекта.

JWT имеет 2 алгоритма HS and RS:

• HS — токены
• RS? — ?ключи\сертификаты

Пример использует HS256:

• HS?—?имя алгоритма.
• 256?—?длина хеша.

В моей реализации:

• JWT = public_key
• secret = private_key

Пусть вас не смущает слово key. В примере нет ключей, только токены. Это мои личные предпочтения, для себя вы можете выбрать любые название пары.

Для реализации безопасности используют разные подходы. Я выбрал следующий:

Так, после успешной аутентификации, пользователю возвращается public_key и id, которые записываются в localstorage. Будут храниться, пока пользователь не закроет браузер, public_key будет валиден или не произойдет logout.

Обычно public_key или access token отправляет в headers вместе с каждым запросом. Apollo GraphQL позаботилось о механизме обмена ключей между клиентом и сервером через websockets.

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

С каждым запросом на сервер отправляется public_key. При ошибке произойдет logout.

Profile & Settings

Доступ к персональным данным осуществяется только после проверки public_key на сервере.
Профиль пользователя и страница настроек похожи. Они оба требуют аутентификацию пользователя. Различия в осуществляемых операциях:

• Profile? —? GraphQL queries и subscription, или получение и обновление данных.
• Settings ?— ?GraphQL mutation или редактирование и удаление данных.

Заключение

Это базовый пример. Его можно доработать:

• На страницу аутентификации добавить Google reCaptcha.
• Валидация email пользователя.
• Установить время истекания public_key и проверка ip.
• Мессенджер, и т.д.

Для меня это дебютная статья. На момент ее написание было 30 дней с начала моего знакомства с миром node.js.

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

Спасибо за внимание.