Впервые используете Vue.js? См. наш вступительный пост в блоге.
При создании системы аутентификации Vue.js задействованы два основных сценария. Сценарий первый: одна сторона контролирует и интерфейс, и сервер; сценарий второй: третья сторона контролирует серверную часть. Если это последний случай, мы должны адаптировать внешний интерфейс. Он должен иметь дело с любым типом аутентификации, который становится доступным из серверной части.
Готовый код для этого руководства доступен в этих репозиториях GitHub:
Типы аутентификации JavaScript во внешнем интерфейсе
В нашем приложении у нас есть возможность выбирать между различными типами аутентификации. Это потому, что мы будем отвечать как за интерфейс, так и за сервер. Определим два типа. Первый — это локальная или тот же домен аутентификация — это тот случай, когда интерфейс и сервер работают в одном домене. Второй — междоменная аутентификация — это когда внешний и внутренний интерфейсы работают в разных доменах.
Это две основные категории, но под ними есть множество подкатегорий. В свете вышеизложенного мы будем использовать локальную аутентификацию, так как отвечаем за всю систему. Мы будем использовать множество библиотек Node.js. Но два основных — Passport.js и Express.js. Passport.js — это библиотека проверки подлинности. Он предоставляет несколько функций, таких как локальная аутентификация, аутентификация OAuth и аутентификация единого входа. Express.js — это серверная платформа для Node.js, используемая для создания веб-приложений.
Парадигма приложений
Внешний интерфейс нашего приложения будет иметь две основные страницы: страницу входа и страницу панели инструментов. Доступ к странице входа будут иметь как авторизованные, так и анонимные пользователи. Страница панели инструментов будет доступна только для аутентифицированных пользователей. Страница входа будет иметь форму, которая будет отправлять данные через Ajax в наш внутренний API. Затем серверная часть проверит правильность учетных данных и ответит интерфейсной части с помощью файла cookie. Этот файл cookie будет использоваться внешним интерфейсом для получения доступа к любым заблокированным страницам.
Повторная проверка файла cookie происходит при каждом запросе на заблокированную страницу. Если файл cookie становится недействительным или пользователь не вошел в систему, он не может получить доступ к панели управления. Серверная часть отправит ответ об ошибке, а внешний интерфейс будет знать, что нужно перенаправить пользователя обратно на страницу входа.
Мы не будем настраивать настоящую базу данных — мы будем использовать массив пользователей в серверной части, чтобы имитировать некоторую форму базы данных. Наконец, у нас будет ссылка для выхода. Это отправит запрос на наш сервер, чтобы аннулировать нашу текущую сессию и, следовательно, выйти из системы текущего пользователя.
Итак, давайте начнем создавать нашу систему аутентификации Vue.js, используя Node.js в качестве серверной части.
Настройка внешнего интерфейса Vue.js
Для начала нам нужно установить последнюю версию Node.js и установить vue-cli. На момент написания этой статьи последней версией vue-cli была версия 3. Если установлена версия 2, мы хотим обновить ее — сначала нам нужно удалить старую версию, выполнив:
npm uninstall vue-cli -gЗатем установите последнюю версию, запустив:
npm install -g @vue/cliс последующим
npm install -g @vue/cli-initПосле настройки вышеперечисленного перейдите в любую папку в терминале и запустите:
vue init webpack vueauthclientЭто создаст новое приложение в vueauthclient, используя организацию папок webpack.
Мы должны получить несколько подсказок в командной строке. Безопасно выбрать все значения по умолчанию, но для этой статьи мы можем выбрать «нет» для тестов. Затем перейдите в эту папку, используя cd vueauthclient, и запустите приложение, используя:
npm run devЭто запустит сервер разработки, доступный по URL-адресу localhost:8080. После посещения этого URL-адреса на странице должен появиться логотип Vue.js с текстом. Компонент Vue.js, отвечающий за отображение этой страницы, находится в файле:
vueauthclient/src/components/HelloWorld.vueГлавный экран входа
Давайте настроим нашу страницу входа. Затем мы изменим домашнюю страницу по умолчанию на экран страницы входа, который нам еще предстоит создать. С этого момента мы будем опускать основную папку приложения vueauthclient при обращении к файлам.
Давайте установим библиотеку Ajax под названием Axios, используя:
npm install axios --saveЭто библиотека, которая упрощает выполнение вызовов HTTP Ajax на любой внутренний сервер. Он доступен как для внешнего, так и для внутреннего интерфейса, но здесь мы будем использовать его только для внешнего интерфейса.
Затем создайте файл компонента входа в систему в src/components/Login.vue. В этот файл вставьте следующее:
<template>
<div>
<h2>Login</h2>
<form v-on:submit="login">
<input type="text" name="email" /><br>
<input type="password" name="password" /><br>
<input type="submit" value="Login" />
</form>
</div>
</template>
<script>
import router from "../router"
import axios from "axios"
export default {
name: "Login",
methods: {
login: (e) => {
e.preventDefault()
let email = "[email protected]"
let password = "password"
let login = () => {
let data = {
email: email,
password: password
}
axios.post("/api/login", data)
.then((response) => {
console.log("Logged in")
router.push("/dashboard")
})
.catch((errors) => {
console.log("Cannot log in")
})
}
login()
}
}
}
</script>
Давайте разберем этот код, чтобы увидеть, что происходит.
Часть шаблона ниже представляет собой форму с двумя полями ввода: email и password. К форме прикреплен обработчик события submit. Используя синтаксис Vue.js v-on:submit="login", это отправит данные поля в метод компонента login.
<template>
<div>
<h2>Login</h2>
<form v-on:submit="login">
<input type="text" name="email" /><br>
<input type="password" name="password" /><br>
<input type="submit" value="Login" />
</form>
</div>
</template>
В скриптовой части кода, как показано ниже, мы импортируем наш файл маршрутизатора. Это живет в src/router/index.js. Мы также импортируем библиотеку ajax Axios для внешнего интерфейса. Затем мы сохраняем учетные данные пользователя и отправляем запрос на вход на наш внутренний сервер:
<script>
import router from "../router"
import axios from "axios"
export default {
name: "Login",
methods: {
login: (e) => {
e.preventDefault()
let email = "[email protected]"
let password = "password"
let login = () => {
let data = {
email: email,
password: password
}
axios.post("/api/login", data)
.then((response) => {
console.log("Logged in")
router.push("/dashboard")
})
.catch((errors) => {
console.log("Cannot login")
})
}
login()
}
}
}
</script>
В области сценария ниже
e.preventDefault() let email = "[[email protected]]([email protected])" let password = "password"
На данный момент мы храним жестко закодированные имя пользователя и пароль в переменных. Это помогает ускорить разработку, не позволяя нам перепечатывать одно и то же. Позже мы переключим их и получим реальные данные из отправки формы.
В последней части кода ниже мы делаем вызов ajax, используя указанные выше учетные данные. В случае ответа сервера ok мы перенаправляем пользователя на панель управления. Если ответ не ok, мы остаемся на той же странице и регистрируем ошибку в консоли.
let login = () => {
let data = {
email: email,
password: password
}
axios.post("/api/login", data)
.then(response => {
console.log("Logged in")
router.push("/dashboard")
})
.catch(errors => {
console.log("Cannot login")
})
}
login()
Теперь, когда у нас настроен компонент входа в систему, давайте изменим маршрутизатор, чтобы убедиться, что он распознает новую страницу. В файле src/router/index.js измените существующий маршрутизатор на этот:
import Vue from "vue"
import Router from "vue-router"
import Login from "@/components/Login"
import HelloWorld from "@/components/HelloWorld"
Vue.use(Router)
export default new Router({
routes: [
{
path: "/",
name: "HelloWorld",
component: HelloWorld
},
{
path: "/login",
name: "Login",
component: Login
}
]
})
Что мы сделали, так это импортировали наш новый компонент, а затем добавили объект в массив маршрутов. Удалите регистрацию маршрута HelloWorld, так как он нам больше не понадобится.
Наконец, для страницы входа давайте удостоверимся, что это страница по умолчанию нашего приложения. Измените текущий путь регистрации маршрута входа с
path: "/login",to
path: "/",Не забудьте удалить регистрацию маршрута для маршрута HelloWorld, иначе может возникнуть ошибка. Снова перейдя к localhost:8080 в браузере, мы должны увидеть нашу новую форму входа. Отправка на этом этапе ничего не даст, кроме жалобы на то, что внутренний URL-адрес localhost:8080/api/login не существует.
Настройка первой защищенной страницы — панель управления
Теперь на страницу панели инструментов. Создайте для него компонент, создав файл по адресу src/components/Dashboard.vue. Вставьте туда следующее:
<template>
<div>
<h2>Dashboard</h2>
<p>Name: {{ user.name }}</p>
</div>
</template>
<script>
import axios from "axios"
import router from "../router"
export default {
name: "Login",
data() {
return {
user: {
name: “Jesse”
}
}
},
methods: {
getUserData: function() {
let self = this
axios.get("/api/user")
.then((response) => {
console.log(response)
self.$set(this, "user", response.data.user)
})
.catch((errors) => {
console.log(errors)
router.push("/")
})
}
},
mounted() {
this.getUserData()
}
}
</script>
В разделе шаблона мы отображаем текущее имя пользователя. Прежде чем настраивать серверную часть, мы жестко закодируем пользователя во внешнем интерфейсе. Это для того, чтобы мы могли работать с этой страницей, иначе мы получим ошибку.
В разделе сценариев мы импортируем библиотеку Axios и наш маршрутизатор. Затем у нас есть функция данных для нашего компонента, где мы возвращаем объект с пользовательским свойством. Как мы видим, в настоящее время у нас есть некоторые жестко закодированные пользовательские данные.
У нас также есть два метода с именами getUserData и mounted. Движок Vue.js вызывает метод mounted при открытии компонента. Нам остается только заявить об этом. Второй метод, getUserData, вызывается в методе mounted. Там мы вызываем внутренний сервер, чтобы получить данные для текущего пользователя, вошедшего в систему.
Во время обращения к бэкенду мы получаем ответ от сервера. Нам придется обработать два возможных сценария в зависимости от типа ответа.
Во-первых, если вызов был успешным, мы устанавливаем свойство пользователя с данными, возвращенными из серверной части, используя:
self.$set(this, "user", response.data.user)Во-вторых, если возникла проблема со входом в систему, сервер отвечает ошибкой. Затем внешний интерфейс перенаправляет пользователя обратно на страницу входа с помощью этой строки:
router.push("/")Мы используем описанный выше метод push для перенаправления, и он доступен в пакете vue-router, маршрутизаторе по умолчанию для Vue.js. Давайте добавим конфигурацию маршрута для этой страницы, добавив это в файл маршрута, как мы сделали для страницы входа. Импортируйте компонент:
import Dashboard from "@/components/Dashboard"И добавьте определение маршрута:
{
path: "/dashboard",
name: "Dashboard",
component: Dashboard
}
Настройка внешнего уровня данных с помощью Axios
Теперь, когда у нас есть интерфейсные страницы, давайте настроим Axios и Vue.js. Мы подготовим их к общению с нашим сервером. Поскольку мы находимся на этапе разработки, внешний интерфейс работает на порту 8080. Как только мы начнем разработку нашего внутреннего сервера, он будет работать на другом порту с номером 3000. Так будет до тех пор, пока мы не будем готовы к работе.
Ничто не мешает нам запускать их на одном порту. На самом деле, в конечном итоге будет так, в конце концов. Если вспомнить, мы собираемся использовать подход тот же домен. Сейчас мы запустим серверную и клиентскую части на разных портах. Это потому, что мы хотим воспользоваться многими полезными функциями сервера разработки Vue.js. Мы коснемся того, как объединить их (внешний и внутренний) в одной из последующих глав.
Прежде чем двигаться дальше, давайте выделим здесь одну проблему. Есть недостаток в разработке нашего приложения на разных портах. Это называется Cross-Origin Request Sharing, сокращенно CORS. По умолчанию это не позволит нам делать междоменные Ajax-запросы к нашей серверной части. Существует библиотека Node.js, чтобы найти способ обойти это, но мы оставим это для другого руководства.
Сервер разработки Vue.js имеет нечто, называемое прокси. Это позволяет нашему внутреннему серверу думать, что внешний интерфейс работает на том же порту, что и он сам. Чтобы включить эту функцию, откройте файл конфигурации в config/index.js. Под свойством dev добавьте объект следующим образом:
proxyTable: {
"/api": "http://localhost:3000"
},
В приведенном выше коде мы перенаправляем запросы Ajax, начинающиеся с /api, на URL http://localhost:3000. Обратите внимание, что это отличается от URL-адреса, на котором работает наше внешнее приложение. Если бы у нас не было этого кода, запросы Ajax по умолчанию отправлялись бы на http://localhost:8080, чего мы не хотим. Когда он будет готов к производству, мы можем удалить его:
Наконец, установите внешнюю библиотеку файлов cookie, используя:
npm install vue-cookies --saveЗащита нашего внутреннего API
Теперь перейдем к настройке серверной части Node.js. Прежде всего, для этой части в вашей системе также должен быть установлен Node.js. Перейдите к окну терминала. Создайте пустую папку с именем vueauthclient-backend. Перейдите к папке, используя:
cd vueauthclient-backendЗатем инициализируйте новое приложение Node.js с помощью команды:
npm initБудет несколько подсказок. Давайте примем значения по умолчанию и укажем значения там, где это необходимо. У нас должен получиться файл с именем package.json. Создайте файл с именем index.js в корневом каталоге проекта. Здесь будет жить наш основной код. Установите несколько библиотек с помощью команды:
npm install --save body-parser cookie-session express passport passport-local- библиотека body-parser позволяет нам получать доступ к значениям из запроса Ajax, отправленного из внешнего интерфейса.
- cookie-session позволяет нам хранить файлы cookie на сервере и иметь возможность отправлять их клиенту при входе в систему.
- express — это наша
Node.jsплатформа, которая помогает нам создавать API-интерфейсы Ajax. Это также позволяет нам обслуживать статические файлы из нашего приложенияNode.js. - passport.js — это библиотека, помогающая нам аутентифицировать пользователей. Он делает это, создавая сеансы и управляя ими для каждого пользователя.
- passport-local — это библиотечный компонент для Passport.js. Он специализируется на простой аутентификации с использованием типа аутентификации local. Например, если мы хотим использовать тип входа
SSO, нам потребуется установить компонент Passport.js, который имеет эту функцию. Итак, теперь, когда у нас установлены библиотеки, давайте импортируем и настроим их.
В верхней части файла index.js импортируйте библиотеки, используя код:
const express = require('express')
// creating an express instance
const app = express()
const cookieSession = require('cookie-session')
const bodyParser = require('body-parser')
const passport = require('passport')
// getting the local authentication type
const LocalStrategy = require('passport-local').Strategy
Во-первых, давайте инициализируем библиотеки cookie-session и body-parser, используя:
app.use(bodyParser.json())
app.use(cookieSession({
name: 'mysession',
keys: ['vueauthrandomkey'],
maxAge: 24 * 60 * 60 * 1000 // 24 hours
}))
Мы устанавливаем срок действия файла cookie через 24 часа. Затем давайте сообщим нашему приложению Node.js, что мы хотим использовать Passport.js. Сделайте это, добавив строку:
app.use(passport.initialize());Затем скажите Passport.js запустить систему управления сеансом:
app.use(passport.session());Поскольку мы не будем использовать настоящую базу данных для управления пользователями, для краткости мы будем использовать для этого массив. Добавьте следующие строки:
let users = [
{
id: 1,
name: "Jude",
email: "[email protected]",
password: "password"
},
{
id: 2,
name: "Emma",
email: "[email protected]",
password: "password2"
}
]
Далее давайте настроим URL-адреса для входа, выхода и получения пользовательских данных. Их можно найти по адресам POST /api/login, GET /api/logout и GET /api/user соответственно. Для входа в систему вставьте следующее:
app.post("/api/login", (req, res, next) => {
passport.authenticate("local", (err, user, info) => {
if (err) {
return next(err);
}
if (!user) {
return res.status(400).send([user, "Cannot log in", info]);
}
req.login(user, err => {
res.send("Logged in");
});
})(req, res, next);
});
Здесь мы указываем Express.js аутентифицировать пользователя, используя предоставленные учетные данные. Если возникает ошибка или происходит сбой, мы возвращаем сообщение об ошибке во внешний интерфейс. Если пользователь войдет в систему, мы ответим сообщением об успешном завершении. Passport.js выполняет проверку учетных данных. Мы настроим это в ближайшее время. Обратите внимание, что метод passport.authenticate находится в библиотеке Passport.js.
Следующий URL-адрес, который мы настроим, — logout. Это аннулирует наш cookie, если он существует. Добавьте это для достижения функциональности:
app.get("/api/logout", function(req, res) {
req.logout();
console.log("logged out")
return res.send();
});
Наконец, URL-адрес для получения данных пользователей, вошедших в систему в данный момент. При входе в систему Passport.js добавляет в запрос пользовательский объект, используя в качестве идентификатора файл cookie из внешнего интерфейса. Мы должны использовать идентификатор из этого объекта, чтобы получить необходимые пользовательские данные из нашего массива данных в бэкэнде. Вставьте следующее:
app.get("/api/user", authMiddleware, (req, res) => {
let user = users.find(user => {
return user.id === req.session.passport.user
})
console.log([user, req.session])
res.send({ user: user })
})
Обратите внимание, что на этот раз у нас есть вторая переменная, которую мы передаем перед обратным вызовом. Это потому, что мы хотим защитить этот URL-адрес, поэтому мы передаем фильтр промежуточного программного обеспечения. Этот фильтр проверит, действителен ли текущий сеанс, прежде чем разрешить пользователю продолжить оставшуюся часть операции. Давайте создадим промежуточное ПО, используя:
const authMiddleware = (req, res, next) => {
if (!req.isAuthenticated()) {
res.status(401).send('You are not authenticated')
} else {
return next()
}
}
Мы должны объявить его перед созданием маршрута API для /api/user.
Далее давайте настроим Passport.js, чтобы он знал, как войти в систему. После входа он сохранит данные объекта пользователя в сеансе cookie и извлечет данные по более поздним запросам. Чтобы настроить Passport.js с использованием локальной стратегии, добавьте следующее:
passport.use(
new LocalStrategy(
{
usernameField: "email",
passwordField: "password"
},
(username, password, done) => {
let user = users.find((user) => {
return user.email === username && user.password === password
})
if (user) {
done(null, user)
} else {
done(null, false, { message: 'Incorrect username or password'})
}
}
)
)
Здесь мы указываем Passport.js использовать LocalStrategy, который мы создали выше. Мы также указываем, какие поля ожидать от внешнего интерфейса, поскольку ему нужны имя пользователя и пароль. Затем мы используем эти значения для запроса пользователя. Если они допустимы, мы вызываем обратный вызов done, который сохраняет объект пользователя в сеансе. Если он недействителен, мы вызовем обратный вызов done со значением false и вернемся с ошибкой. Следует отметить, что приведенный выше код работает в сочетании с URL-адресом login. Вызов passport.authenticate в этом обратном вызове URL запускает приведенный выше код.
Далее давайте сообщим Passport.js, как обрабатывать данный объект пользователя. Это необходимо, если мы хотим выполнить какую-то работу перед сохранением ее в сеансе. В этом случае мы хотим сохранить только идентификатор, так как его достаточно для идентификации пользователя, когда мы извлекаем его из файла cookie. Для этого добавьте следующее:
passport.serializeUser((user, done) => {
done(null, user.id)
})
Далее настроим реверс. Когда пользователь делает запрос на защищенный URL. Мы сообщаем паспорту, как получить объект пользователя из нашего массива пользователей. Для этого он будет использовать идентификатор, который мы сохранили с помощью метода serializeUser. Добавь это:
passport.deserializeUser((id, done) => {
let user = users.find((user) => {
return user.id === id
})
done(null, user)
})
Теперь давайте добавим код, который загружает сервер Node.js, используя следующее:
app.listen(3000, () => {
console.log("Example app listening on port 3000")
})
Запустите команду:
node index.jsЭто фактически запускает сервер. В консоли появится сообщение с текстом Пример приложения, прослушивающего порт 3000.
Подготовка к производству
Теперь, когда мы заходим на страницу localhost:8080, мы должны увидеть форму входа. Когда мы отправляем форму, мы перенаправляемся на страницу панели инструментов. Мы достигаем этого с помощью прокси, который мы настроили ранее.
Это приемлемо для разработки, но противоречит цели создания приложения в том же домене. Чтобы иметь сценарий тот же домен, нам нужно скомпилировать наше приложение для производства.
Перед этим проверим работоспособность прокси. Закомментируйте URL-код прокси-сервера в config/index.js. Возможно, нам потребуется перезапустить сервер разработки, потому что мы изменили файл конфигурации.
Теперь давайте вернемся на страницу входа и отправим форму. Мы получим сообщение об ошибке, говорящее о том, что нам не разрешен доступ к внутреннему серверу. Чтобы обойти это, нам нужно настроить внутренний сервер Node.js. Серверная часть теперь будет обслуживать наше внешнее приложение вместо сервера разработки.
В консоли внешнего интерфейса выполните команду:
npm run buildЭто создаст все необходимые файлы, необходимые для производства. Мы можем найти все созданные файлы из этой команды в папке dist. С этого момента у нас есть два варианта: мы можем либо скопировать эту папку, чтобы она стала частью нашего приложения Node.js, либо мы можем сообщить серверу Node.js для прямой ссылки на него в нашей файловой системе. Последнее полезно, если мы все еще хотим, чтобы они были отдельными репозиториями. Мы будем использовать последний метод.
Перейдите в папку dist. Запустите команду pwd, чтобы получить абсолютный путь к папке dist, если мы работаем в системе на базе Linux или Mac. Если мы в Windows, мы можем получить абсолютный путь к папке с помощью эквивалентной команды.
Скопируйте абсолютный путь, но не забудьте перезапустить сервер Node.js после любых изменений. Так как мы не хотим постоянно перезагружать сервер, давайте установим nodemon. Он может справиться с этим для нас, когда наш код изменится.
Затем вставьте следующее после операторов импорта:
const publicRoot = '/absolute/path/to/dist' app.use(express.static(publicRoot))Это сообщает серверу, где искать файлы.
Последним шагом будет добавление маршрута к корню нашего приложения Node.js. Это делается для того, чтобы обслуживать скомпилированный нами готовый к использованию код. Сделайте это, добавив:
app.get("/", (req, res, next) => {
res.sendFile("index.html", { root: publicRoot })
})
Теперь, даже с отключенным прокси, давайте посетим корень сервера localhost:3000. Мы увидим форму входа. Отправьте это, и мы должны увидеть страницу панели инструментов с отображаемым именем пользователя.
Функции выхода из системы и данные для входа
Обратите внимание, что наше приложение по-прежнему использует жестко запрограммированные данные, мы хотим получить их из отправленной формы. Измените эти строки в компоненте входа с:
let email = "[email protected]" let password = "password"
to:
let email = e.target.elements.email.value let password = e.target.elements.password.value
Теперь мы используем данные из формы. Далее давайте настроим ссылку для выхода из системы. В компоненте src/App.vue измените шаблон на этот:
<template>
<div id="app">
<img src="./assets/logo.png">
<div>
<router-link :to="{ name: 'Dashboard'}">Dashboard</router-link>
<router-link :to="{ name: 'Login'}">Login</router-link>
<a href="#" v-on:click="logout">Logout</a>
</div>
<router-view/>
</div>
</template>
Здесь мы создали ссылки на страницу входа, страницу панели инструментов и ссылку выхода. Ссылка для выхода в настоящее время не имеет соответствующего метода, поэтому давайте создадим его. В src/App.vue добавьте метод выхода из системы в разделе scripts:
logout: function (e) {
axios
.get("/api/logout")
.then(() => {
router.push("/")
})
}
Здесь мы отправляем Ajax-запрос к серверной части Node.js. Затем мы перенаправляем пользователя на страницу входа, когда возвращается ответ. Выход из системы не будет работать с нашим развернутым приложением, потому что нам нужно повторно развернуть его для производства, используя:
npm run buildТеперь мы можем вернуться к URL-адресу localhost:3000. Мы можем войти в систему, выйти из системы и посетить страницу панели инструментов.
Вывод
После этого руководства мы сможем добавить столько аутентифицированных страниц, сколько захотим.
Если вы впервые используете Vue.js, обратитесь к нашему вводному сообщению в блоге здесь. Это поможет в настройке и создании базового приложения Vue.js.
Кроме того, не забудьте защитить свое приложение Vue.js от кражи кода и обратного проектирования. См. наше удобное руководство по защите приложений Vue.js с помощью Jscrambler.
Первоначально опубликовано на blog.jscrambler.com Ламином Саннехом.
