一、簡(jiǎn)介
Passport.js是專(zhuān)為 Nodejs 設(shè)計(jì)的身份驗(yàn)證中間件。passport-local使用通行證策略通過(guò)用戶名和密碼進(jìn)行身份驗(yàn)證。該模塊有助于在 nodejs 應(yīng)用程序中使用用戶名和密碼進(jìn)行身份驗(yàn)證。
1.1 設(shè)置 Node.js
要建立的Node.js在Windows上,您將需要前往Node官網(wǎng)下載。選擇適用于您平臺(tái)的安裝程序(還包括 NPM 包管理器)并運(yùn)行安裝程序以啟動(dòng) Node.js 安裝向?qū)?。按照向?qū)Р襟E操作,完成后單擊“完成”。如果一切順利,您可以導(dǎo)航到命令提示符以驗(yàn)證安裝是否成功,如圖 1 所示。
2. 在 Node.js 中使用 Passport 進(jìn)行本地身份驗(yàn)證
要設(shè)置應(yīng)用程序,我們需要導(dǎo)航到項(xiàng)目所在的路徑。對(duì)于編程,我使用?Visual Studio Code
?作為我的首選 IDE。您可以自由選擇自己喜歡的 IDE。
2.1 設(shè)置實(shí)現(xiàn)
讓我們編寫(xiě)實(shí)際學(xué)習(xí)所需的不同文件。
2.1.1 設(shè)置依賴
導(dǎo)航到項(xiàng)目目錄并運(yùn)行npm init -y以創(chuàng)建package.json文件。該文件包含與項(xiàng)目相關(guān)的元數(shù)據(jù),用于管理項(xiàng)目依賴項(xiàng)、腳本、版本等。將以下代碼添加到文件中,我們將在其中指定所需的依賴項(xiàng)。
{
"name": "passport-app",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"start": "nodemon server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"bcrypt": "^5.0.1",
"ejs": "^3.1.6",
"express": "^4.17.1",
"express-flash": "0.0.2",
"express-session": "^1.17.2",
"method-override": "^3.0.0",
"passport": "^0.4.1",
"passport-local": "^1.0.0"
},
"devDependencies": {
"dotenv": "^10.0.0",
"nodemon": "^2.0.12"
}
}
要下載依賴項(xiàng),請(qǐng)導(dǎo)航到包含該文件的目錄路徑并使用npm install
?命令。如果一切順利,依賴項(xiàng)將加載到?node_modules
?文件夾中,您可以繼續(xù)執(zhí)行進(jìn)一步的步驟。
2.1.2 視圖 - 創(chuàng)建歡迎屏幕
在根文件夾中創(chuàng)建一個(gè)名為?views
?的文件夾并將以下內(nèi)容添加到?index.ejs
?. 此屏幕將負(fù)責(zé)在成功驗(yàn)證后顯示歡迎頁(yè)面。
<h1>Hi <%= name %></h1>
<form action="/logout?_method=DELETE" method="POST">
<button type="submit">Sign Out</button>
</form>
2.1.3 查看——?jiǎng)?chuàng)建登錄界面
在根文件夾中創(chuàng)建一個(gè)名為?views
?的文件夾并將以下內(nèi)容添加到?login.ejs
?. 此屏幕將負(fù)責(zé)登錄。
<h1>Login</h1>
<% if (messages.error) { %> <%= messages.error %> <% } %>
<form action="/login" method="POST">
<div>
<label for="email">Email</label>
<input type="email" id="email" name="email" required />
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" name="password" required />
</div>
<button type="submit">Login</button>
</form>
<a href="/register">Sign up</a>
2.1.4 視圖 – 創(chuàng)建注冊(cè)屏幕
在根文件夾中創(chuàng)建一個(gè)名為?views
?的文件夾并將以下內(nèi)容添加到?login.ejs
?. 此屏幕將負(fù)責(zé)新用戶的注冊(cè)。
<h1>Register</h1>
<form action="/register" method="POST">
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name" required />
</div>
<div>
<label for="email">Email</label>
<input type="email" id="email" name="email" required />
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" name="password" required />
</div>
<button type="submit">Register</button>
</form>
<a href="/login">Login</a>
2.1.5 創(chuàng)建通行證配置
在根文件夾中,將以下內(nèi)容添加到配置文件中。該文件將負(fù)責(zé)使用用戶名和密碼配置策略。該策略還需要一個(gè)回調(diào),該回調(diào)將接受憑據(jù)并調(diào)用一個(gè)?done(…)
?方法來(lái)提供用戶詳細(xì)信息。
// adding passport related configuration
const LocalStrategy = require("passport-local").Strategy;
const bcrypt = require("bcrypt");
function initialize(passport, getUserByEmail, getUserById) {
const authenticateUser = async (email, password, done) => {
const user = getUserByEmail(email);
if (user == null) {
return done(null, false, { message: "User not found" });
}
try {
if (await bcrypt.compare(password, user.password)) {
return done(null, user);
} else {
return done(null, false, { message: "Invalid credentials" });
}
} catch (e) {
return done(e);
}
};
passport.use(new LocalStrategy({ usernameField: "email" }, authenticateUser));
passport.serializeUser((user, done) => done(null, user.id));
passport.deserializeUser((id, done) => {
return done(null, getUserById(id));
});
}
module.exports = initialize;
2.1.6 創(chuàng)建控制器
在根文件夾中,將以下內(nèi)容添加到索引文件中。該文件將負(fù)責(zé)初始化導(dǎo)入、路由并指定通行證配置以驗(yàn)證請(qǐng)求。請(qǐng)記住?.env
?在同一位置創(chuàng)建一個(gè)文件并指定敏感信息,例如會(huì)話機(jī)密、應(yīng)用程序端口號(hào)等。
if (process.env.NODE_ENV !== "production") {
require("dotenv").config();
}
// imports
const express = require("express");
const app = express();
const bcrypt = require("bcrypt");
const passport = require("passport");
const flash = require("express-flash");
const session = require("express-session");
const methodOverride = require("method-override");
// todo - add external db support
const users = [];
// configuring and initializing passport
const initializePassport = require("./passport-config");
initializePassport(
passport,
(email) => users.find((user) => user.email === email),
(id) => users.find((user) => user.id === id)
);
app.set("view-engine", "ejs");
app.use(express.urlencoded({ extended: false }));
app.use(flash());
app.use(
session({
secret: process.env.SESSION_SECRET || "8unto0n4oc7903zm",
resave: false,
saveUninitialized: false,
})
);
app.use(passport.initialize());
app.use(passport.session());
app.use(methodOverride("_method"));
// routes
// welcome page
// display greetings message for the user and logout button
app.get("/", checkAuthenticated, (req, res) => {
res.render("index.ejs", { name: req.user.name });
});
// login page
app.get("/login", checkNotAuthenticated, (req, res) => {
res.render("login.ejs");
});
app.post(
"/login",
checkNotAuthenticated,
passport.authenticate("local", {
successRedirect: "/",
failureRedirect: "/login",
failureFlash: true,
})
);
// new user sign-up page
app.get("/register", checkNotAuthenticated, (req, res) => {
res.render("register.ejs");
});
app.post("/register", checkNotAuthenticated, async (req, res) => {
try {
const hashedPassword = await bcrypt.hash(req.body.password, 10);
users.push({
id: "_" + Math.random().toString(36).slice(2),
name: req.body.name,
email: req.body.email,
password: hashedPassword,
});
res.redirect("/login");
} catch (e) {
// console.log(e);
res.redirect("/redirect");
}
// check if the user is successfully added to array
// console.log(users);
});
// logout of the application
app.delete("/logout", (req, res) => {
req.logOut();
res.redirect("/login");
});
// util methods
// only authenticated user should enter index page
function checkAuthenticated(req, res, next) {
if (req.isAuthenticated()) {
return next();
} else {
res.redirect("/login");
}
}
// unauthenticated user should not enter index page
function checkNotAuthenticated(req, res, next) {
if (req.isAuthenticated()) {
return res.redirect("/");
}
next();
}
// start server
const port = process.env.APPLICATION_PORT || 6001;
app.listen(port, () => {
console.log("Server listening at http://localhost:%s", port);
});
3. 運(yùn)行應(yīng)用程序
要運(yùn)行應(yīng)用程序,請(qǐng)導(dǎo)航到項(xiàng)目目錄并輸入以下命令,如圖 2 所示。如果一切順利,應(yīng)用程序?qū)⒃趶?.env
?文件或6001.
4. 演示
應(yīng)用程序成功啟動(dòng)后,導(dǎo)航到以下 url 以顯示登錄屏幕。您可以單擊注冊(cè)按鈕以創(chuàng)建新用戶并在此之后使用該應(yīng)用程序。
http://localhost:YOUR_PORT_NUMBER
這就是本教程的全部?jī)?nèi)容,我希望這篇文章能夠?yàn)槟峁┧璧囊磺???鞓?lè)學(xué)習(xí),不要忘記分享!
5. 總結(jié)
在本篇文章中,我們了解了passport 模塊以及如何在passport-local 依賴項(xiàng)的幫助下創(chuàng)建一個(gè)簡(jiǎn)單的登錄應(yīng)用程序。