이번에는 token 대한 개념을
스프린트를 통해 복습하려고 한다.

내가 복습하려고 쓰는 글이기에
나만 이해할 수 있을 글이 될 것 같다.

그리고, 스프린트 과제에는 대부분의 기본 뼈대 파일과 코드가 작성되어 있다.
그래서 과정이 상세하지 않을 수도 있음!!
일단 나는 내가 작성한 부분만 복습할 뿐..

session vs token

기존 세션 인증 방식은 서버에 유저 정보를 담는 방식이었다.
하지만 이건 서버에 부담이 간다. 매 요청마다 세션 아이디와 데이터베이스를 살펴보기 때문이다.
그래서 이 부담을 클라이언트에게 넘겨주는 방법이 토큰 기반 인증이다.

클라이언트에게 토큰을 주고, 토큰을 가지고 있는 클라이언트를 토큰을 통해 서버에서 제공하는 데이터를 볼 수 있다.
그런데 인증에 사용되는 정보를 클라이언트한테 줘도 괜찮은 이유는 암호화 해서 담기 때문이다.

JWT란?

Json Web Token의 약자. Json 포맷으로 사용자 정보를 저장하는 토큰이다.

Header.payload.signature 이렇게 나눈다.

• Header - 어떤 종류의 토큰인지, 어떤 알고리즘으로 암호화 했는지,
• payload - 유저의 정보, 권한이 있는지, 나머지 정보
• Signature - Header, Payload를 base64로 인코딩한 값과 salt값을 조합한 암호화 값.

JWT의 종류

Access Token과 Refresh Token이 있다.
Access Token은 보호된 정보에 접근할 수 있는 권한부여에 사용된다.
사용자는 로그인시 이 두 가지 토큰을 모두 받지만 실제 사용하는 건 Access Token이다.

두 가지를 모두 주는 이유는 Access token이 해킹당할 우려가 있기에, Access token의 유효기간을 짧게 주고,
만료되면 refresh token을 이용해 다시 access token을 발급 받기 위함이다.

기본 뼈대는 모두 작성되어 있다.
index.js / evn / models /migrations 등등.
그래서 우리는 서버에서는 컨트롤러만 작성할 것이다.

Token Loign 코드 작성

자 여기 로그인 함수가 있다.
사용자가 로그인을 하면 req.body에 뭐가 올까?

요렇게 정보가 들어온다.
그러면 우리가 할 일은 요녀석이 데이터베이스에 있는지 확인해야 한다.

만약 일치하는 데이터가 있으면??

토큰을 발급해 줄 때 저장할 유저 정보(payload) 암호, 유효기간 등을 설정해주면 된다.
에세스와 리프래쉬 모두 한 꺼번에 주는 걸 잊지 말자.

이렇게 하면 로그인 작성은 끝난다.

Access Token Request 코드 작성

이후 발급 받은 토큰을 어떻게 쓸까?? 먼저 Access Token 부터 보자.

만약 유저가 로그인과 토근 발급이 정상적으로 됐다면 그 이후 서버를 이용할 때
서버는 이 토큰을 확인한다.

한 번 살펴보자

보면 토큰은 req.headers.authorization에서 볼 수 있다.

이렇게 암호화 된 상태로 유저 정보가 온다.
그러면 이걸 해독해야 한다.

이렇게 아까 우리가 login 때 토큰과 함께 넣었던 payload(유저 정보)를 확인 할 수 있다.

그 이후에는 쿠키와 세션 때 처럼
일치하는 유저 정보를 다시 보내주면 된다.

Refresh Token Request 코드 작성

만약 에세스 토큰의 유효기간이 모두 끝나면 우리는 리프래쉬 토큰을 이용해야 한다.
한 번 확인해 보자.

이렇게 쿠키에 담아준 리프래쉬 토큰을 볼 수 있다.
역시 암호화가 되어 있다.
에스스와 다른 점은 앞에 Bearer가 없다는 것.
그러면 우리는 이 리프래쉬 토큰으로 에세스 토큰을 다시 발급해줘야 한다.

이렇게 토큰이 없을 때와 토큰 해독이 안 될 때 경우를 먼저 처리해 주었다.

일단 전체 코드이다.
토큰 해독과 유저정보를 모두 정상적으로 찾았다면,
login 때 만들어 주었던 에스스 토큰 발급 과정을 한 번 더 해주면 된다.

토큰을 해독 후 정상적으로 유저 정보를 찾았을 때

토큰을 다시 재발급 했을 때.

이러면 서버는 끝이 난다.
클라이언트로 가보자.

Token Client Login 코드 작성

로그인은 단순하다.

이렇게 로그인을 하면

토큰을 받게 되고, 이걸 state로 넘겨주면 된다.

Token Mypage 코드 작성

마이페이지에서는 받아온 토큰으로 유저정보를 입력하는 내용이다.
리프래쉬 토큰도 있다.
내용은 같아서 한 번에 찍었다.

Token App.js 코드 작성

간단히 첨부.

토큰 스프린트 리뷰 끝!