공부한 내용
Cookie
쿠키는 서버에서 클라이언트에 데이터를 지속적으로 저장할 수 있는 방법이다.
우선 처음으로 웹사이트 방문 시 클라이언트가 서버에게 요청을 하면 그 응답에는 쿠키가 있을 수 있다. 다음 방문시 클라이언트가 브라우저에서 받아놨던 쿠키도 요청으로 보내게 된다.
하지만 데이터를 저장한 이후에 아무때나 데이터를 가져올 수는 없으며 다음과 같은 형식을 만족할 때만 가능하다.
'Set-Cookie':[
'cookie=yummy',
'Secure=Secure; Secure',
'HttpOnly=HttpOnly; HttpOnly',
'Path=Path; Path=/cookie',
'Doamin=Domain; Domain=codestates.com'
]Domain
쿠키 옵션에서 도메인은 포트 및 서브 도메인정보 등을 포함하지 않는다.
예를 들어 request URL이 http://www.localhost.com:3000/users/login 이라고 한다면 Domain은 localhost.com이 된다.
이 때 쿠키 옵션에 도메인 정보가 존재한다면 클라이언트 쪽에서는 이 쿠키의 도메인 옵션과 서버 도메인이 일치해야만 쿠키 전송이 가능하다.
Path
서버가 라우팅할 때 사용하는 경로.
http://www.localhost.com:3000/users/login에서는 /users/login이 세부 경로가 된다.
만약 /login이 아니라 /users 같은 경로로 보내고자 할 때는 쿠키 전송이 불가능하다.
Max-Age, Expires
Expires는 유통 기한, Max-Age는 스톱워치 정도로 생각하면 될 것 같다.
Session Cookie : Max-Age 또는 Expires 옵션이 없는 쿠키로, 브라우저가 실행 중일 때 사용할 수 있는 쿠키, 브라우저를 종료하면 바로 삭제된다.
영속성 쿠키: 브라우저 종료 여부와 상관없이 Max-Age 또는 Expires에 지정된 유효기간만큼 사용 가능한 쿠키.
Secure
사용하는 프로토콜에 따른 쿠키의 전송 여부를 결정하는 옵션. Secure 옵션이 true로 설정된 경우 https를 이용하는 경우에만 쿠키 전송이 가능하다.
HttpOnly
자바스크립트에서 브라우저의 쿠키에 접근 여부를 결정. 만약 해당 옵션이 true로 설정된 경우, 자바스크립트로 쿠키에 접근이 불가능하다.
Session
출처: https://hudi.blog/session-based-auth-vs-token-based-auth/
사용자가 웹사이트에서 로그인을 시도했을 때 아이디가 비밀번호가 정확하게 입력됐다면,
서버는 '인증'에 성공했다고 인식할 것이다.
그리고 매번 방문을 할 때마다 로그인 과정을 거칠 필요가 없다. 사실 이것은 '해당 유저가 인증에 성공' 이라는 전제가 필요하다.
로그인을 유지하기 위한 수단으로 쿠키를 사용하는데, 이 쿠키에는 서버에서 발급한 세션 아이디를 저장한다.
Token
토큰 중에서 가장 대표적인 것은 JWT를 예로 들 수 있다.
그런데 이러한 토큰을 클라이언트 쪽에 담는다면 문제가 생길거라고 생각하지만,
사실은 유저 정보를 암호화해서 저장하기 때문에 비교적 안전한 편이다.
보통 Access token과 Refresh token 을 이용해 인증을 구현한다.
JWT 구조
토큰 기반 인증 절차
- 클라이언트가 서버에게 로그인 요청
- 서버는 암호화된 토큰을 클라이언트에 전달(
Access token과Refresh token모두 생성) - 클라이언트 쪽에서 토큰 저장
- 클라이언트가 HTTP 헤더 또는 쿠키에 토큰을 담아 전송
- 서버가 토큰을 해석하여 올바른 사용자라고 판단을 할 경우 응답 보냄
Oauth
출처: https://bravenamme.github.io/2019/10/25/oauth2.0/
느낀 점
첫날 쿠키,세션 방식으로 로그인 튜토리얼을 진행했는데 초반에 mkcert 인증서를 발급받는 과정에서 엄청나게 고생했다... 정규 시간 끝나고 나서 2시간 정도 더 하다가 결국에는 됐는데 참 힘들었다..
토큰 방식은 전과 비슷했지만 받아놓은 인증서를 그대로 복사하고 진행하면 되서 그닥 무리는 없었지만 분기 처리가 엄청나게 발목을 잡았다..
그리고 마지막 날인 오늘, 로그아웃 부분에서 진행이 안되길래 뭔가 싶었더니 useEffect 에서 콘솔에 경고가 뜨길래 일단은 dependency Array를 지워놓고 시작은 했는데 과제하는동안 까먹어서 한참을 헤맸다...결국에는 성공!
