Node.js + MongoDB 로그인 성공시 세션만들어주기(passport.serializeUser)

전글

https://daehyuntsory.tistory.com/81

Node.js + MongoDB 로그인페이지 아디 비번확인(passport passport-local express-session[lib])

 

로그인을 시키려면.. 아이디 비번을 DB와 검사하고 그게 맞으면 세션을 하나 만들어주면 되겠군요. 

진행하도록 합시다. 

 

개발4. 아이디/비번 DB와 맞는지 비교 

하지만 코드는 다행히 저번시간에 작성을 끝냈기 때문에 작성할게 없습니다. 

(server.js)

// 					밑의 코드에서 false반환시 /fail로 요청을 보내게된다.
app.post('/login', passport.authenticate('local', {failureRedirect : '/fail'}), function(요청, 응답){
  응답.redirect('/')
});

passport.use(new LocalStrategy({
  usernameField: 'id',
  passwordField: 'pw',
  session: true,
  passReqToCallback: false,
}, function (입력한아이디, 입력한비번, done) {
  //console.log(입력한아이디, 입력한비번);
  db.collection('login').findOne({ id: 입력한아이디 }, function (에러, 결과) {
    if (에러) return done(에러) // DB자체 에러

    if (!결과) return done(null, false, { message: '존재하지않는 아이디요' })
    // 아이디로 검색하고 결과가 없을때 메시지
    
    if (입력한비번 == 결과.pw) {
      return done(null, 결과)
      // 비밀번호 일치하면 결과를 반환
      
    } else {
      return done(null, false, { message: '비번틀렸어요' })
    }// 비밀번호가 틀리다면  비번이 틀리다고 메시지 반환
  })
  // return done중간에 false가 들어가게 되면 로그인 실패했다고 전달할수있다
  // 즉 false가 되면 fail페이지로 가게된다 
}));

여기 function(){} 안에서 아이디/비번을 DB데이터와 비교하시면 됩니다. 

그럼 어떻게 코드를 짜야할까요.

1. DB에서 {id : 입력한아이디} 인 문서를 찾은 다음에

2. 그게 있으면 그 문서에 있는 pw 값과 입력한 비번을 비교하면 되지 않을까요?

3. 성공하면 찾은 유저를 출력해주든가 그러시면 되겠군요. 

 

그래서 1, 2, 3 대로 위에 코드를 다 짜놓았습니다. 

그냥 이렇게 냅두시면 됩니다. 

그리고 아이디/비번 검사가 성공하면 return done(null, 결과) 를 실행해주어야합니다. 

 

 

하지만 문제점이 하나 있습니다.

지금 if ( 입력한비번 == 결과.pw ) 라는 부분에서 사용자가 입력한 비밀번호와 DB의 pw 항목을 같은지 비교하고 있는데

- 애초에 DB에 pw를 저장할 때 암호화해서 저장하는 것이 좋으며

- 사용자가 입력한 비번을 암호화해준 뒤에 이게 결과.pw와 같은지 비교하는게 조금 더 보안에 신경쓴 방법입니다. 

하지만 보안보안 암호화암호화 거리면 강의가 너무나 복잡해져서 이해도가 떨어질 수 있기 때문에

나중에 구글에 좋은 비번저장 예제를 찾아서 한번 그대로 적용해보시길 바랍니다. 

 

개발5. 세션 만들고 세션아이디 발급해서 쿠키로 보내주기 

아이디/비번을 DB데이터와 비교해서 이게 맞다면 어떻게 해야합니까.

세션 방식을 적용한다고 했으니 세션데이터를 하나 만들어주면 되겠죠? (이건 라이브러리가 알아서 합니다)

그리고 세션데이터에 포함된 세션아이디를 발급해서 유저에게 보내면 됩니다. 

실은 쿠키로 만들어서 보내주시면 됩니다. 

세션데이터를 만들고 세션아이디를 만들어 보내주는 것도 라이브러리 도움을 받으면 딱 3줄이면 됩니다. 

server.js 하단에 따라칩니다. 

// 로그인 성공시 세션에 저장( 쿠키 )
// 위에서 로그인 성공하면 결과가 알아서 들어오게 된다.
// 밑 매개변수 user의 이름으로 세션에 저장되게 된다.
passport.serializeUser(function (user, done) {
  done(null, user.id)
});

// 이 세션데이터를 가진사람을 db에서 찾아주세요(마이페이지 같은데서 발동)
passport.deserializeUser(function (아이디, done) {
  done(null, {})
});

serializeUser 라는 함수가 바로 그 역할을 합니다. 

- 유저의 id 데이터를 바탕으로 세션데이터를 만들어주고

- 그 세션데이터의 아이디를 쿠키로 만들어서 사용자의 브라우저로 보내줍니다. 

 

deserializeUser 라는 함수는 다음 글에서 알아보도록 합시다. 

얘는 이제 로그인 된 유저가 마이페이지 등을 접속했을 때 실행되는 함수입니다. 

 

 

그럼 테스트를 해보도록 합시다.

 

지금까지 이런 스텝으로 개발했습니다. 

개발1. 로그인 페이지 제작 / 라우팅

개발2. 로그인 요청시 아이디/비번 검증 미들웨어 실행시키기 

개발3. 아이디/비번 검증하는 세부 코드 작성

개발4. 아이디/비번을 DB데이터와 비교

개발5. 맞으면 세션아이디 만들어서 쿠키로 보내기

 

그럼 어떤 사람이 DB에 저장된 아이디/ 비번 한쌍으로 로그인시  

쿠키가 만들어져서 고객의 브라우저로 전송되어야합니다. 

그럼 로그인 페이지에서 로그인을 시도해보고 

쿠키가 진짜 서버에서 들어오는지 확인해보도록 합시다. 

 

 

▼ 쿠키는 여기서 확인할 수 있습니다.

여러분 사이트 localhost:8080 미리보기 들어가신 다음 우클릭 - 검사 - Application 탭 - 좌측 Cookies 에서 확인가능합니다. 

 

 

▼ 로그인 성공시 session 어쩌구라고 적힌 쿠키가 새로 하나 생성되면 성공입니다. 

다음 글에선 유저가 마이페이지 등으로 접속을 요청할 때 

세션아이디가 진짜 있는지 쿠키를 검사해서 접속을 허가하거나 허가하지 말도록 합시다. 

 

- 세션을 없애고싶다면 쿠키를 오른쪽 마우스하여 삭제하거나 서버를 껏다키면 됩니다.

 

다음 글

https://daehyuntsory.tistory.com/83

Node.js + MongoDB 로그인확인후 마이페이지(passport.deserializeUser)