토큰 기반 인증 [ OAuth2.0 / JWT / 웹 저장소 ]

🧸 토큰 기반 인증

 

[옛날 - 세션기반인증]

예전에는 사용자의 로그인 상태를 서버가 전부 가지고 있었다.

서버의 세션에 사용자 정보를 넣고 이 사람이 로그인 했다 안했다를 전부 기록하고 기억

-> 로그인한 사용자가 많아지면 서버에 부하가 옴 그렇다고 서버 여러개 놓자니 관리가 까다로움

그래서 최근에는 토큰 기반 인증 방법을 많이 사용한다.

유저의 인증 정보를 세션에 담지 않는 인증방식이 토큰 기반 인증 방법이다.

클라이언트가 토큰을 가지고 있다. 

 

🧸 OAuth2.0

외부서비스의 인증 및 권한부여를 관리하는 프레임워크 → Open Authentication, Open Authorization 

 

동작 방식

1. 클라이언트와 서버 사이에 인증(로그인)을 하면 서버가 access_token 을 줌.
2. 클라이언트는 access_token을 이용해서 API 요청을 할 수 있다.
3. 서버는 API 요청을 받고, access_token을 가지고 권한이 있나 없나 확인해서 결과를 클라이언트에 보내준다.

🧸JWT란?

토큰의 한 형식, 데이터가 JSON 형태로 이루어져 있는 토큰.

JWT 는 전자 서명이 포함된 토큰 보안에 조금 더 적합.

생김새 : [header].[payload(내용)].[signature(서명)]

• header: 토큰 타입과 암호화 방식 정보
• payload: 토큰에 담을 정보가 name: value 쌍으로 들어감
• signature: 서명 정보입니다. secret key를 포함해서 header와 payload 정보가 암호화 되어 들어감

동작 방식

1. 유저가 로그인을 시도하면,
2. 서버가 요청을 확인하고 secret key를 가지고 access_token을 발급.
3. 클라이언트에 JWT를 전달하고
4. 클라이언트는 API 요청을 할 때 Authorization header에 JWT를 담아서 보냄.
5. 서버는 JWT의 서명을 확인하고 payload에서 정보를 확인해서 API 응답을 보냄.

 

🧸 JWT(Json Web Token) vs OAuth?

JWT와 OAuth는 로그인에 많이 쓰이는 두 인증 방식이다.

뭘 택할지 자주 고민하게 되지만 사실 비교하긴 조금 애매하다.

JWT는 토큰의 한 형식이고 OAuth는 프레임워크거든요. (OAuth에서 토큰으로 JWT를 사용할 수도 있다. 🙂 )

 

🧸 웹 저장소 ((예) 장바구니)

 

http는 1번 요청을 하고 응답을 받으면 연결이 해제된다.

즉, 우리가 access_token을 클라이언트 어딘가에 저장해야된다는 소리

 

👉 클라이언트 저장소

개발자도구 -> Application 탭 -> 좌측 Storage 확인

👉 쿠키

클라이언트 로컬에 저장되는 키밸류(key:value) 형태의 저장소 , 4kb정도 저장

 

👉 쿠키만들기

// key는 MY_COOKIE, value는 here, 
document.cookie = "MY_COOKIE=here;";

👉 쿠키 만료일 설정

let date = new Date('2022-10-05');
let date_str = date.toUTCString();

date_str; // 05 Oct 2022 00:00:00 GMT


document.cookie ="MY_COOKIE = here; expires="+date_str

👉 쿠키 부르기

document.cookie

👉 쿠키 삭제

만료일을 앞으로 당겨서 삭제

document.cookie ="MY_COOKIE = here; expires="+date_str

let exp = new Date('2020-01-01').toUTCString();

document.cookie ="MY_COOKIE = here; expires="+exp

👉 세션 스토리지

HTML5에서 추가된 저장소 키밸류(key:value) 형태의 저장소

세션 스토리지에 저장된 데이터는 브라우저를 닫으면 제거된다.

👉 추가하기

// key는 MY_SESSION, value는 here인 세션을 만들어요.
sessionStorage.setItem("MY_SESSION", "here");

👉 가져오기

// key값으로 쉽게 가져올 수 있어요 :) 
sessionStorage.getItem("MY_SESSION");

👉 삭제하기

// 하나만 삭제하고 싶다면, 이렇게 키를 통해 삭제합니다.
sessionStorage.removeItem("MY_SESSION");

// 몽땅 지우고 싶을 땐 clear()를 쓰면 됩니다. :) 
sessionStorage.clear();

👉 로컬 스토리지

HTML5에서 추가된 저장소 키밸류(key:value) 형태의 저장소

로컬 스토리지는 따로 지워주지 않으면 계속 브라우저에 남아있음. 

중요한 정보를 넣어두면 아주 위험.

 

👉 추가하기

// key는 MY_LOCAL, value는 here인 데이터를 저장해요.
localStorage.setItem("MY_LOCAL", "here");

👉가져오기

// key값으로 쉽게 가져올 수 있어요 :) 
localStorage.getItem("MY_LOCAL");

👉 삭제하기

// 하나만 삭제하고 싶다면, 이렇게 키를 통해 삭제합니다.
localStorage.removeItem("MY_LOCAL");

// 몽땅 지우고 싶을 땐 clear()를 쓰면 됩니다. :) 
localStorage.clear();

 

🧸 토큰은 어디에 저장해야되나?

 

예전에는 토큰을 저장할만한 곳이 쿠키뿐

HTML5가 나온 후부터는 LocalStorage에도 토큰을 저장하는 일이 많아짐

 

왜 쿠키보다 로컬 스토리지에 저장?

- 쿠키보다 더 많은 정보를 저장

(쿠키4KB /로컬스토리지 5MB)

- http통신에 딸려들어가지 않는다.

 

그럼 무조건 로컬 스토리지에 토큰을 넣을까?

- 아니다. 로컬스토리지는 로컬에 데이터가 다 남아있으니 보안상 취약함.

프로젝트 성향에 맞춰 저장 장소는 그때 그때 달라져야 됨.