COOKIE
로그인 버튼을 눌렀을 때에는 마이페이지가 뜨고,
로그아웃 버튼을 눌렀을 때에는 다시 로그인 페이지로 들어오면서 로그인 상태를 유지할 수 있는 옵션도 사용할 수 있는 애플리케이션을 만드는 것.
로그인
- 로그인 버튼을 누르면 서버로 로그인 요청이 간다.
(클라이언트->서버)- 서버에서 입력받은 id, password, 로그인상태 유지할 것인지 안할 것인지의 정보를 받아서 이에 맞는 응답을 클라이언트에 보내준다. (유저 정보와 쿠키를 전달)
(서버->클라이언트)- 서버에서 받은 유저 정보를 활용해서 상태를 업데이트 한다.
(클라이언트->서버)- 리액트는 상태가 바뀌면 리렌더링디 된다. 리렌더링이 되면서 마이페이지가 표시되게 된다.
로그아웃
- 로그아웃 버튼을 누르면 서버에 로그아웃 요청이 간다.
(클라이언트->서버)- 서버는 요청을 보고 적절히 처리해서 클라이언트에 응답을 보내준다.(쿠키삭제)
(서버->클라이언트)- 응답이 잘 돌아왔다면 쿠키가 삭제되고 로그아웃이 되었다는 뜻.
마이페이지를 표시하기 위해 업데이트 되어 사용하고 있었던 상태를 비운다.
상태를 비운다는 것은 상태가 바뀐다는 뜻.(리렌더링)- 리렌더링이 되면서 다시 로그인 페이지 표시.
SESSION
쿠키와 비교하여 클라이언트 부분은 쿠키와 같고, 서버 부분에서 쿠키를 전달하고, 쿠키를 삭제하는 부분에서 세션을 전달하고, 세션을 삭제하는 것으로 바꾸면 된다.
TOKEN
쿠키 클라이언트와 동일
- 사용자가 인증 정보를 담아 서버에 로그인 요청을 보낸다
- 서버는 데이터베이스에 저장된 사용자의 인증 정보를 확인한다.
- 인증에 성공했다면 해당 사용자의 인증 및 권한 정보를 서버의 비밀 키와 함께 토큰으로 암호화한다.
- 생성된 토큰을 클라이언트로 전달한다.
- HTTP 상에서 인증 토큰을 보내기 위해 사용하는 헤더인 Authorization 헤더를 사용하거나, 쿠키로 전달하는 등의 방법을 사용한다.
- 클라이언트는 전달받은 토큰을 저장한다.
- 저장하는 위치는 Local Storage, Session Storage, Cookie 등 다양하다.
- 클라이언트가 서버로 리소스를 요청할 때 토큰을 함께 전달한다.
- 토큰을 보낼 때에도 Authorization 헤더를 사용하거나 쿠키로 전달할 수 있다.
- 서버는 전달받은 토큰을 서버의 비밀 키를 통해 검증한다. 이를 통해 토큰이 위조되었는지 혹은 토큰의 유효 기간이 지나지 않았는지 등을 확인할 수 있다.
- 토큰이 유효하다면 클라이언트의 요청에 대한 응답 데이터를 전송한다.
OAuth
클라이언트 - 로컬서버 : 애플리케이션
Resource 서버(정보담당) - Auth 서버(인증담당) : 인증중계
- 사용자가 클라이언트에 접속 후 소셜 로그인을 하기 위해 Auth 서버로 요청.
- 인증 허락해주고, 인증서버가 클라이언트에게 콜백 url에다가 Authorization코드를 같이 붙여서 보내준다.
- 클라이언트가 받은 코드를 로컬서버로 보내주고, 로컬 서버는 이 코드를 사용해서 Auth 서버에 요청한다.
- 코드를 확인한 Auth 서버는 '우리가 만든 코드가 맞다'확인 후, accessToken을 로컬서버로 보내준다.
- 이를 다시 클라이언트에 보내주고, 다시 accessToken을 받은 로컬서버는 리소스서버에다가 유저 정보를 요청한다.
- 리소스서버는 전달받은 토큰을 확인하고 제대로 된 토큰이면 로컬서보로 유저정보를 전달한다.
- 유저정보를 받은 로컬서버는 이 정보를 클라이언트에 전달해주고, 이 정보를 활용해서 애플리케이션 화면을 렌더링하게 된다.
(과제에서는 위 단계에서 마이페이지가 추가되었다.)
(코드스테이츠)
어제의 ock보다 성장한 오늘의 ock_FE 개발자