08. 쿠키를 이용한 로그인기능 만들기 / cookie-parser

cookie와 cookie-parser에 관한 설명은 아래글을 참고하자.

 

https://hancoco.tistory.com/126

[220314] 미들웨어 body-parser와 cookie-parser

 

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%BF%A0%ED%82%A4Cookie-%EB%8B%A4%EB%A3%A8%EA%B8%B0

[JS] 🍪 자바스크립트로 쿠키(Cookie) 다루기

 

https://inpa.tistory.com/entry/EXPRESS-%F0%9F%93%9A-bodyParser-cookieParser-%EB%AF%B8%EB%93%A4%EC%9B%A8%EC%96%B4#%EC%BF%A0%ED%82%A4_%EC%9D%BD%EA%B8%B0

[EXPRESS] 📚 bodyParser / cookieParser 미들웨어 💯 사용법 정리

 

---

1. 로그인 폼을 만든다.

<h1>
	<a href="/">Logo</a>
</h1>

<!-- 로그인 폼 자리 -->
<form method="post" action="/login">
    id: <input type="text" name="userid">
    pw: <input type="text" name="userpw">
    <input type="submit" value="login">
</form>

<ul>
    <li>
      <!-- /list로 이동한다 -->
        <a href="/list">게시판 가기</a>
    </li>
</ul>

 

 

---

2. 로그인을 했을때 쿠키가 생기도록 만들자.

우선 로그인을 했을때 쿠키가 있는지 확인을 해보면 없는걸 알 수 있다.

const cookieParser = require('cookie-parser');
app.use(cookieParser())

let user = {
  userid: 'aaa', userpw: '111', username: "jjj"
}

app.post('/login', (req, res) => {
  //전달받은 값을 변수에 각각 넣는다
  const userid = req.body.userid;
  const userpw = req.body.userpw;

  //로그인이 성공했을 경우
  if(userid==user.userid && userpw==user.userpw){
    //쿠키값을 생성한다.
    res.cookie('login',`${userid}`,{
      path:'/',
      httpOnly:true,
      secure:true,
      domain:'localhost'
    })
    //login 성공 페이지로 이동한다
    res.render('user/login')
  }else{
    //로그인이 실패했을경우 홈으로 돌아간다
    res.redirect('/')
  }
})

로그인을 성공해서 쿠키값이 성공적으로 생겼다.

 

---

3. 로그아웃할때 쿠키를 삭제하고 홈으로 돌아가는 기능을 만들자

//홈 url의 요청에 index.html을 넘겨주는 app.get
app.get('/', (req, res) => {
  //쿠키 읽기
  if(req.cookies.login!=undefined){
    //쿠키가 있으면 로그인페이지로.
    console.log(req.cookies)
    res.render('user/login')
  }else{
    //쿠키가 없으면 메인으로.
    res.render('index')
  }
})

app.get('/logout', (req, res) => {
  console.log(req.cookies)
  const userid = req.cookies.login
  //쿠키 삭제하기
  res.clearCookie(`login`,`${userid}`,{
    httpOnly:true,
    secure:true
  })
  res.render('index')
})

성공적으로 삭제 된다

 

 

 

 

---

쿠키 암호화 기능 만들기

로그인을 할때 암호화 기능을 넣는다.

app.post('/login', (req, res) => {
  //전달받은 값을 변수에 각각 넣는다
  const userid = req.body.userid;
  const userpw = req.body.userpw;

  //로그인이 성공했을 경우
  if(userid==user.userid && userpw==user.userpw){
    //쿠키값을 생성한다.
    res.cookie('login',`${userid}`,{
      path:'/',
      httpOnly:true,
      secure:true,
      domain:'localhost',
      signed:true //암호화
    })
    res.render('user/login')
  }else{
    //로그인이 실패했을경우
    res.redirect('/')
  }
})

 

 

 

 

로그인을 한 후 홈에서 암호화된 정보를 갖고있는지 확인한다.

//홈 url의 요청에 index.html을 넘겨주는 app.get
app.get('/', (req, res) => {

  //암호화된 쿠키 내용을 갖고있는지 확인
  if(req.signedCookies.login){
    console.log("암호화된 쿠키", req.signedCookies.login)
  }

  //쿠키 읽기
  if(req.cookies.login!=undefined){
    //쿠키가 있으면 로그인페이지로.
    console.log(req.cookies.login)
    res.render('user/login')
  }else{
    //쿠키가 없으면 메인으로.
    res.render('index')
  }
})

 

 

 

 

이제 기존에 있던 로그인 기능이랑 합쳐넣자.

로그인을 정상적으로 이루어놨으므로 암호화가 되었다는 소리니까, 기존에 있던 로그인 확인 기능을 지웠다.

//홈 url의 요청에 index.html을 넘겨주는 app.get
app.get('/', (req, res) => {

  //쿠키 읽기
  if (req.signedCookies.login) {
    console.log("암호화된 쿠키", req.signedCookies.login)
      res.render('user/login')
  } else {
    //쿠키가 없으면 메인으로.
    res.render('index')
  }
})