[💻 코드스테이츠 FE 44기] ✨야간자율학습반✨ Cookie/Session , Token , OAuth2.0 과제 인증 흐름 그림으로 정리

✔️ 시작

이번 종합 퀴즈와 과제의 결과가 좋지 못해 야간자율 학습반에 선정하게 되었다.
Cookie/Session 튜토리얼, Token 과제, OAuth2.0 과제의 인증 흐름을 그림으로 정리하여 블로깅 작성하게 되었다.

---

📍 Cookie/Session , Token , OAuth2.0 과제 인증 흐름 그림으로 정리

오늘 학습한 내용

• 쿠키가 무엇인지 이해한다.
• 쿠키를 이용한 세션인증 과정에 대해 이해한다.
• 토큰기반 인증의 작동 원리를 이해한다.
• OAuth 인증의 주요 용어를 이해하고 기억한다.

로그인 화면을 구현하는데 Cookie/Session , Token , OAuth2.0 방식으로 계정 저장 방법을 진행했다.

🍪 쿠키(Cookie)

1. 클라이언트는 서버로 로그인 요청을 보낸다.
(아이디, 비밀번호, 로그인 저장 체크 여부)

2. 서버는 클라이언트의 요청을 확인하고 로그인 요청 처리해서 응답해 준다.

• 요청으로 전달 받은 정보가 회원가입 되어 있는지 확인
• 회원인 경우 응답에 쿠키와 회원 정보 담아 전달
  3. 클라이언트는 서버에게 응답 받아 React 상태를 업데이트 한다.

4. 클라이언트는 조건부 렌더링으로 Mypage를 표시한다.

• 로그인 할 때 "로그인 저장" 체크 했을 경우 새로고침해도 다시 로그인 할 필요 없이 서버에서 받아온 쿠키 사용해 회원 정보를 받아온다.
• 로그아웃하지 않는 이상 설정한 쿠키 유지 시간 만큼 자동으로 로그인이 유지

5. 클라이언트는 로그아웃 버튼 클릭 시 서버에 로그아웃 요청 보낸다.

6. 서버는 클라이언트에서 받은 로그아웃 요청을 처리한다.

• 쿠키 삭제하고 클라이언트로 응답 보낸다.

7. 클라이언트는 응답이 잘 돌아오면 React 상태를 초기화한다.(상태 비움)

8. 클라이언트는 상태가 초기화 되었기에 화면을 조건부 리렌더링으로 로그인 페이지를 표시 한다.

• 쿠키는 http의 무상태성을 보안해주는 도구이지 쿠키 자제는 인증이 아니다.
• 브라우저에서만 존재한다.

📝 세션(Session)

세션은 쿠키에서 2, 6번에서 전달 하는 쿠키를 세션으로 변경하는 거 뿐이다.

• 신뢰할 수 있는 유저인지 서버에서 추가로 확인할 수 있다.
• 쿠키보다 보안성이 높아지지만 서버에 부담을 준다.

🪙 토큰(Token)

1. 사용자가 인증 정보를 담아 서버에 로그인 요청을 보낸다.
2. 서버는 DB에 저장된 사용자 인증 정보를 확인한다.
3. 인증 성공 시 해당 사용자의 인증/권한 정보를 서버의 비밀 키와 함께 터큰으로 암호화 한다.(토큰 생성 + 서버 비밀키)
4. 생성된 토큰을 클라이언트에게 전달한다.

• HTTP에서 인증 토큰을 보내기 위해 사용하는 헤더인 Authorization헤더를 사용하거나
• 쿠키로 전달하는 등의 방법으로 사용한다.

5. 클라이언트는 전달받은 토큰을 저장한다.

• 저장하는 위치 (Local Storage, Session Storage, Cookie 등 다양함 - 개발하는 서비스 목적에 맞춰 작업)

6. 클라이언트는 서버로 리소스를 요청할 때 토큰을 함께 전달한다.

• 토큰을 전달할 때도 Authorization헤더 사용하거나 쿠키 사용

7. 서버는 전달 받은 토큰을 서버의 비밀 키를 통해 검증한다.
   (토큰이 가짜인지 유효기간이 지났는지 등을 확인할 수 있다.)
8. 토큰 유효할 경우 클라이언트의 요청에 대한 응답을 전송한다.

• 세션 기반 인증 방식의 한계를 극복하고자 고안되었다.
• 클라이언트가 인증 정보를 보관한다.
• 토큰 또한 완벽한 보안 방법이 아니다. 인증 상태를 관리하는 주체가 아니기에 탈취되어도 토근을 강제 만료할 수 없다.
• 많은 데이터를 담을 수 있는 만큼 암호화 과정도 길어지고 토큰의 크기도 커져 네트워크 비용 문제가 있다.

🤝 OAuth(인증을 중개해 주는 메커니즘)

1. 사용자가 사이트 접속을 한다.
2. 클라이언트는 Github Authorization 서버에 로그인 요청을 보낸다.
3. Github에서 권한 허락 페이지에서 허락 페이지를 클릭한다.
4. Github는 클라이언트에 Authorization code를 전달해 준다.
5. 클라이언트에서 받아온 Authorization code를 서버의 /callback 엔드포인트로 전달해 서버에서
6. Github Authorization 서버에게 Access token 발급을 요청한다.
7. Github Authorization는 요청 받은 Access token을 전달한다.
8. Access token 발급받은 token을 클라이언트에 전달한다.
9. 클라이언트는 발급 받은 token으로 조건부 처리해 로그인 후, Mypage 페이지로 이동하고
10. Access token을 이용해 /userinfo로 요청한다.
    11, 12. 13. 로컬 서버의 리소스인 serverResource와 Github Resource 서버에 요청한 리소스인 githubUserData가 응답으로 전달된다.

잘 모르는 부분

• 쿠키를 생성, 삭제하고 환경 변수를 전달하는 부분을 잘 몰랐다.
  - res.cookie, res.clearCookie, process.evn.변수명
  

어려웠던 부분

• .evn 활용하는 방법을 잘 몰라서 헤멨던 거 같다.
  - React의 경우 process.env.React_APP_변수명으로 작성해 줘야한다.
  - React는 require('dotenv').config();
• 로그아웃 하는 경우 토큰을 삭제해야하기 때문에 post가 아닌 delete로 처리해 주어야 한다.
  - 전달하는 데이터는 data로 감싸줘야한다. data:{accessToken}

axios.delete('http://localhost:4000/logout', {data:{accessToken}})

---

✏️ 느낀점

Cookie/Session , Token , OAuth2.0 으로 처리하는 방식이 비슷하면서 달랐던 거 같다.
이번 계기로 백엔드의 흐름을 알 수 있었고 프로젝트 진행 전 미리 파악해 두어도 괜찮다 생각이 들었다.

아직 헷갈리는 부분이 많아 좀 더 공부해야 봐야겠다.
(너무 어려워....)