Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Node.js
Code

Аутентификация на Node-приложении: регистрация пользователя

by
Difficulty:BeginnerLength:MediumLanguages:

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

Введение

Так же как аутентификация важна для API (* Application Programming Interface - программный интерфейс приложения. Здесь и далее примеч. пер.), она является важной особенностью определенных веб-приложений - тех, у которых имеются страницы и секреты, к которым должен быть доступ только у пользователей, прошедших регистрацию и аутентификацию.

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

Установка приложения

Создайте новую папку, в которой вы будете работать. В соответствии с темой данного руководства я назвал мою site-auth. Инициализируйте проект в только что созданной папке. Ниже показано, как вы можете это сделать.

Флаг -y сообщает npm (* менеджер пакетов для JavaScript) о необходимости использования  опций по умолчанию.

Отредактируйте часть файла package.json так, чтобы она выглядела, как моя.

После этого запустите команду для установки пакетов.

Создайте файл в вашей рабочей папке под названием app.js.

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

Эти зависимости были установлены после выполнения команды npm install. Для того чтобы их использовать в вашем приложении вам необходимо запросить и сохранить их в соответствующие константы.

В данном руководстве вы будете использовать в качестве базы данных MongoDB. Вам необходимо будет сохранить информацию о пользователе в базу данных. Для работы с MongoDB вы будете использовать Mongoose - инструмент для моделирования в Node.js (* ODM (Object Document Mapper - объектно-документный отобразитель)).Настройка Mongoose не вызывает трудностей. Выполняется следующим образом:

На данном этапе давайте настроим наше промежуточное ПО (* программное обеспечение).

  1. Результат инициализации Express присваивается константе app.
  2. Происходит настройка промежуточного ПО, которое будет заниматься представлениями. Для создания представлений вы будете использовать handlebars.
  3. Вы настроили промежуточное ПО для bodyparser, cookie, session и passport. Passport будет использоваться, когда пользователи хотят войти в приложение.
  4. В определенные моменты вы будете отображать флэш-сообщения. Поэтому вам необходимо настроить промежуточное ПО для этого и создать необходимый вам тип флэш-сообщений.
  5. Промежуточное ПО для настройки маршрутов. Будет обрабатывать любой запрос, сделанный к пути URL (Uniform Resource Locator - унифицированный указатель [местонахождения информационного] ресурса). Здесь указаны пути URL для путей, указанных в файлах index и users.
  6. Промежуточное ПО для обработки ошибок 404. Данное промежуточное ПО начинает действовать, если запрос не соответствует никакому из вышеуказанных промежуточному ПО.
  7. Сервер настраивается на прослушивание запросов по 5000 порту.

Настройка представлений

 Создайте новую папку под названием views (* представления). Внутри нее создайте две другие папки под названиями layouts и partials. Сформируйте подобную древовидную структуру в папке views. Для этого создайте необходимые файлы в их соответствующих папках.

После этого пришло время писать код.

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

Далее переходим к странице приложения index, которая должна выглядеть следующим образом:

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

Вам понадобится страница входа для зарегистрированных пользователей.

Файл notFound.handlebars будет использоваться в качестве страницы для показа ошибок.

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

Последний файл для ваших представлений с кодом навигационной панели приводится ниже.

После этого вы готовы к рассмотрению некоторых сложных частей приложения.

Проверка данных

Вам необходима будет модель User. Исходя из кода для представлений выше, вы можете прийти к заключению, что для модели User необходимы свойства email, username и password. Создайте папку под названием models и файл в ней под названием user.js.

  1. Происходит импорт зависимостей и их сохранение в  переменных.
  2. Создается новая схема. Для каждого пользователя вы сохраняете email, username и password в базу данных. Схема описывает, как должна быть создана модель для каждого документа. Здесь вы указываете, что типом адреса электронной почты, имени пользователя пароль должен быть String.
  3. Также для каждого пользователя вы хотите создать timestamps (* время создания/модификации файла). Вы используете Mongoose для получения значений createdAt и updatedAt. Затем сохраняете их в базу данных.
  4. Определяется модель, и результат присваивается константе под названием User, которая потом экспортируется в качестве модуля. Поэтому ее можно использовать в других частях приложения.

Подсаливание и хеширование пароля

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

Звучит замечательно, неправда ли? Давайте реализуем это в файле user.js

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

Маршруты Index и Users

Создайте новую папку под названием routes. В этой новой папке создайте два новых файла: index.js и users.js.

Файл index.js будет очень простым. В нем будет вызываться на исполнение представление index вашего приложения. Помните, как вы настроили промежуточное ПО для ваших маршрутов в вашем файле app.js, когда вы сделали следующее:

Итак, ваш маршрут в файле index.js, просто исполняющий страницу index, должен выглядеть следующим образом:

Теперь переходим к маршруту users. Пока что в этом файле для маршрута будут выполняться четыре действия:

  1.  Запрос зависимостей. Вам необходимо будет запросить зависимости, которые вы установили при помощи npm.
  2. Проверка пользовательских данных. Убедитесь, что пользователь не прислал пустую форму. Все поля должны быть заполнены. Введенные данные должны иметь тип String. Адрес электронной почты проходит специальную проверку при помощи метода .email(), благодаря которому гарантируется, что введенные пользователем данные соответствуют формату адреса электронной почты. Пароль же проверяется при помощи регулярного выражения. В пароле подтверждения следует сохранить то же значение, что и во введенном пароле. Эти проверки осуществляются при помощи модуля Joi.
  3. При поступлении запросов по методу GET исполняется страница регистрации, в то время как запросы по методу POST поступают после того, как пользователь нажимает кнопку для отправки формы.
  4. Маршрутизатор экспортируется в виде модуля.

Вот как выглядит код.

Давайте рассмотрим подробнее, что происходит при поступлении запросов по методу POST.

Значения, введенные в форме для регистрации, доступны через свойство req.body и выглядят подобным образом:

Это свойство проверяется с помощью схемы userSchema, которую вы создали ранее. Введенные пользователем значения присваиваются константе под названием result.

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

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

В ином случае следующим этапом является хеширование пароля. В этот момент вы и вызываете метод hashPassword, который определили в вашем файле user.js. Новый захешированный пароль присваивается константе hash.

Нет необходимости в сохранении confirmationPassword в базу данных. Поэтому это свойство удаляется. Доступный в переменной пароль по прежнему незашифрован. Поскольку не следует сохранять незашифрованный пароль в вашей базе данных, важно заново присвоить в качестве значения пароля созданный ранее хеш. Это осуществляется при помощи следующей строки кода:

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

Запустите ваш сервер, выполнив в консоли команду:

Перейдите в вашем браузере на страницу http://localhost:5000, и вы должны будете увидеть ваше новое приложение.

Заключение

Теперь вы знаете, как реализовать возможность  регистрации в Node-приложениях. Вы поняли важность проверки пользовательских данных и процесс ее осуществления при помощи Joi. Также вы использовали модуль bcryptjs для подсаливания и хеширования вашего пароля.

Далее вы увидите, как реализовать возможность входа в систему для зарегистрированных пользователей. Надеюсь, вам понравилось!

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.