데브코스 SNS 만들기 프로젝트를 하면서 알게 된 토큰에 대해 정리했습니다.
토큰
많은 웹사이트에서 토큰(Token) 기반 인증을 선택하는 이유
stateless 서버
stateless서버는 클라이언트(사용자)에게 요청받을 때 마다 클라이언트의 상태를 유지하고 이를 서비스 제공에 이용하는 stateful 서버와 달리 서버가 클라이언트 측에서 들어오는 요청만으로 작업을 처리하기 때문에 클라이언트와 서버의 연결고리가 없어지고, 이로 인해 서버의 확장성이 높아진다는 장점이 있다.
인증정보를 다른 어플리케이션으로 전달 가능
대표적인 예제로는 Oauth가 있으며, 페북/구글 같은 소셜 계정으로 다른 웹서비스에서도 로그인 할 수 있도록 해준다.
보안성
쿠키를 사용함으로써 발생하는 취약점 보완
모바일 어플리케이션 적합
JWT토큰
JWT 토큰은회원 인증, 정보교류에서 주로 사용되며 헤더, 정보, 서명 3가지 부분으로 나뉘어져있다.
Header
Header에는 토큰의 타입(JWT)와 해싱 알고리즘 2가지 정보가 담겨 있다.
정보(payload)
토큰에는 여러개의 클레임(claim)을 넣을 수 있는데, 클레임(claim)은 정보의 한 조각이며, name/value 한 쌍으로 이루어져 있다.
클레임은 크게 registered(등록된), public(공개), private(비공개) 세 분류로 나뉜다.
등록된 클레임(registered)
등록된 클레임(registered)은 토큰에 정보를 담기 위해 이름이 이미 정해진 것으로, 선택적으로 사용하면 된다. registered의 클레임 이름은 다음과 같다.
iss(issuer), sub(subject), aud(audience), exp(expiration만료시간), nbf(not before) iat(issed at), jti(JWT 고유식별자)
공개클레임
공개클레임은 충돌방지를 위해 URL 형식으로 이름을 짓는다. ("https:// ... /jwt_claims/...": true)
비공개클레임
비공개클레임은 양측 협의하에(보통 클라이언트/서버) 사용되는 클레임 이름들이다.
서명(signature)
서명은 헤더의 인코딩 값과 정보의 인코딩 값을 합친 후 비밀키로 해쉬를 하여 생성한다. 이렇게 만든 해쉬를 hex ➡ base64로 인코딩 해야한다.
데브코스 프로젝트에서 사용했던 JWT토큰 해싱
async function addPostLike() {
try {
const response: any = await axios.post(
`${API주소}`,
{
postId: props.id,
},
{ headers: { Authorization: `Bearer ${token}` } }
);
setPostLike(response.data._id);
setPostLikeNumber(postLikeNumber + 1);
} catch (error) {
console.error(error);
}
}토큰값 가져오기
토큰에서 user값 가져오기 const userId = JSON.parse(atob(token.split(".")[1])).user._id;
참고사이트 VELOPERT.LOG
