บทความนี้จะขอแนะนำการเขียนสคริปต์ JavaScript เพื่อทำระบบ Authenticationแบบพื้นฐาน ด้วยมอดูล Passport จะช่วยให้ระบบสามารถตรวจสอบสมาชิกก่อนที่เข้าใช้งานระบบสมาชิกได้ โดยมอดูล passport จะช่วยตรวจสอบ Username และ Password ได้ทั้งแบบพื้นฐาน ผ่าน Account ของฐานข้อมูลของเรา ผ่าน Account ของ Facebook ผ่าน Account ของ Twitter ฯลฯ
ซึ่งในตัวอย่างนี้จะแนะนำการเขียนสคริปต์ทั้งแบบพื้นฐาน คือ นำชื่อผู้ใช้และรหัสผ่านใส่ไว้ในสคริปต์ เพื่อทำความเข้าใจหลักการใช้งานมอดูล Passport
โดยเริ่มจากติดตั้งมอดูล express, ejs, express, express-session, passport, passport-local
npm i cookie-parser
npm i ejs
npm i express
npm i express-session
npm i passpost
npm i passport-local
สคริปต์ views/login.ejs สร้างฟอร์มรับข้อมูล login ฟอร์ม login
<!DOCTYPE html> <html> <head> <title>:: Login ::</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="page-header"> <h1>:: Login ::</h1> <hr> </div> <div class="row"> <div class="col"> <form method="post" action="login"> <div class="form-group"> <label for="user">Username</label> <input type="text" class="form-control" name="username" placeholder="Username" required> </div> <div class="form-group"> <label for="pass">Password</label> <input type="text" class="form-control"name="password" placeholder="Password" required> </div> <button type="submit" class="btn btn-primary">Login</button> <button type="reset" class="btn btn-primary">Reset</button> </form> </div> </div> </div> <script src="./jquery.min.js"></script> <script src="./bootstrap/js/bootstrap.min.js"></script> </body> </html> สคริปต์ views/home.ejs หน้าหลักหลังจากผ่านการ login เข้ามาแล้ว
<!DOCTYPE html> <html> <head> <title>:: Home ::</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <h1>:: Home ::</h1> </div> <div class="row"> Login Ok.<br/><br/> Users -> <%=_id%> <%=fname%> <%=lname%> <br/><br/> </div> <div class="row"> <a href='./logout'>Logout</a> </div> </div> <script src="./jquery.min.js"></script> <script src="./bootstrap/js/bootstrap.min.js"></script> </body> </html> สคริปต์ index.js เป็นสคริปต์หลักของงานนี้
const express = require('express') const app = express() app.use(express.static(__dirname + '/public')) app.set('view engine', 'ejs') const passport = require('passport') const LocalStrategy = require('passport-local').Strategy const bodyParser = require('body-parser') const cookieParser = require('cookie-parser') app.use(bodyParser.urlencoded({ extended: false })) app.use(bodyParser.json()) app.use(cookieParser()) const session = require('express-session') app.use(session({ secret: 'I am Anakin.', resave: true, saveUninitialized: true })) app.use(passport.initialize()) app.use(passport.session()) passport.use(new LocalStrategy((username, password, done) => { if(username =="admin" && password=="1234") { user = { _id : 1, fname : "Anakin ", lname : "Skywalker" } console.log('Correct Password.') return done(null,user) } else { console.log('Incorrect password.') return done(null, false, { message: 'Incorrect password.' }) } })) passport.serializeUser((user, done) => { console.log('SerializeUser') done(null, user) }) passport.deserializeUser((user, done) => { console.log('DeserializeUser') done(null, user) }) app.get('/', (req, res) => { res.render('login') }) app.post('/login', passport.authenticate('local', { successRedirect: '/home', failureRedirect: '/' })) function isLoggedIn(req, res, next) { if (req.isAuthenticated()) { return next() } else { res.redirect('/') } } app.get('/home',isLoggedIn,(req,res) => { res.render('home',req.user) }) app.get('/logout',(req,res) => { req.logout() res.redirect('/') }) app.listen(3000, () => { console.log('Server Started on localhost:3000...') }) เราต้องเรียกใช้มอดูล passport เก็บไว้ในตัวแปร passport และเรียกใช้มอดูล passport-local เก็บไว้ในตัวแปร LocalStrategy สำหรับใช้ตรวจสอบผู้ใช้และรหัสผ่านแบบพื้นฐานได้
const passport = require('passport') const LocalStrategy = require('passport-local').Strategy เรียกใช้มอดูล express-session เก็บไว้ในตัวแปร session สำหรับเก็บข้อมูลที่เก็บหลังจากตรวจสอบผู้ใช้และรหัสผ่านเรียบร้อยแล้ว
const session = require('express-session') app.use(session({ secret: 'I am Anakin.', resave: true, saveUninitialized: true })) app.use(passport.initialize()) app.use(passport.session()) กำหนดให้มอดูล password ใช้งานการตรวจสอบแบบ Local โดยนำชื่อผู้ใช้ที่อยู่ในตัวแปร username และ รหัสผ่านในตัวแปร password นำมาตรวจสอบแบบง่าย ซึ่งหากผู้ใช้ป้อนมาไม่ถูกต้องก็แสดงข้อความไม่ถูกต้อง และหากตรวจสอบแล้วผู้ใช้ป้อนข้อมูลมาถูกต้อง ก็กำหนดข้อมูลที่จะเก็บไว้ใน Session เพื่อเรียกใช้งานภายหลังได้ โดยในตัวอย่างนี้จะเก็บข้อมูล _id,fname,lname เก็บไว้ในตัวแปร user
passport.use(new LocalStrategy((username, password, done) => { if(username =="admin" && password=="1234") { user = { _id : 1, fname : "Anakin ", lname : "Skywalker" } console.log('Correct Password.') return done(null,user) } else { console.log('Incorrect password.') return done(null, false, { message: 'Incorrect password.' }) } })) เป็นการกำหนดว่าจะนำข้อมูลอะไรไปเก็บไว้ใน Session หลังจากผ่าน Login มาเรียบร้อบแล้ว
passport.serializeUser((user, done) => { console.log('SerializeUser') done(null, user) }) เป็นการกำหนดว่าจะนำข้อมูลออะไรใน Session ออกมาใช้งาน ซึ่งจะใช้ในหน้าเว็บเพจต่างๆ ที่สมาชิกเข้าถึงได้
passport.deserializeUser((user, done) => { console.log('DeserializeUser') done(null, user) }) ที่กล่าวไว้ข้างต้นจะเป็นการกำหนดค่าสำหรับใช้งานมอดูล passport-local ซึ่งรันหน้าแรก / ก็จะแสดงฟอร์ม Login เพื่อรับ Username และ Password จากผู้ใช้ ซึ่งข้อมูลทั้งหมดก็จะส่งมายัง /login เพื่อทำการตรวจสอบข้อมูล หากข้อมูลถูกต้องก็จะส่งไปหน้า /home และหากข้อมูลไม่ถูกต้องก็ย้อนกลับไปหน้าฟอร์ม login
app.get('/', (req, res) => { res.render('login') }) app.post('/login', passport.authenticate('local', { successRedirect: '/home', failureRedirect: '/' })) ในระบบสมาชิกก็จะมีส่วนที่สมาชิกเข้าถึงได้หลายหน้า แต่ละหน้าก่อนจะเข้าไปใช้งานได้ต้องผ่านการตรวจสอบมาก่อนว่า ได้ผ่านการ Login มาแล้วหรือไม่ โดยเราจะสร้างฟังก์ชันชื่อ isLoggedIn()เอาไว้ตรวจสอบ โดย method ชื่อ isAuthenticated() เป็นตัวหลักในการตรวจสอบการ login ซึ่งหากผ่านการตรวจสอบแล้วก็ไปในขั้นตอนต่อไป แต่หากไม่ผ่านการตวจสอบก็จะกลับไปยังฟอร์มหน้า login
function isLoggedIn(req, res, next) { if (req.isAuthenticated()) { return next() } else { res.redirect('/') } } ไปหน้าหลักของสมาชิก แล้วแสดงข้อมูลสมาชิกออก user
app.get('/home',isLoggedIn,(req,res) => { res.render('home',req.user) }) หากต้องการออกจากระบบก็จะต้องทำการ logout() และกลับไปหน้า Login ต่อไป
app.get('/logout',(req,res) => { req.logout() res.redirect('/') }) สรุป
อย่างที่กล่าวไว้ข้างต้น บทความนี้แนะนำทำระบบ Authentication แบบพื้นฐานด้วยมอดูล Passport-local เพื่อที่จะทำให้เข้าใจหลักการตรวจสอบ Username และ Password อย่างง่ายของมอดูล Passport โดยเราจะใส่ Username และ Password เอาไว้ในสคริต์เลย
ซึ่งหากนำไปใช้งานจริงแนะนำว่าควรนำข้อมูล User เก็บไว้ในฐานข้อมูลจะทำให้ User จะใช้งานระบบได้มากกว่า 1 คนและเพื่อเพิ่มความปลอดภัยของระบบสมาชิกได้
และเราสามารถหาข้อมูลเพิ่มเติมของมอดูล passport ได้จาก https://www.npmjs.com/package/passport
Top comments (0)