로그인 구현 공부
유저의 로그인 정보를 세션에 담지않는 인증방식 = 쿠키
유저가 아이디와 패스워드를 입력하면 서버에서는 우리 유저가 맞는지 확인
우리 유저가 많다면 서버가 토큰을 줌
유저가 댓글을 쓰거나 게시글을 달때마다 서버에 토큰과 같이 요청을 보냄
그럼 서버가 확인 후 너 게시글 써도돼 하고 응답을 보냄
1. OAuth2.0
토큰 기반 인증
토큰을 발급하고 인증하는 방법애대한 프레임워크
클라이언트와 서버 사이에 인증(로그인)을 하면 서버가 access_toden을 줌
클라이언트는 access_token응 이용해 API요청 할 수 있음
서버는 API요청을 받고, access_token을 가지고 권한이 있나 없나 확인해서 결과를 클라이언트에게 보내줌
소셜로그인시
우리 서비스에서 구글에 로그인 페이지 달라고 요청함
구글이 우리 서비스에게 응답
우리 서비스가 유저에게 로그인 페이지 줌
유저가 아이디와 패스워드를 넣고 로그인을 실제로 함 (구글에 아이디, 패스워드 넣고 확인 요청)
구글이 확인 후 유저에게 사탕목걸이(토큰) 줌 access token을 주는 건 아님 -> 우리 유저 맞아하고 authorization code(권한 증서) 발급해줌
유저는 구글에 로그인 한 것이고 구글에게 그 권한증서를 받은 건 유저임 그것을 우리 사이트에게 유저가 줘야함
그럼 우리는 그 코드를 가지고 구글에게 감
이거 줄테니 우리에게 access token을 줘라 요청함
구글에게서 토큰을 받으면 그 토큰을 유저에게 줘야함(그래야지 유저가 댓글이나 글쓸때 등 토큰으로 요청함)
토큰이 만료됐을땐 구글에게 refresh token재요청, 우리는 그 토큰을 또 사용자에게 전달
2. JWT (= Json Web Token)
토큰의 한 형식, 데이터가 JSON형태로 이루어져 있는 토큰
JWT는 [header].[payload(내용)].[signature(서명)] 세가지로 이루어져잇다.
header: 토큰 타입과 암호화 방식 정보가 들어감
payload: 토큰에 담을 정보가 name(=key): value 쌍으로 들어감
signature: 서명 정보. secret key를 포함해서 header와 payload정보가 암호화 되어 들어감
자주 쓰는 저장소 3가지
쿠키
쿠키는 클라이언트 로컬에 저장되는 키, 밸류 형태의 저장소
쿠키 생성은 document.cookie = "MY_COOKIE(key값) = here(value);";
형태로 생성하면됨
만료일도 설정가능
let date = new Date('2022-10-05');
let date_str = date.toUTCString();
document.cookie = "MY_COOKIE = here; expires="+date_str
document.cookie // 모든 쿠키를 보여줌
쿠키 삭제
let exp = new Date('2020-01-01').toUTCString();
document.cookie = "MY_COOKIE = here; expires="exp;
세션 스토리지
HTML5에서 추가된 저장소
쿠키와 마찬가지로 key:value형태의 저장소
쿠키와 다른 점은 브라우저를 닫으면 제거됨
자동로그인이나 장바구니 같은 다음에 브라우저 열었을때도 유지해야하는 데이터는 어려움
추가하기 sessionStorage.getItem("MY_SESSION", "here"); // key는 MY_SESSION, value=here인 세션 만듦
가져오기 sessionStorage.getItem("MY_SESSION"); // key값으로 쉽게 가져올 수 있음
삭제하기 sessoinStorage.removeItem("MY_SESSION"); // 하나만 삭제하고싶다면
sessionStorage.clear(); // 전체 삭제 하고 싶을땐
로컬 스토리지
HTML5에서 추가된 저장소 key:value형태
- 로컬 스토리지는 따로 지워주지않으면 계속 브라우저에 남아있음 =
- 중요한 정보는 로컬 스토리지에 저장하면 위험함
사용법은 세션 스토리지와 거의 동일
토큰은 어디에 저장할까?
웹사이트 성향과 개발 편이에 맞춰 그때그때 맞는 곳에 저장하면 된다.