passport를 이용한 회원가입, 로그인, 로그아웃 구현 방법

passport를 이용하면 쉽게 회원가입, 로그인, 로그아웃은 물론 github, facebook같은 SNS에서도 로그인 로직을 처리하는 것도 할 수 있다.

passport 환경구축

npm install passport passport-local express-session connect-flash --save-dev

passport를 이용하기 앞서 설치를 먼저 해주자. 또한 모듈을 사용하기 require를 해주자.

var passport = require('passport');
var LocalStrategy = require('passport-local').Strategy;
var session = require('express-session');
var flash = require('connect-flash');

app.js에서 session과 passport를 사용하겠다고 선언하자.

app.use(session({
  secret: 'key',
  resave: false,
  saveUninitialized: true
}));

app.use(passport.initialize());
app.use(passport.session());
app.use(flash());

passport 회원가입 처리

 

가장 먼저 회원가입하는 방법부터 알아보자. index.js에서 strategy를 설정하자.

passport.use('local-join', new LocalStrategy({
  usernameField: 'email',
  passwordField: 'pw',
  passReqToCallback: true
}, function (req, email, pw, done) {
  console.log('local-join');
}))

이렇게 하고 passport기반으로 router를 설정하자. 

router.post('/join', passport.authenticate('local-join', {
  successRedirect: '/main',
  failureRedirect: '/join',
  failureFlash: true
}));

index.js에서 미리 설정한 local-strategy 콜백을 완성시켜보자. 이렇게 완성하면 local-join에 대한 콜백함수로서 처리할 것이다.

passport.use('local-join', new LocalStrategy({
  usernameField: 'email',
  passwordField: 'pw',
  passReqToCallback: true
}, function (req, email, pw, done) {
  var sql = 'select * from test where email =?';
  var query = client.query(sql, [email], function (err, datas) {
    if (err) return done(err);
    if (datas.length) {
      console.log('existed user');
      return done(null, false, {
        message: 'your email is already used'
      });
    } else {
      var sql = 'insert into test(email, pw) values(?,?)';
      var query = client.query(sql, [email, pw], function (err, datas) {
        if (err) return done(err);
        return done(null, {
          'email': email,
          'id': datas.insertId
        })
      });
    }
  })
}))

또한 flash를 사용하여 한눈에 알아볼 수 있게 해보자.

router.get('/join', function (req, res, next) {
  var msg;
  var errMsg = req.flash('error');
  if (errMsg) {
    msg = errMsg;
  }
  res.render('join', {
    title: 'join',
    message: msg
  });
});

이렇게 하면 Failed to serialize user into session이라고 오류가 나오는데 이는 세션처리를 안해서 이런 오류가 나오는 것이다. 따라서 index.js에서 passport기반의 세션처리를 해보자.

passport.serializeUser(function (user, done) {
  console.log('passport session save: ', user.id);
  done(null, user.id);
});

passport.deserializeUser(function (id, done) {
  console.log('passport session get id: ', id);

  done(null, id);
});

여기까지 했으면 이제 웹페이지에 id값을 나타나게 해보자. 회원가입에 성공하면 main으로 redirect하는 router를 설정했다. 

router.get('/main', function (req, res, next) {
  var id = req.user;
  res.render('index', {
    title: 'index',
    id
  });
});

passport 로그인 처리

passport 회원가입과 마찬가지로 똑같이 하면 된다. 먼저 router 설정을 '/'로 설정하자.

router.get('/', function (req, res, next) {
  var msg;
  var errMsg = req.flash('error');
  if (errMsg) {
    msg = errMsg;
  }
  res.render('login', {
    title: 'login',
    message: msg
  });
});

router.post('/login', passport.authenticate('local-login', {
  successRedirect: '/main',
  failureRedirect: '/',
  failureFlash: true
}));

이렇게 설정하면 local-login에 해당하는 local-strategy 콜백 함수에서 처리할 것이다. 로그인은 비교만 하면 되므로 간단한 로직으로 처리가 가능하다.

passport.use('local-login', new LocalStrategy({
  usernameField: 'email',
  passwordField: 'pw',
  passReqToCallback: true
}, function (req, email, pw, done) {
  console.log(req);
  var sql = 'select * from test where email =? and pw=?';
  client.query(sql, [email, pw], function (err, datas) {
    if (err) return done(err);
    if (datas.length) {
      return done(null, {
        id: email
      });
    } else {
      return done(null, false, {
        message: '아이디 혹은 비밀번호가 틀립니다.'
      })
    }
  })
}));

passport 로그아웃 처리

회원가입과 로그인에 비해 너무 간단하다. router에서 로그아웃할 주소를 입력하고 req.logout()이라고만 하고 redirect할 주소만 입력하면 된다.

router.get('/logout', function (req, res) {
  req.logout();
  res.redirect('/');
});