[Node.js] 로그인 기능 추가하기(Session 방식)

 

세션 방식의 로그인 기능을 추가해보자.

---

라이브러리 설치

npm install passport passport-local express-session

터미널에서 passport, passport-local express-session 이 세가지 라이브러리를 설치한다.

 

const passport = require('passport');
const LocalStrategy=require('passport-local').Strategy;
const session = require('express-session');

app.use(session({secret : '비밀코드',resave : true, saveUninitialized: false}));
app.use(passport.initialize());
app.use(passport.session());

라이브러리를 사용하기 위해 서버파일에 위 코드를 추가한다.

 

---

login.ejs파일 만들기

로그인 화면을 만들어 보자.

<form action="/login" method="POST">
            <div class="form-group">
                <label>아이디</label>
                <input type="text" class="form-control" name="id">
            </div>
            <div class="form-group">
                <label>비밀번호</label>
                <input type="password" class="form-control" name="pw">
            </div>

            <button type="submit" class="btn btn-outline-primary">저장하기</button>
        </form>

login.ejs의 일부분이다.

아이디와 비밀번호를 입력할 input태그가 각각 하나씩 있고, 전송버튼이 있다.

input태그에는 name을 꼭 잘 설정해 두자. 여기서는 id와 pw로 했다.

 

폼 액션 경로는 /login으로 했고, 메소드는 post로 설정한다.

 

 

app.get('/login',function(req,res){
    res.render('login.ejs');
})

다시 서버로 돌아와서,

/login을 get요청하면 로그인페이지를 보여주도록 렌더함수를 썼다.

 

---

 

app.post('/login',passport.authenticate('local',{
    failureRedirect:'/fail'//로그인 실패시 /fail로 이동
}) ,function(req,res){
    res.redirect('/')
})

/login경로로 post요청이 왔을 때 로그인 처리를 하자.

지금까지는 post처리를 app.post(경로,function(req,res){})처럼 두개의 인자만 썼는데,

중간에 인자 하나를 더 추가하면 요청과 응답 사이에 기능을 추가할 수 있다.

 

여기서는 두번째 인자로 passport.authenticate('local',{ failureRedirect: '/fail'}) 을 넣어주었는데

passport라이브러리를 이용하여 local방식으로 아이디와 비밀번호를 인증하고, 실패시에는 /fail로 이동하도록 하는것이다.

아이디와 비밀번호를 인증하는 방법은 따로 작성해야하는데,

 

//아래는 로그인할 때 실행되는 것
passport.use(new LocalStrategy({
    usernameField: 'id', //폼에 입력했던 name:id
    passwordField: 'pw',
    session: true,
    passReqToCallback: false,
  }, function (입력한아이디, 입력한비번, done) {
    //console.log(입력한아이디, 입력한비번);
    db.collection('login').findOne({ id: 입력한아이디 }, function (에러, 결과) {
      if (에러) return done(에러)
        //done(서버에러,성공시사용자DB데이터,에러메세지)
      if (!결과) return done(null, false, { message: '존재하지않는 아이디입니다.' })
      if (입력한비번 == 결과.pw) {//아이디가 존재하는 경우 비밀번호를 비교
        return done(null, 결과)
      } else {
        return done(null, false, { message: '비밀번호가 틀렸습니다.' })
      }
    })
  }));

이렇게 작성하면 된다.

db에서 입력한 아이디로 계정정보를 찾아서,

결과가 존재하지 않으면 에러메세지 "존재하지않는 아이디입니다."를 내보내고,

결과가 있는경우, 입력한 비밀번호와 db에 저장돼있는 비밀번호가 일치하는 경우 사용자 데이터를 보내고, 

비밀번호가 일치하지 않으면 비밀번호가 틀렸다는 메세지를 보낸다.

 

로그인을 정상적으로 했다면 이제 세션을 생성해서 줘야하는데,

//세션만들기
  passport.serializeUser(function(user,done){
    done(null,user.id)
  });

  //이 세션데이터를 가진 사람을 DB에서 찾음
  passport.deserializeUser(function(아이디,done){
    done(null,{})
  });

세션을 만들어서 쿠키로 보내주는 passport라이브러리의 serializeUser()함수를 사용하면 된다.

 

---

정상적으로 모두 작성했다면,

로그인페이지에서 db에 있는 아이디와 비밀번호를 입력했을 때 

홈으로 이동하고(성공시 리다이렉션을 "/"경로로 줬으니까), 브라우저의 쿠키에 로그인세션 정보가 담겨있는것을 볼 수 있다.