Файл: Авторизация в Webприложениях Node js.docx

Министерство науки и высшего образования Российской ФедерацииФедеральное государственное автономное образовательноеучреждение высшего образования«ЮЖНЫЙ ФЕДЕРАЛЬНЫЙ УНИВЕРСИТЕТ»Инженерно-технологическая академияИнститут компьютерных технологий и информационной безопасностиОтчет по практической работе № 3на тему «Авторизация в Web-приложениях Node.js»по дисциплине «Технологии разработки серверной части веб-приложений»Выполниластудентка группы КТбо3-4 Н. И. СелевцоваПринялдоцент кафедры МОП ЭВМ А. Н. Шкурко

СОДЕРЖАНИЕ

ЦЕЛЬ РАБОТЫ

Данная практическая работа направлена на изучение и практическое использование методов авторизации в web-приложениях Node.js.ЗаданиеВ рамках выполнения практической работы требуется выполнить следующие задачи и продемонстрировать полученные навыки:– Создать новое node.js приложение;– Подключить к приложению библиотеки express.js и liquid;– Разработать HTML-шаблоны для страниц приложения;– Реализовать функциональность авторизации и аутентификации пользователя;– Реализовать логику обработки на сервере согласно варианту задания.Вариант задачи: 1Необходимо реализовать простое приложение, содержащее форму для ввода логина и пароля, а также следующие страницы:- страницу информации о текущем пользователе;- страницу со списком пользователей;- страницу, указывающую на отсутствие доступа к ресурсу. Страница информации о пользователе должна отображать данные текущего авторизованного пользователя и должна быть доступна только после ввода пароля. Также при авторизации пользователя должна устанавливаться его роль (user или admin). Страница со списком пользователей должна быть доступна только пользователям с ролью admin. В

---

случае отсутствия доступа к странице, должна отображаться соответствующая страница. Страница информации о пользователе должна содержать кнопку logout, которая возвращает пользователя на страницу ввода пароля. Пароли пользователей и их роли должны храниться в файле.

Необходимо использовать механизм сессий express.js.

ХОД РАБОТЫ

Проект разрабатываемого веб-приложения имеет следующую файловую структуру – рисунок 1. В приложение были подключены библиотеки express.js и liquid, установлено соединение с локальным сервером. Рисунок 1 – Файловая структура приложенияРисунок 2 – Подключенные библиотеки и файлыНа языке HTML были созданы шаблоны страниц приложения. Был использован шаблонизатор Liquid вместе с промежуточным обработчиком bodyParser. Во время выполнения механизм шаблонов заменяет переменные в файле шаблона фактическими значениями и преобразует шаблон в HTML-файл, отправляемый клиенту. Были реализованы функциональность авторизации и аутентификации пользователя (рисунки 3-4) и логика обработки на сервере согласно варианту задания.Рисунок 3 – Форма авторизацииРисунок 4 – Внешний вид страницы авторизацииТакже был создан файл JSON с данными пользователей для их аутентификации на сервере (рисунок 5). Для каждого пользователя устанавливается его роль (user или admin). Информация о текущем авторизированном пользователе отображается только после ввода пароля на странице информации о пользователе (рисунки 6-8). Рисунок 5 – Файл с информацией о пользователяхРисунок 6 – Шаблон страницы с информацией пользователя

---

Рисунок 7 – Пример страницы пользователяРисунок 8 – Пример страницы пользователя [2]Рисунок 9 – Код для авторизации и аутентификацииРисунок 10 - Код для авторизации и аутентификации [2]Также была создана страница, отображающая список пользователей. Она доступна только пользователям с ролью admin. В случае отсутствия доступа к странице, отображается страница, указывающая на отсутствие доступа к ресурсу.Рисунок 11 – Шаблон списка пользователейРисунок 12 – Шаблон страницы с ошибкойРисунок 13 – Внешний вид страницы по пути /list для adminРисунок 14 – Внешний вид страницы по пути /list для userРисунок 15 – Реализация проверки роли пользователя для доступа к странице

ЗАКЛЮЧЕНИЕ

В ходе практической работы были изучены и освоен метод авторизации в web-приложениях Node.js. Было создано новое node.js приложение с подключенными к приложению библиотеками express.js и liquid, разработаны HTML-шаблоны для страниц приложения, реализована авторизация и аутентификация пользователя и логика обработки на сервере согласно варианту задания.

ЛИСТИНГ ПРОГРАММЫ

1.1 index.js

const express = require('express');const bodyParser = require('body-parser');var cookieParser = require('cookie-parser');var session = require('express-session');var { Liquid } = require('liquidjs');const users = require("./users.json");var engine = new Liquid();const app = express();app.use(express.static('public'));const port = 3000;app.engine('liquid', engine.express()); app.set('views', './views');         app.set('view engine', 'liquid');  app.use(cookieParser());app.use(bodyParser.urlencoded({      extended: true}));app.set('trust proxy', 1);

---

app.use(session({    secret: 'catcatcat',    resave: false,    saveUninitialized: true,  }))  function auth(req, res, next) {    if (req.user) {        next();    } else {        res.redirect('/login');    }}app.use((req, res, next) => {  if (req.session.user) {      req.user = {          id: req.session.user      }  }  next();});app.get('/login', (req, res) => res.render('login'));app.post("/login", (req, res) => {  if (users[req.body.user] && users[req.body.user].pass === req.body.password) {    req.session.user = users[req.body.user].name;    res.cookie("role", users[req.body.user].role);      res.redirect("/");      return;    } else {        res.redirect('/login');    }  });    app.get('/logout', (req, res) => {    req.session.user = '';    req.cookies.role = '';    res.redirect('/login'); }); app.get('/', auth, (req, res) => {  res.render('home', {      userId: req.user.id,      avatar: users[req.session.user].avatar,      hobby: users[req.session.user].hobby,      about: users[req.session.user].about  })}) app.get('/list', auth, (req, res) => {  if (req.cookies.role === "admin") {    let name1=users['user1']['name'];    let name2=users['admin']['name'];    let name3=users['user2']['name'];    res.render('list', {      name1,      name2,      name3,    });  } else {    res.render('error');  } }); app.use((err, req, res, next) => {    console.error(err.stack);    res.status(500).send('Something broke!'); })app.listen(port, () => console.log('Server is running on port 3000'));

1.2 login.liquid

html>



 

 

   

Вход

   


   

     
style="margin-left: 40px;">Имя пользователя:

     
style="margin-left: 40px;">Пароль:

       


     
        class="v"

        type="submit"

        value="Войти">
   

 

   

Моя страница

   

   
      src="{{avatar}}"

      alt="Avatar"

      class="avatar">

   

     


        Меня зовут:

        {{ userId }}

       


         
Хобби:

          {{ hobby }}


         
align="justify">О себе:

          {{ about }}

       


     

     

     

        Выход

     

   

   

Список пользователей

   

     
• {{ name1 }}


     


     
• {{ name2 }}


     


     
• {{ name3 }}


   

 

   

Отказано в доступе

   

      Вернуться на страницу

   

 

---