Session방식 로그인 기능 구현

우선, 3개의 라이브러리가 필요하다.

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());

이렇게 6줄을 작성해준다. 이러면 셋팅이 끝난다. app.use(미들웨어) 이렇게 쓰며, 

웹서버는 요청 - 응답을 해주는데 미들웨어는 이런 요청과 응답 사이에 실행되는 코드를 뜻한다.

이제, 로그인페이지를 만들어보자.

1. 로그인 페이지 제작 & 라우팅

views폴더에 login.ejs라는 파일을 만들어준다.

<form class="p-5" action="/login" method="POST">//이폼을 전송하면 /login경로로 POST요청
        <div class="mb-3">
          <label class="form-label">아이디</label>
          <input type="text" class="form-control"  placeholder="아이디" name="id">
        </div>
        <div class="mb-3">
          <label class="form-label">비밀번호</label>
          <input type="text" class="form-control"  placeholder="비밀번호" name="pw">
        </div>
        <button type="submit" class="btn btn-primary">로그인하기</button>
</form>

 

그러곤, action에 /login을 적어 경로를 지정하고 method에 POST를 적어서 POST요청을 해준다. 

input태그 각각엔 name을 id pw로 적어준다.

그리고, server.js에 app.get 요청해서 login.ejs파일을 띄어주고, post요청을 해서 /login화면에서 post요청되면 어떻게 처리할지 작성하면 된다.

app.get('/login', function(요청, 응답){
    응답.render('login.ejs')
})
app.post('/login', function(요청, 응답){
    //아이디비번맞으면 로그인 성공페이지로 보내줘야함
    
})

여기선 mongoDB에 아이디 비밀번호를 미리 작성해놓고, form에 적은 값과 같다면 로그인성공 페이지로 이동하게끔 만들어보자. todoapp폴더에 login이라는 collection을 만들어 id와 pw를 test로 집어넣었다.

2. 로그인을 하면 아이디 비번을 검사한다.

app.post('/login', passport.authenticate('local', { //local방식으로 회원인지 인증해주세요
    failureRedirect : '/fail' //세팅을 하는 것 로그인을 실패하면 /fail로 이동하게함
}), function(요청, 응답){
    //passport는 로그인기능 쉽게 구현하게 도와준다.
    응답.redirect('/');//성공하면 홈으로 가게 해주세용
})
//아이디 비번 인증하는 세부코드작성 LocalStrategy인증방법 
//-->app.post에 passport저거때메 실행되는거라 로그인할 때만 딱 실행됨
passport.use(new LocalStrategy({
    usernameField: 'id', //form태그의 id라는 name
    passwordField: 'pw', //form태그의 pw라는 name을 각각 적어주는 공간
    session: true, //로그인 후 session정보를 저장할건가? 해야 다시 로그인안하니까 하는게 좋지
    passReqToCallback: false, 
    //true로 하면 밑에 function에 req라는 파라미터를 적어줘서 아이디/비번말고도 다른정보들을 담을 수 있음
  }, function (입력한아이디, 입력한비번, done) { //여기부터 검증하는 부분
    //console.log(입력한아이디, 입력한비번); 사용자가 입력한 id랑 pw
    db.collection('login').findOne({ id: 입력한아이디 }, function (에러, 결과) { 
    //DB에 입력한 아이디 있는지 찾고
      if (에러) return done(에러) //그저 에러처리 문법
  
      if (!결과) return done(null, false, { message: '존재하지않는 아이디요' })
      if (입력한비번 == 결과.pw) { 
      //결과가 존재한다는게 id가 있다는 것을 의미 따라서 비번이 입력한 결과오브젝트.pw도 확인
        return done(null, 결과) 
//여기서 done이 뭐냐면 라이브러리 문법인데, 
//done(서버에러(DB연결불가 등등), 성공시 사용자 DB데이터(아이디/비번 안맞으면 false),에러메시지)
      } else {
        return done(null, false, { message: '비번틀렸어요' })
      }
    })
  }));

위처럼 적어준다. 복붙해서 상황에 맞게 중간중간 코드를 바꿔주면 편하다. 위에서 단점은 보안이 쓰레기라고 한다.

비밀번호를 나중에 암호화 해줘야한다.

3. 아이디/비번 맞으면 세션을 하나 만들어줘서 저장을 해줘야한다.

즉, 로그인성공 -> 세션정보를 만들고 -> 마이페이지(회원이 필요한 페이지) 방문시 세션검사 이런 식이다.

//return done(null, 결과)상단에 성공시 결과가 하단의 user로 들어감 
passport.serializeUser(function (user, done) { 
//세션을 저장시키는 코드 (로그인 성공시 발동)
    done(null, user.id) //user.id를 이용해 세션을 저장시킴
  });
  
passport.deserializeUser(function (아이디, done) { 
//얘는 이 세션 데이터를 가진 사람을 DB에서 찾아주세요임 (마이페이지 접속시 발동)
    done(null, {})
});

이제 이렇게 세션에 저장하고 세션의 id정보를 쿠키로 보낸다. 쿠키는 개발자도구의 Application에서 확인가능하다.

 

마지막으로, 로그인 유저만 접속할 수 있는 페이지를 만들어보자.

mypage라는 ejs파일을 만들고, server.js에

app.get('/mypage', 로그인했니, function(요청, 응답){
    응답.render('mypage.ejs');
});
function 로그인했니(요청, 응답, next) { //미들웨어 만드는 법
    if (요청.user) { //요청user은 로그인 후 세션이 있으면 항상 존재함
        next()
    } else {
        응답.send('로그인안하셨습니다!')
    }
};

위처럼 로그인했니?라는 함수를 만들어서 app.get의 두번째 파라미터에 함수를 적어준다. 

만약, 가입을 만드려면 회원가입 폼을 DB에 전송해 저장해주면 된다. (중복검사도 하면 좋을듯)

passport.deserializeUser(function (아이디, done) { 
//얘는 이 세션 데이터를 가진 사람을 DB에서 찾아주세요임 (마이페이지 접속시 발동)
    //디비에서 위에있는 user.id로 유저를 찾은 뒤, 유저정보를
    db.collection('login').findOne({id: 아이디}, function(에러, 결과){// 아이디랑 위의 user.id랑 같음
        done(null, /*요기에 넣음*/ 결과 ) 
        //유저의 DB이름같은걸 마이페이지에 출력해주려고 함 (개인정보를 DB에서 찾는역할)
    })
});

그리고, deserializeUser에 위처럼 작성해서 마이페이지에 들어가면 세션에 저장된 아이디를 바탕으로 결과를 찾아서 출력할 수 있게끔 해준다. 그러면, 사용자의 정보가 요청.user에 저장된다.

app.get('/mypage', 로그인했니, function(요청, 응답){
	//요청.user 정보저장됨
    	응답.render('mypage.ejs',{사용자 : 요청.user });
})

위 처럼, mypage에 사용자라는 이름으로 요청.user을 보내주고,

<h4><%= 사용자.id %>님 안녕하세요</h4>

이런 식으로 사용자의 아이디를 띄워줄 수 있다.