Node.js + Express4 + Passport + pug로 로그인 인증 화면 만들기 (오류 표시 있음)
소개
웹 어플리케이션을 만들려고 하면 뭔가 필요하게 되는 로그인 인증 화면.
이번에는 Express4, Passport, pug를 사용하여 오류 메시지 (플래시 메시지)가 표시되는 것을 쓸 수 있었기 때문에 메모.
일부러 데이터베이스를 사용하는 것이 귀찮았기 때문에 일시적인 배열에 유저를 보관 유지하고 있습니다.
ScreenName에 'user1', Password에 'pass1'로 로그인할 수 있습니다.
동작 확인에는 Node.js v8.10.0을 사용했습니다.
이 코드는 MIT 라이선스의 기초로 변경·재배포할 수 있는 것으로 합니다.
필수 패키지
코드
server.jsconst path = require('path');
const express = require('express');
const session = require('express-session');
const flash = require('connect-flash');
const passport = require('passport');
const bodyParser = require('body-parser');
const { Strategy : LocalStrategy } = require('passport-local');
const app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(session({ name: 'test-sid', secret: 'hoge', resave: false, saveUninitialized: true }));
app.use(flash());
app.use(passport.initialize());
app.use(passport.session());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// db
class Users {
constructor() {
this.store = [];
}
create(id, screenName, password) {
this.store.push({ id, screenName, password });
}
find(key, value) {
return this.store.find(user => user[key] == value);
}
}
const users = new Users();
users.create('u1', 'user1', 'pass1');
// strategy
passport.use(new LocalStrategy({ usernameField: 'screenName' }, (screenName, password, done) => {
const user = users.find('screenName', screenName);
if (user == null) {
return done(null, false, { message: 'invalid screenName' });
}
if (user.password != password) {
return done(null, false, { message: 'invalid password' });
}
return done(null, user);
}));
// passport
passport.serializeUser((user, done) => {
done(null, user.id);
});
passport.deserializeUser((id, done) => {
done(null, users.find('id', id));
});
// routings
app.get('/', (req, res) => {
if (!req.user) {
res.render('login', { error: req.flash('error') });
}
else {
res.render('home', { user: req.user });
}
});
app.post('/', passport.authenticate('local', {
successRedirect: '/', failureRedirect: '/', failureFlash: true, badRequestMessage: 'empty credentials' }));
app.listen(8080, () => {
console.log('listening on port: 8080');
});
views/login.pugif error != ''
p Error: #{error}
h1 Login
form(method='post' action='/')
div
label(for='screen-name-input') ScreenName:
input(type='text' name='screenName' id='screen-name-input')
div
label(for='password-input') Password:
input(type='text' name='password' id='password-input')
button Login
views/home.pugh1 home
p hello, #{user.screenName}
표시
결론
새로운 ES, 여러분도 자꾸자꾸 씁시다!
Reference
이 문제에 관하여(Node.js + Express4 + Passport + pug로 로그인 인증 화면 만들기 (오류 표시 있음)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/_mrhc/items/b8fee3df4e4e5b067081
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
const path = require('path');
const express = require('express');
const session = require('express-session');
const flash = require('connect-flash');
const passport = require('passport');
const bodyParser = require('body-parser');
const { Strategy : LocalStrategy } = require('passport-local');
const app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(session({ name: 'test-sid', secret: 'hoge', resave: false, saveUninitialized: true }));
app.use(flash());
app.use(passport.initialize());
app.use(passport.session());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// db
class Users {
constructor() {
this.store = [];
}
create(id, screenName, password) {
this.store.push({ id, screenName, password });
}
find(key, value) {
return this.store.find(user => user[key] == value);
}
}
const users = new Users();
users.create('u1', 'user1', 'pass1');
// strategy
passport.use(new LocalStrategy({ usernameField: 'screenName' }, (screenName, password, done) => {
const user = users.find('screenName', screenName);
if (user == null) {
return done(null, false, { message: 'invalid screenName' });
}
if (user.password != password) {
return done(null, false, { message: 'invalid password' });
}
return done(null, user);
}));
// passport
passport.serializeUser((user, done) => {
done(null, user.id);
});
passport.deserializeUser((id, done) => {
done(null, users.find('id', id));
});
// routings
app.get('/', (req, res) => {
if (!req.user) {
res.render('login', { error: req.flash('error') });
}
else {
res.render('home', { user: req.user });
}
});
app.post('/', passport.authenticate('local', {
successRedirect: '/', failureRedirect: '/', failureFlash: true, badRequestMessage: 'empty credentials' }));
app.listen(8080, () => {
console.log('listening on port: 8080');
});
if error != ''
p Error: #{error}
h1 Login
form(method='post' action='/')
div
label(for='screen-name-input') ScreenName:
input(type='text' name='screenName' id='screen-name-input')
div
label(for='password-input') Password:
input(type='text' name='password' id='password-input')
button Login
h1 home
p hello, #{user.screenName}
결론
새로운 ES, 여러분도 자꾸자꾸 씁시다!
Reference
이 문제에 관하여(Node.js + Express4 + Passport + pug로 로그인 인증 화면 만들기 (오류 표시 있음)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/_mrhc/items/b8fee3df4e4e5b067081
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Node.js + Express4 + Passport + pug로 로그인 인증 화면 만들기 (오류 표시 있음)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/_mrhc/items/b8fee3df4e4e5b067081텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)