Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feat] https로 토큰 쿠키 보내기 #173

Merged
merged 16 commits into from
Nov 29, 2021
Merged

[Feat] https로 토큰 쿠키 보내기 #173

merged 16 commits into from
Nov 29, 2021

Conversation

hyehyeonmoon
Copy link
Collaborator

@hyehyeonmoon hyehyeonmoon commented Nov 25, 2021

🔨 작업 내용 설명

📑 구현한 내용

  • 개발 환경 https로 만들기
  • cookie secure, http only 설정 만들기
  • 만료시간 체크를 라이브러리에서 직접 시간 재서 세션 스토리지에 저장
  • 로그아웃 시, cookie 제거하는 로직 만들기
  • 각 로직이 원하는 목적에 맞게 잘 동작하는지 test해보기

🚧 주의 사항

현재 일부러 access token 만료기간=5m, refresh token 만료기간 = 30m,access 쿠키 만료 시간 = 15m, Refresh 쿠키 만료 시간 = 30m으로 모두 짧게 주었습니다. 예기치 못한 오류를 발견하기에 좋을 것 같아 일부러 짧게 만들었습니다.
Front의 recoil 설정값인 oauth_email을 oauthEmail로 바꾸었습니다. 그 이유는 oauth_email과 oauthEmail이 혼용되어 사용되어서 통일되어야 사용하기 편할 것 같아서입니다. 백엔드도 db key값을 제외하고 모두 바꾸었으면 하는 바랍입니다.
다음 개발을 하기 위해 환경변수 설정을 바꾸셔야 하고 https 개발환경을 만들기 위해 아래 사항들을 따라해 주세요. 참고

$ brew install mkcert
$ cd {경로}/Web11-Donggle/client  // React 어플리케이션 루트 폴더
$ mkcert -install
$ mkcert localhost 127.0.0.1 ::1 //localhost-key.pem localhost.pem 파일들이 생성

yarn start // package.json은 start script는 제가 미리 수정해 놓았습니다

[### 스크린 샷]

  • test한 케이스들
    image

[issue | close] #[ISSUE_NUMBER]

hyehyeonmoon and others added 15 commits November 29, 2021 01:26
localhost에서 개발환경을 구성하기 위해 인증서를 받아야 함
react 개발 script를 바꿈
개발환경에서 port가 다르기 때문에 CORS 에러가 나므로 credentials 옵션을 추가
기존의 데이터를 보내는 형식에서 cookie를 secure, http only option을 제공
각 상황에 맞게 만료시간을 세션에 저장
cookie 변경됨에 따라 token, refreshToken 제거하고 맞추어 type 변경
https 설정에 맞게 fetch option 수정과 header 생성로직 제거
토큰 만료 시간 세션에 저장
에러 발생 시 access token과 refresh token을 지우고 다시 로그인하게 만듦
try, catch문이 빠진 곳에 넣음
시간이 드러나지 않도록 환경변수로 만듦
개발과 배포 환경 때 시간을 다르게 설정하기 때문에 환경변수로 만듦
unload event를 window에 걸어서 cookie를 제거하도록 함
* Refactor: #177 - fetch 중복 옵션을 getOptions 함수로 묶음

fetch option 중복되는 것을 getOptions에서 하나로다룰 수 있도록 만듦
보안을 위해 'include' 대신 'same-origin'을 사용했고 cookie가 필요하지 않은 api는 'omit'으로 만듦

* Refactor: #177 - same-origin을 include로 바꾸고 cookie 생성과 제거 중복함수 제거

same-origin과 lax을 했을 때, 요청헤더에만 오고 저장이 안되는 문제가 발생해서 include와 none으로 변경
쿠키 생성과 제거함수 중복을 제거하기 위해 일반화 함수를 만듦

* [Feat] 직접 url을 쳤을 때 들어가지 못하게 막는 protectRoute (#184)

* Feat: #182 - /github/callback 잘못된 접근 막기

code가 없는 경우 thorw error를 잡을 수 있도록 try..catch 문 안으로 넣기

* Feat: #182 - publicRoute 구현

location.state로 구분하였고 새로고침하면 location.state 값이 남아있어서 그대로 유지됨
url에 그대로 치면 location.state가 없기 때문에 안되고 console 창에 history.push를 해도 컴포넌트가 렌더링되지 않아서 위험이 적음
로그인 되어있지 않은 상황에서는 url을 직접 치면 모두 튕겨냄
로그인 되어 있는 상태에서 loading 페이지는 privateRoute에 의해 사용되기 때문에 loadingPage에는 직접 못들어가지만 로그인은 유지되는 현상을 볼 수 있음
개발환경은 origin이 다르고 스킴이 달라서 따로 설정을 해주었지만 배포 환경은 그렇지 않음
도커로 배포환경과 맞출 수 있으므로 배포환경과 같게 설정
@hyehyeonmoon hyehyeonmoon merged commit 59ab96e into dev Nov 29, 2021
@isanghaessi isanghaessi deleted the feat/https_cookie branch December 2, 2021 03:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant