<div id="readability-page-1" class="page"><div>
 <a href="/m/category/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/%EC%9D%B8%EC%A6%9D">프로그래밍/인증</a><h2>쉽게 알아보는 서버 인증 2편(Access Token + Refresh Token)</h2>
 <cite>
 그랩 자유로운 오랑우탄
 </cite>
 </div><time>2018. 7. 29. 02:23</time>
 
 
 <a href="#comment" onclick="Utils.smoothScroll(this);return false">
 
 </a>
 
 
 
 
 
 
 
 <div>
 

<figure width="300" height="300" data-origin-width="650" data-origin-height="650" data-ke-mobilestyle="widthContent"><img src="https://t1.daumcdn.net/cfile/tistory/9978EF475B5CA2391F" width="300" height="300" data-origin-width="650" data-origin-height="650" data-ke-mobilestyle="widthContent"></figure>
&lt;26$ JWT 티셔츠&nbsp;&gt;



안녕하세요! 이전 포스팅에는 크게 세션/쿠키 인증, 토큰 기반 인증(대표적으로 JWT)에 대하여 알아보았습니다. 저희가 앱, 웹 혹은 서버 개발을 하면서 꼭 사용하게 되는 인증(Authorization)은 아주 중요합니다. 만일 설계를 잘못했을 시, 회원들의 정보 유출이 일어날 수도 있으니까요.

이번 포스팅에서는 기본 JWT 방식의 강화버전인 Access Token &amp; Refresh Token 방식에 대해 알아보겠습니다.&nbsp;



<h5>Refresh Token?</h5>

Access Token(JWT)를 통한 인증 방식의 문제는 만일 제 3자에게 탈취당할 경우 보안에 취약하다는 점입니다.
유효기간이 짧은 Token의 경우 그만큼 사용자는 로그인을 자주 해서 새롭게 Token을 발급받아야 하므로 불편합니다. 그러나 유효기간을 늘리자면, 토큰을 탈취당했을 때 보안에 더 취약해지게 됩니다.&nbsp;
이때 “그러면 유효기간을 짧게 하면서&nbsp; 좋은 방법이 있지는 않을까?”라는 질문의 답이 바로 "Refresh Token"입니다.&nbsp;

Refresh Token은 Access Token과 똑같은 형태의 JWT입니다. 처음에 로그인을 완료했을 때 Access Token과 동시에 발급되는 Refresh Token은 긴 유효기간을 가지면서, Access Token이 만료됐을 때 새로 발급해주는 열쇠가 됩니다(여기서 만료라는 개념은 그냥 유효기간을 지났다는 의미입니다.)&nbsp;

사용 예를 간단히 들어보겠습니다. Refresh Token의 유효기간은 2주, Access Token의 유효기간은 1시간이라 하겠습니다. 사용자는 API 요청을 신나게 하다가 1시간이 지나게 되면, 가지고 있는 Access Token은 만료됩니다. 그러면 Refresh Token의 유효기간 전까지는 Access Token을 새롭게 발급받을 수 있습니다.&nbsp;



** Access Token은 탈취당하면 정보가 유출되는건 동일합니다. 다만&nbsp;짧은 유효기간 안에만 사용이 가능하기에 더 안전하다는 의미입니다.&nbsp;

**&nbsp;Refresh Token의 유효기간이 만료됐다면, 사용자는 새로 로그인해야 합니다. Refresh Token도 탈취될 가능성이 있기 때문에 적절한 유효기간 설정이 필요해보입니다(보통 2주로 많이 잡더군요)


<h5>Access Token +&nbsp;Refresh Token 인증 과정</h5>

<figure width="820" height="474" data-origin-width="820" data-origin-height="473" data-ke-mobilestyle="widthContent"><img src="https://t1.daumcdn.net/cfile/tistory/99DB8C475B5CA1C936" width="820" height="474" data-origin-width="820" data-origin-height="473" data-ke-mobilestyle="widthContent"></figure>


이번에는 과정이 좀 복잡합니다. 차근차근 하나씩 알아봅시다. 빨간색은&nbsp;1편의 JWT 인증방식에서 추가로 들어간 과정입니다.

1. 사용자가 ID , PW를 통해 로그인합니다.

2. 서버에서는 회원 DB에서 값을 비교합니다(보통 PW는 일반적으로 암호화해서 들어갑니다)

3~4. 로그인이 완료되면 Access Token, Refresh Token을 발급합니다. 이때 일반적으로 회원DB에 Refresh Token을 저장해둡니다.

5. 사용자는 Refresh Token은 안전한 저장소에 저장 후, Access Token을 헤더에 실어 요청을 보냅니다.

6~7. Access Token을 검증하여 이에 맞는 데이터를 보냅니다.

8. 시간이 지나 Access Token이 만료됐다고 보겠습니다.

9. 사용자는 이전과 동일하게 Access Token을 헤더에 실어 요청을 보냅니다.

10~11. 서버는 Access Token이 만료됨을 확인하고 권한없음을 신호로 보냅니다.

** Access Token 만료가&nbsp;될 때마다 계속&nbsp;과정 9~11을 거칠 필요는 없습니다.
&nbsp;사용자(프론트엔드)에서 Access Token의 Payload를 통해 유효기간을 알 수 있습니다. 따라서 프론트엔드 단에서 API 요청 전에 토큰이 만료됐다면 바로 재발급 요청을 할 수도 있습니다.


12. 사용자는 Refresh Token과 Access Token을 함께 서버로 보냅니다.

13. 서버는 받은 Access Token이 조작되지 않았는지 확인한후, Refresh Token과 사용자의 DB에 저장되어 있던 Refresh Token을 비교합니다. Token이 동일하고 유효기간도 지나지 않았다면 새로운 Access Token을 발급해줍니다.

14. 서버는 새로운 Access Token을 헤더에 실어 다시 API 요청을 진행합니다.&nbsp;



Refresh Token이 들어가면서 과정이 좀 복잡해졌습니다. 하지만 Access Token의 약점을 보완해주기 때문에 보안이 중요한 프로젝트에서는 사용하기를 권장합니다.&nbsp;



(큰&nbsp;장점)

기존의 Access Token만 있을 때보다 안전합니다.


(단점)

1. 구현이 복잡합니다. 검증 프로세스가 길기 때문에 자연스레 구현하기 힘들어졌습니다(프론트엔드, 서버 모두)

2. Access Token이 만료될 때마다 새롭게 발급하는 과정에서 생기는 HTTP 요청 횟수가 많습니다. 이는 서버의 자원&nbsp;낭비로 귀결됩니다.&nbsp;



저도 현재 프로젝트에&nbsp; Access Token + Refresh Token 방식을 도입하였습니다. 처음에 구현하기가 좀 힘들 수 있으나 충분히 가치가 있다고 봅니다.&nbsp;

다음 포스팅에서는 페이스북, 네이버 로그인에 쓰이는 Oauth에 대해 알아보도록 하겠습니다. Oauth도 Access Token + Refresh Token 방식으로 진행되기 때문에 어렵지 않게 이해하실 수 있을겁니다. 짜이찌엔!


 [앞광고]
1. 자바스크립트 하나로 웹, 서버, 모바일, 머신러닝까지 전부 익히는 올인원 클래스(베스트 셀러 &amp; 리뷰 만점)
<a href="https://bit.ly/3h9MN6S">bit.ly/3h9MN6S</a>
<figure id="og_1620454656880" contenteditable="false" data-ke-type="opengraph" data-og-type="website" data-og-title="비전공자를 위한 진짜 올인원 개발 클래스 - 인프런 | 강의" data-og-description="왕초보도 할 수 있는 웹, 서버, 모바일 앱, 머신러닝까지 익히는 끝판왕 풀스택 강의입니다. 개발을 어디서부터 시작할지 막막했다면 이 강의를 강력 추천할게요. Javascript 하나로 진행합니다!, [" data-og-host="www.inflearn.com" data-og-source-url="https://bit.ly/3h9MN6S" data-og-url="https://www.inflearn.com/course/%EC%98%AC%EC%9D%B8%EC%9B%90-%EA%B0%9C%EB%B0%9C%ED%81%B4%EB%9E%98%EC%8A%A4?inst=487fd036&amp;source=blog" data-og-image="https://scrap.kakaocdn.net/dn/cHHTPi/hyJ7SigqYQ/Sz2SBTklYHTODzyCZRaue1/img.jpg?width=600&amp;height=600&amp;face=252_252_326_333,https://scrap.kakaocdn.net/dn/71X36/hyJ7SvN7ot/csunKPdKN0cD6mDw5Pkkk1/img.jpg?width=600&amp;height=600&amp;face=252_252_326_333,https://scrap.kakaocdn.net/dn/b5dVOZ/hyJ76U68oj/UgVOP8a33OeUCleDwPtxkk/img.png?width=1334&amp;height=3395&amp;face=572_318_720_482"><a href="https://bit.ly/3h9MN6S" data-source-url="https://bit.ly/3h9MN6S">

<div>
비전공자를 위한 진짜 올인원 개발 클래스 - 인프런 | 강의
왕초보도 할 수 있는 웹, 서버, 모바일 앱, 머신러닝까지 익히는 끝판왕 풀스택 강의입니다. 개발을 어디서부터 시작할지 막막했다면 이 강의를 강력 추천할게요. Javascript 하나로 진행합니다!, [
www.inflearn.com
</div>
</a><img src="https://scrap.kakaocdn.net/dn/cHHTPi/hyJ7SigqYQ/Sz2SBTklYHTODzyCZRaue1/img.jpg?width=600&amp;height=600&amp;face=252_252_326_333,https://scrap.kakaocdn.net/dn/71X36/hyJ7SvN7ot/csunKPdKN0cD6mDw5Pkkk1/img.jpg?width=600&amp;height=600&amp;face=252_252_326_333,https://scrap.kakaocdn.net/dn/b5dVOZ/hyJ76U68oj/UgVOP8a33OeUCleDwPtxkk/img.png?width=1334&amp;height=3395&amp;face=572_318_720_482"></figure>

2. IT 회사에서 살아남기 위한 모든 개발 지식
<a href="https://bit.ly/3uzesSS">bit.ly/3uzesSS</a>
<figure id="og_1620454656881" contenteditable="false" data-ke-type="opengraph" data-og-type="website" data-og-title="IT 회사에서 살아남기 위한 모든 개발 지식 A to Z - 인프런 | 강의" data-og-description="본 강의는 멤버십 구독 개념으로 한 번 구매하면 계속 추가되는 수업도 수강할 수 있습니다😃, [사진] 이 강의는!&nbsp; 단순히 개발 용어만을 알려주지 않습니다.IT 회사에서 개발자들이 실제로 하" data-og-host="www.inflearn.com" data-og-source-url="https://bit.ly/3uzesSS" data-og-url="https://www.inflearn.com/course/it-%EA%B0%9C%EB%B0%9C%EC%A7%80%EC%8B%9D?inst=889dbed0&amp;source=blog" data-og-image="https://scrap.kakaocdn.net/dn/cFRWFn/hyJ75Pr0ZF/xNKQSYUIni83eQtRkfb8ak/img.jpg?width=768&amp;height=500&amp;face=171_109_251_196,https://scrap.kakaocdn.net/dn/ACy9R/hyJ75Pr0VX/H51vkn35qdnIRX8xa6Krw0/img.jpg?width=768&amp;height=500&amp;face=171_109_251_196,https://scrap.kakaocdn.net/dn/O2qYK/hyJ72rFsdH/D7jrvXkCBREpFBVQKzKoE1/img.png?width=1200&amp;height=4750&amp;face=0_0_1200_4750"><a href="https://bit.ly/3uzesSS" data-source-url="https://bit.ly/3uzesSS">

<div>
IT 회사에서 살아남기 위한 모든 개발 지식 A to Z - 인프런 | 강의
본 강의는 멤버십 구독 개념으로 한 번 구매하면 계속 추가되는 수업도 수강할 수 있습니다😃, [사진] 이 강의는!&nbsp; 단순히 개발 용어만을 알려주지 않습니다.IT 회사에서 개발자들이 실제로 하
www.inflearn.com
</div>
</a><img src="https://scrap.kakaocdn.net/dn/cFRWFn/hyJ75Pr0ZF/xNKQSYUIni83eQtRkfb8ak/img.jpg?width=768&amp;height=500&amp;face=171_109_251_196,https://scrap.kakaocdn.net/dn/ACy9R/hyJ75Pr0VX/H51vkn35qdnIRX8xa6Krw0/img.jpg?width=768&amp;height=500&amp;face=171_109_251_196,https://scrap.kakaocdn.net/dn/O2qYK/hyJ72rFsdH/D7jrvXkCBREpFBVQKzKoE1/img.png?width=1200&amp;height=4750&amp;face=0_0_1200_4750"></figure>

 
 
											
					
 
 
 </div></div>

그랩의 블로그

<26$ JWT 티셔츠 >
 
 
 
안녕하세요! 이전 포스팅에는 크게 세션/쿠키 인증, 토큰 기반 인증(대표적으로 JWT)에 대하여 알아보았습니다. 저희가 앱, 웹 혹은 서버 개발을 하면서 꼭 사용하게 되는 인증(Authorization)은 아주 중요합니다. 만일 설계를 잘못했을 시, 회원들의 정보 유출이 일어날 수도 있으니까요.
 
이번 포스팅에서는 기본 JWT 방식의 강화버전인 Access Token & Refresh Token 방식에 대해 알아보겠습니다. 
 
 
 
Refresh Token?
 
Access Token(JWT)를 통한 인증 방식의 문제는 만일 제 3자에게 탈취당할 경우 보안에 취약하다는 점입니다.
유효기간이 짧은 Token의 경우 그만큼 사용자는 로그인을 자주 해서 새롭게 Token을 발급받아야 하므로 불편합니다. 그러나 유효기간을 늘리자면, 토큰을 탈취당했을 때 보안에 더 취약해지게 됩니다. 
이때 “그러면 유효기간을 짧게 하면서  좋은 방법이 있지는 않을까?”라는 질문의 답이 바로 "Refresh Token"입니다. 
 
Refresh Token은 Access Token과 똑같은 형태의 JWT입니다. 처음에 로그인을 완료했을 때 Access Token과 동시에 발급되는 Refresh Token은 긴 유효기간을 가지면서, Access Token이 만료됐을 때 새로 발급해주는 열쇠가 됩니다(여기서 만료라는 개념은 그냥 유효기간을 지났다는 의미입니다.) 
 
사용 예를 간단히 들어보겠습니다. Refresh Token의 유효기간은 2주, Access Token의 유효기간은 1시간이라 하겠습니다. 사용자는 API 요청을 신나게 하다가 1시간이 지나게 되면, 가지고 있는 Access Token은 만료됩니다. 그러면 Refresh Token의 유효기간 전까지는 Access Token을 새롭게 발급받을 수 있습니다. 
 
 
 
** Access Token은 탈취당하면 정보가 유출되는건 동일합니다. 다만 짧은 유효기간 안에만 사용이 가능하기에 더 안전하다는 의미입니다. 
 
** Refresh Token의 유효기간이 만료됐다면, 사용자는 새로 로그인해야 합니다. Refresh Token도 탈취될 가능성이 있기 때문에 적절한 유효기간 설정이 필요해보입니다(보통 2주로 많이 잡더군요)
 
 
Access Token + Refresh Token 인증 과정
 
 
 
이번에는 과정이 좀 복잡합니다. 차근차근 하나씩 알아봅시다. 빨간색은 1편의 JWT 인증방식에서 추가로 들어간 과정입니다.
 
1. 사용자가 ID , PW를 통해 로그인합니다.
 
2. 서버에서는 회원 DB에서 값을 비교합니다(보통 PW는 일반적으로 암호화해서 들어갑니다)
 
3~4. 로그인이 완료되면 Access Token, Refresh Token을 발급합니다. 이때 일반적으로 회원DB에 Refresh Token을 저장해둡니다.
 
5. 사용자는 Refresh Token은 안전한 저장소에 저장 후, Access Token을 헤더에 실어 요청을 보냅니다.
 
6~7. Access Token을 검증하여 이에 맞는 데이터를 보냅니다.
 
8. 시간이 지나 Access Token이 만료됐다고 보겠습니다.
 
9. 사용자는 이전과 동일하게 Access Token을 헤더에 실어 요청을 보냅니다.
 
10~11. 서버는 Access Token이 만료됨을 확인하고 권한없음을 신호로 보냅니다.
 
** Access Token 만료가 될 때마다 계속 과정 9~11을 거칠 필요는 없습니다.
 사용자(프론트엔드)에서 Access Token의 Payload를 통해 유효기간을 알 수 있습니다. 따라서 프론트엔드 단에서 API 요청 전에 토큰이 만료됐다면 바로 재발급 요청을 할 수도 있습니다.
 
 
12. 사용자는 Refresh Token과 Access Token을 함께 서버로 보냅니다.
 
13. 서버는 받은 Access Token이 조작되지 않았는지 확인한후, Refresh Token과 사용자의 DB에 저장되어 있던 Refresh Token을 비교합니다. Token이 동일하고 유효기간도 지나지 않았다면 새로운 Access Token을 발급해줍니다.
 
14. 서버는 새로운 Access Token을 헤더에 실어 다시 API 요청을 진행합니다. 
 
 
 
Refresh Token이 들어가면서 과정이 좀 복잡해졌습니다. 하지만 Access Token의 약점을 보완해주기 때문에 보안이 중요한 프로젝트에서는 사용하기를 권장합니다. 
 
 
 
(큰 장점)
 
기존의 Access Token만 있을 때보다 안전합니다.
 
 
(단점)
 
1. 구현이 복잡합니다. 검증 프로세스가 길기 때문에 자연스레 구현하기 힘들어졌습니다(프론트엔드, 서버 모두)
 
2. Access Token이 만료될 때마다 새롭게 발급하는 과정에서 생기는 HTTP 요청 횟수가 많습니다. 이는 서버의 자원 낭비로 귀결됩니다. 
 
 
 
저도 현재 프로젝트에  Access Token + Refresh Token 방식을 도입하였습니다. 처음에 구현하기가 좀 힘들 수 있으나 충분히 가치가 있다고 봅니다. 
 
다음 포스팅에서는 페이스북, 네이버 로그인에 쓰이는 Oauth에 대해 알아보도록 하겠습니다. Oauth도 Access Token + Refresh Token 방식으로 진행되기 때문에 어렵지 않게 이해하실 수 있을겁니다. 짜이찌엔!
 
 
 [앞광고]
1. 자바스크립트 하나로 웹, 서버, 모바일, 머신러닝까지 전부 익히는 올인원 클래스(베스트 셀러 & 리뷰 만점)
bit.ly/3h9MN6S
 
2. IT 회사에서 살아남기 위한 모든 개발 지식
bit.ly/3uzesSS

쉽게 알아보는 서버 인증 2편(Access Token + Refresh Token)

댓글