Добавлен: 07.11.2023
Просмотров: 46
Скачиваний: 4
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
Министерство науки и высшего образования Российской Федерации
Федеральное государственное автономное образовательное
учреждение высшего образования
«ЮЖНЫЙ ФЕДЕРАЛЬНЫЙ УНИВЕРСИТЕТ»
Инженерно-технологическая академия
Институт компьютерных технологий и информационной безопасности
Отчет по практической работе № 3
на тему «Авторизация в Web-приложениях Node.js»
по дисциплине «Технологии разработки серверной части веб-приложений»
Выполнила
студентка группы КТбо3-4 Н. И. Селевцова
Принял
доцент кафедры МОП ЭВМ А. Н. Шкурко
СОДЕРЖАНИЕ
ЦЕЛЬ РАБОТЫ 3
ЗАКЛЮЧЕНИЕ 10
ЛИСТИНГ ПРОГРАММЫ 11
ЦЕЛЬ РАБОТЫ
Данная практическая работа направлена на изучение и практическое использование методов авторизации в 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>
Вход
Моя страница
src="{{avatar}}"
alt="Avatar"
class="avatar">
Меня зовут:
{{ userId }}
Хобби:
{{ hobby }}
align="justify">О себе:
{{ about }}
Список пользователей
- {{ name1 }}
- {{ name2 }}
- {{ name3 }}