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

Аутентифікація на Node-застосунку: реєстрація користувача

by
Difficulty:BeginnerLength:MediumLanguages:

Ukrainian (українська мова) 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. Створюється нова схема. Для кожного користувача ви зберігаєте адресу електронної пошти, ім'я та пароль до бази даних. Схема описує, як повинно бути створено модель для кожного документа. Тут ви зазначаєте, що типом адреси електронної пошти, імені користувача та пароля повинен бути 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. Перевірка даних користувача. Впевніться, що користувач не надіслав порожню форму. Усі поля повинні бути заповнені. Адреса електронної пошти спеціально перевіряється за допомогою методу .email(), завдяки якому гарантується, що уведені користувачем дані відповідають формату адреси електронної пошти. Пароль же перевіряється за допомогою регулярного виразу. У паролі підтвердження варто зберегти те ж значення, що й в уведеному паролі. Ці перевірки здійснюються за допомогою модуля Joi.
  3. Встановлення вашого маршрутизатора. При надходженні запитів по методу GET виконується сторінка реєстрації, тим часом як запити по методу POST надходять після того, як користувач натискає кнопку для відправлення форми.
  4. Маршрутизатор експортується у вигляді модуля.

Ось як виглядає код.

Давайте розглянемо більш детально, що відбувається при надходженні запитів по методу POST.

Значення, уведені в формі для реєстрації, доступні через властивість req.body та мають наступний вигляд:

Ця властивість перевіряється за допомогою схеми userSchema, що ви створили раніше. Уведені користувачем значення присвоюються константі під назвою result.

У випадку помилки під час перевірки даних повідомлення про помилку відображається користувачеві та відбувається переадресація користувача на сторінку реєстрації.

Інакше ми намагаємося встановити, чи існує користувач із тією ж адресою електронної пошти, оскільки нам не хотілося б мати двох чи більше користувачів із однаковою адресою.

У випадку співпадання адреси електронної пошти користувач інформується, що його адреса вже використовується. Інакше наступним етапом є гешування пароля. У цей час ви й викликаєте метод hashPassword, який визначили у вашому файлі user.js. Новий загешований пароль присвоюється константі hash.

Нема необхідності у зберіганні confirmationPassword до бази даних. Тому ця властивість видаляється. Доступний у змінній пароль досі незашифрован. Оскільки не варто зберігати незашифрований пароля до вашої бази даних, важливо знову присвоїти в якості значення пароля створений геш. Це здійснюється за допомогою наступного рядка коду:

Екземпляр нового користувача зберігається до бази даних. Виводиться флеш-повідомлення, яке оповіщає, що реєстрація пройшла вдало, і користувач переадресовується на сторінку входу до застосування.

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

Перейдіть у вашому браузері на сторінку http://localhost:5000, і ви повинні будете побачити ваш новий додаток.

Завершення

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

Далі ви дізнаєтеся, як реалізувати можливість входу до системи для зареєстрованих користувачів. Сподіваюсь, що матеріал вам сподобався!

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.