강의를 듣고 작성해본 로그인/로그아웃 구현기
보고 따라치지 않았다! 그럼, 시작!
사용하는 것
node.js, mongoDB, bcrypt, babel
먼저, login을 할 때 post 해줄 함수를 만든다.
const postLogin = (req,res)=>{
...
}함수명은 어떻게 지어도 상관없지만 헷갈리는 걸 방지하기 위해 post라고 붙여주었다.
login을 할 때, 들어오는 데이터는 사용자의 아이디(혹은 이메일)와 비밀번호이다. 두 개를 가지고 DB에 있는 user의 데이터에서 아이디가 존재하는지부터 확인해보아야 한다.
const postLogin = (req,res)=>{
const {body:{userID, userPassword}}=req;
const user = User.findOne({userID})
}
req.body로부터 들어오는 데이터를 받고, userID가 MongoDB의 user 데이터 안에 존재하는지 확인한다. findOne은 데이터가 존재하면 제일 처음 일치하는 데이터를 가져온다.
findById를 해도 괜찮지만, userID를 유니크로 설정해놓아서 한 사람밖에 없으니 불필요하다.
const postLogin = (req,res)=>{
const {body:{userID, userPassword}}=req;
const user = User.findOne({userID})
if(!user){
return res.status(400).send({errorMsg:"nothing found."})
}
}반환하는 값이 false이면 해당 user가 없다는 말이니 회원가입 창으로 돌려보내든 error 메세지를 주든 자유이다. return 값을 주어 코드가 종료되게 하는 것은 필수! return을 하지 않으면 다음 코드를 실행하니 주의하자.
status를 넣는 이유
예를 들어, 아이디를 잘못 입력하여 로그인이 실패했을 때, 브라우저에서는 로그인이 실패했는지 알 수가 없다. status를 넣어 리퀘스트 실패라는 것을 브라우저에 전달하면, 아이디와 패스워드를 저장하겠나요? 하는 메세지 창이 뜨지 않는다.
간혹...설정을 안 해둔 사이트를 보긴 한다...
아이디가 존재한다는 걸 알았다면, 다음은 패스워드가 맞는지에 대한 부분이다. 기본적으로 패스워드는 DB에 그대로 저장하지 않고 해시를 하고 넣는다. 보안 이슈가 있기 때문인데, 나오는 값은 똑같기 때문에 동일한 패스워드를 넣으면 괜찮다.
const postLogin = (req,res)=>{
const {body:{userID, userPassword}}=req;
const user = User.findOne({userID})
if(!user){
return res.status(400).send({errorMsg:"nothing found."})
}
const passwordOK = bcrypt.compare(userPassword, user.password)
}패스워드를 해시할 때 bcrypt를 사용했었다.
현재 들어오는 패스워드와 기존 user의 패스워드가 일치하는 지 확인하기 위해서 bcrypt.compare을 사용하자.
(현재 패스워드, 기존 패스워드)를 입력하면 된다. 기존 패스워드는 해시된 상태이니 단순하게 if를 사용해 둘이 일치하는지 검사하면 false만 반환할 것이다.
bcrypt.compare은 현재 패스워드를 해시해서 검사한다.
둘이 일치하지 않으면 비밀번호를 잘못 입력했습니다 등 에러 메세지를 보내는 것이 좋다.
(이미 user의 아이디를 찾을 때 했으니 생략하겠다.)
const postLogin = (req,res)=>{
const {body:{userID, userPassword}}=req;
const user = User.findOne({userID})
if(!user){
return res.status(400).send({errorMsg:"nothing found."})
}
const passwordOK = bcrypt.compare(userPassword, user.password)
...
req.session.loggedIn=true;
req.session.user=user;
return res.redirect("/")
}로그인에 성공했다면 user의 데이터를 쿠키 혹은 세션에 담는다.
나는 세션에 담는 걸로 배웠으니 해당 방법을 택하겠다.
loggedIn을 통해 로그인 상태라는 것과 user의 데이터를 세션에 담고 홈페이지로 redirect 시켜주면 로그인 구현 끝이다.
