JWT 로그인 ( +nodemon )

nodemon

• 설치방법
  npm install nodemon

• 사용용도
  코드를 수정하면 서버를 자동으로 restart 해준다.
  하지만 nunjucks 템플릿 엔진에서는 살짝 에러가 있어서 npm install chokidar로 chokidar를 설치해주어야 한다.

chokidar를 설치하고 nunjucks 셋팅안에 watch:true를 써야지 HTML을 수정했을때도 잘실행됩니다.

package.json도 이렇게 변경해주고 nodemon server로 서버를 열어주면 됩니다.

HTML

로그인을 기능을 구현하기 위해 간단하게 로그인 HTML 만들고 시작합니다.

테스트니까 간단하게 작성하고 마무리.

JWT 토큰 생성

로그인을 할때 JWT 토큰을 생성해서 쿠키로 보내줄 건데 코드가 길어지고 복잡해보일수도 있어서 js파일을 따로 생성해서 작업을 하였습니다.

1. server.js에 POST login을 만들고 userid와 userpw를 가져와 생성된 ID인지 먼저 확인해줍니다.

2. 가입한 ID로 로그인이 정상적으로 됬을때 JWT토큰 생성할때 필요한 payload값을 선언해줍니다.

3. createToken 함수에 payload 인자값 넣고 토큰에 담습니다.

4. 단순 hash를 이용해서 암호화를 사용하면 보안이 취약할 수 있으니 salt를 사용할 것이라 crypto 모듈을 가져왔습니다.

5. createToken 함수를 가져오고 인자값에 전에 server.js 파일에서 만든 payload를 state라고 인자값에 넣어주었습니다.

6. jwt 토큰을 생성하기 위해 기본적인 header, payload 내용을 작성하고 인코딩을 해주었습니다.

6-1. header와 payload에 인코딩을 해줄것이라 중복된 코드를 함수로 빼서 처리했습니다.

7. 인코딩한 header와 payload로 소금칠한 signature를 생성해줍시다.

7-1. signature 코드도 나중에 또 사용할 예정이라 따로 빼주어서 작업하였습니다.

8. 인코딩한 header 와 payload, signature 값을 return 해주며 createToken 함수를 끝냈습니다.

9. 다시 server.js 파일로 돌아와서 createToken값을 token에 담았으니 쿠키를 생성해주고 메인페이지로 보내줍니다.

결과

1. user 정보로 로그인을 해줍시다.

2. 정상적으로 쿠키 생성이 완료되었습니다!

3. JWT 토큰이 정상적으로 잘 생성되었나 쿠키값을 가지고 https://jwt.io/ 에서 확인해줍시다. 잘 생성되었네요!

JWT 토큰에서 필요한 정보 가져오기

JWT 토큰 생성은 마무리되었고 이제 JWT토큰을 디코딩하여 필요한 정보를 빼와봅시다!

정리가 잘되있어서 코드 리뷰를 할 필요가 있나 싶습니다..

1. auth 라는 미들웨어로 JWT토큰에서 내용을 빼올것입니다.

2. 우선 로그인 성공해서 보내준 cookie를 가져와 봅시다.

3. cookie를 가져왔으니 header, payload, signature 내용을 다시 분리해줍니다.

4. 가져온 header와 payload를 가지고 다시 signature를 만들어서 로그인 성공할때 던져준 cookie를 혹시 조작하거나 변경되었는지 확인하는 작업을 거쳐줍니다. ( salt값은 저밖에 모르니 다른사람이 조작했으면 제가 생성해준 signature 값과 지금 가져온 cookie의 signature값이 다르겠죠? )

5. 혹시 signature가 조작되었을 경우 error를 던져줍시다.

6. 저희가 사용할 user의 정보는 payload에 담겨있으니 payload를 디코딩하여 user에 담아줍시다.

7. 이제 req.user에 디코딩한 payload의 정보, 즉 user를 보내줍시다.

8. auth는 미들웨어로 사용하기에 next( )를 사용해주고 마무리합시다.

9. 열심히 디코딩하여 가져온 user 정보를 확인해봐야하니 server.js에 GET admin을 하나 만들어 auth 미들웨어를 중간에 넣고 테스트를 해봅시다.

10. req.user가 undefined면 로그인을 하지 않은것이니 error를 던져줍니다.

11. 로그인을 했으면 res.send로 환영합니다 username님 이라고 확인해봅시다.

결과

• 로그인 했을 경우

• 로그인을 하지 않았을 경우