로그인, 인증 기능 구축 프로젝트[미니 프로젝트 1] - 01. jwt를 이용한 인증 앱 생성하기 : 07. RefreshToken으로 accessToken 생성하기

이전에 만들었던 refreshToken을 사용해서 만료된 accessToken을 다시 생성해주도록 하자 

 

1. Cookie에 담긴 refreshToken받아오기

기존에 accessToken의 경우는 요청에 담는 과정이 필요했었는데 

 

쿠키의 경우는 따로 요청에 추가해주지 않더라도 자동으로 가져가게 되어 있다.

 

이 쿠키를 확인하는 메서드를 서버에 추가해서 확인해보면

url은 '/token'으로 설정해주고 

 

쿠키의 값은 요청, req안에 cookies라는 속성 내부에 저장되어 있다.

콘솔로 이 값을 출력해보면

값을 찾아오지 못한것을 볼 수 있다.

 

이는 기존에 req에 응답을 받아올 때를 확인해보면 

이 부분이 필요한 이유와 동일하다.

 

req.cookies로 바로 값을 사용하지 못하는 이유

 

기본적으로 HTTP 요청 헤더에 있는 쿠키는 단순한 문자열 형태로 들어오게 되어 있다.

Cookie: refreshToken=xyz789; sessionId=abc123

이 값은 요청(req)의 헤더(headers)의 쿠키(cookie)에서 확인할 수 있는데 

아래와 같이 문자열로 출력이 된다.

이 요청에 대해서 파싱을 하지 않는다면 Cookie라는 key값에 할당된 값이 무엇인지에 대해서는 응답을 통해서 확인할 수 없다.

왜냐면 이건 문자열이기에 key:value 형태의 값으로 인식하지 못하기 때문이다

 

이 HTTP 요청에 담긴 쿠키 값을 아래와 같이 

{
  refreshToken: 'xyz789',
  sessionId: 'abc123'
}

 

key:value 값의 형태로 사용하기 위해서 태어난게 cookie-parser 미들웨어이다.

 

 

cookies-parser모듈을 받아온 후에 모든 요청에 대한 미들웨어로 선언해줘서 요청이 들어오면 이 요청 헤더 내부에 있는 쿠키 값을 받아와서(req.header.cookie) 파싱해 준 후 요청의 쿠키(req.cookies)에 넣어준다.

 

여기서 모든 요청에 대한 미들웨어로 선언해주는 것은 사용자가 해줘야만 한다.

이 문제를 해결하기 위해선 cookie-parser를 설치해준 다음에 불러와야 한다.

npm install cookie-parser

위 명령어를 통해서 cookie-parser를 설치해주고 

소스코드의 가장 상단 부에 cookie-parser를 불러와주고

그리고 express parser가 있던 부분 아래 쪽에 쿠키 파서를 모든 요청에 대해서 거치게 되는 미들웨어로 등록해주자.

이제 요청을 실행해보면

무엇인가 담긴것을 볼 수 있다.

우리가 토큰 값을 refreshToken이란 이름으로 담아 뒀으니 아래와 같이 출력을 다시해보자.

값을 잘 받아오는 것을 확인할 수 있다.

 

2. 서버로 받아온 refreshToken을 사용해서 accessToken 생성해주기

이제 서버로 받아온 토큰이 정말 그 사용자의 refreshToken이 맞는지를 확인해줘야 한다.

먼저 토큰 자체가 쿠키에 담겨 왔는지를 확인하기 위해 토큰 존재여부를 분기로 추가해주자.

만약 refreshToken값이 존재하지 않는다면 unauthorized인 403 상태 코드를 던져서 접근하지 못하도록 해주자.

 

그리고 refreshToken이 서버에 있는 값과 동일한지를 체크 하기 위해서, 원래는 DB에서 가져왔을 값이지만

지금은 서버에 존재하는 refreshTokenList의 값의 내부에 요청으로 전달된 쿠키의 refreshToken값이 존재하지 않는다면 

또 다시 unauthorized, 403을 전달해서 접근을 하지 못하도록 해주자. 

 

그리고 이제 받아온 refreshToken을 검증해주도록 하자.

verify 메서드를 사용해서 첫번째 메서드로 가져온 refreshToken을 넣어주고 

두번째로 이전에 refreshToken을 만들때 사용한 비밀키 문자열인 "superSecret"을 넣어주고

세번째엔 콜백 함수를 넣어주는데 

여기서 err는 해당 코드가 변조 되었거나 맞지 않은 경우에 전달되는 값이고, 정상적으로 검증 되었다면 decoded에 refreshToken을 만들때 넣어줬던 payload 값이 전달될 것이다.

 

그러니까 err가 존재한다면 이 값은 위조 되거나 맞지 않은 refreshToken으로 인식하고 다시 403로 반환시켜주도록 설정해줘야 한다.

이제 받아온 값을 이용해서 다시 accessToken을 생성해서 전달해주도록 하자

sign메서드를 사용하는데 decoded된 값의 형태를 한번 확인해보면 

위와 같은 형태로 되어 있는데 우리는 userId만 필요로 하기 때문에 json형태로 user라는 키값으로 해당 값을 담아서 첫번째 전달인자로 넣어주도록 하자

 

두번째 전달인자로 이전에 사용했던 문자열인 "secret"을 다시 사용해주고 

세번째 전달인자로 expireln을 다시 30초로 설정해주고 응답으로 전달해주도록 하자.

이제 다시 시작 부터 요청을 보내보고 

30 초를 기다린 다음에 

여기서 요청을 보내면 

이렇게 새로운 accessToken을 생성해서 돌려주는것을 볼 수 있다.

 

 

이렇게 JWT를 사용한 인증 방법을 알아봤다.