iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 20
0
自我挑戰組

如何成為工程師? (從工地到前端工程師)系列 第 20

[Day 20] 用Passport JS 認證 Part II

  • 分享至 

  • xImage
  •  

接下來我們要用一些別的套件來強化我們的認證. 我會交如何使用 connect-flash, express-validator, express-seession

我先稍微介紹每一個套件

connect-flash: 用來顯示錯誤或成功訊息.
express-validator: 用來驗證使用者的input
express-seession: 用來create session

教學

  1. 在我們app.js , 我們戴入以上的library
var session = require('express-session');
var flash = require('connect-flash');
var expressValidator = require('express-validator');

// 先設定好session, 如果不懂可以看官方的教學
app.use(session({
    secret: 'secret',
    saveUninitialized: true,
    resave: true
}));

// expressValidator設定好格式如何顯示.

app.use(expressValidator({
  errorFormatter: function(param, msg, value) {
      var namespace = param.split('.')
      , root    = namespace.shift()
      , formParam = root;
    while(namespace.length) {
      formParam += '[' + namespace.shift() + ']';
    }
    return {
      param : formParam,
      msg   : msg,
      value : value
    };
  }
}));
// Connect Flash
app.use(flash());
// setup local variables so we can use it anywhere in our app
app.use(function (req, res, next) {
  res.locals.success_msg = req.flash('success_msg');
  res.locals.error_msg = req.flash('error_msg');
  res.locals.error = req.flash('error');
  res.locals.user = req.user || null;
  next();
});
  1. 把flash 跟 認證加入我們的routes/user.js
// REVISED with validation feature. Post Sign Up
router.post('/signup', function(req, res, next) {
  // Parse Info
  var username = req.body.username
  var password = req.body.password
  // Validation
  req.checkBody('username', 'Username is required').notEmpty()
  req.checkBody('password', 'Password is required').notEmpty()
  var errors = req.validationErrors();
  if(errors) {
    res.render('signup', {errors: errors})
  } else {
  //Create User
  ...
  }
  router.get('/logout', function(req, res, next) {
  ...
  req.flash('success_msg', 'You are logged out')
  ...
})
});
  1. 最後把flash 訊息放進我們的signin, signup view
//signin.ejs
<% if(success_msg) { %>
<div class="success">
  <%= success_msg %>
</div>
<% } %>
//signup.ejs
<% if(errors){ %>
  <% errors.forEach(function(error){ %>
  <div class="error"><%= error.msg %></div>
  <% }) %>
<% } %>

參考文件


上一篇
[Day 19] Node JS 如何用Passport.js 進行認證? let me show you!
下一篇
[Day 21] 我最常用的VSCODE 套件
系列文
如何成為工程師? (從工地到前端工程師)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言