cors 오류와 oauth

이번 미션에서는 git을 써서 oauth를 구현하려고 했다.

하지만 cors에러가 났고 한참을 헤매다 아이작의 도움으로 해결했다.

 

그럼 cors 오류란 무엇인가?

https://www.youtube.com/watch?v=6QV_JpabO7g&t=147s 

이 영상을 통해 학습하자.

cors는 같은 오리진이 아닐 때 발생한다. 같은 프로토콜, 호스트, 포트번호가 아니면 cors에러가 난다는 것이다.

+ 응답도 200 ok이어야 한다.

(허락을 구하는 리퀘스트가 한번 먼저나가고 허락이 되면 다음 진짜 요청이 나간다.)

https://gisungcu.tistory.com/220

2021.05.30 기록장

그럼 하나의 페이지에서 다른 페이지에게 요청을 하면 매번 cors에러가 나는가?

 

정보를 주는 쪽에서 Access-Control-Allow-Origin를 통해 특정 오리진을 허용해줄 수 도 있고 프론트에서 프록시등을 통해 우회할 수 있다.

하지만 내가 만난 문제는 git에서 cors를 허용해주지 않았기에 나는 문제였다.

https://github.com/isaacs/github/issues/330

OAuth web flow endpoints don't support CORS · Issue #330 · isaacs/github

https://stackoverflow.com/questions/42150075/cors-issue-on-github-oauth/42150336

cors issue on github oauth

 

 

먼저 문제의 flow다

 

FE배포를 하지 않아서 localhost:3000번을 사용하신다. 근데 처음에  리액트의 fetch를 사용해서 서버/api/login을 호출 하기에 cors 에러가 난다. (리액트를 잘 몰라서 내가 이해한 fetch는 요청을 하면 리스폰스가 있어야 한다는 것이다. 그렇기에 리다이렉트 시 git에 정보를 요청하고 거기서 리스폰스가 왔는데 오리진이 달라 cors오류가 나는 것이다.)

그렇기에 서버에서 access-control-allow-origin 열어줘 봤자 오류가 나는 것이었다

 

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS) - HTTP | MDN

 

이제 아이작이 제시해준 flow를 보자

 

FE는 이제 바로 git으로 간다. 근데 fetch를 사용하는 것이 아니라 a태그나 버튼으로 새로운 창을 띄우는 것이다.

(fetch를 통해 오리진과 다른 곳의 정보를 요청하는 것이 아니라 새로운 페이지를 띄우는 것이다.)

 

oauth app의 callbackUrl을 (localhost:3000/anything)로 하면 FE에서 code를 받을 수 있다. 그런 뒤 BE 쪽으로 code를 전달해주면 BE는 왔다 갔다 하고 jwt를 리스폰스로 돌려준다.

 

마음에 안 드는 점은 callbackUrl을 localhost로 한다는 것이다. FE를 배포한다면 FE의 url로 바꿔보자.

 

두 번째 flow이다.

맨 처음의 flow에서 달라진 것은 fetch가 아닌 url로 요청한다는 것이다.

하지만 이 것의 문제는 callbackUrl이 배포서버이기에 다시 FE 쪽으로 jwt를 반환할 수 없다는 것이다.

(callbackUrl을 배포서버로 둔 이유는 code를 바로 받아서 처리하기 위함이었다.)

다 끝나고 버튼 하나만 있는 페이지를 둬서 localhost로 jwt를 다시 보내던가..

 

 

 

그래서 2번째 flow로 가는 게 가장 좋아 보인다. 

그렇게 찾아보니 다른 곳의 flow와 동일하기에 믿음이 간다.

 

 

 

 

 

https://shinsunyoung.tistory.com/86

Spring Boot에서 CORS 적용해보기

 

https://spring.io/guides/gs/rest-service-cors/

Enabling Cross Origin Requests for a RESTful Web Service

 

 

 

oauth와 jwt 구현 시 고민했던 점이다.

oauth는 그냥 인증을 위한 것이고 jwt는 로그인 유지를 위한 것이다.

 

https://stackoverflow.com/questions/44324080/how-to-store-access-token-oauth-2-auth-code-flow

How to store access token? (Oauth 2, Auth code flow)

 

 

 

 

git oauth

 

https://docs.github.com/en/developers/apps/identifying-and-authorizing-users-for-github-apps

Identifying and authorizing users for GitHub Apps - GitHub Docs

 

 

리프레쉬 토큰으로 언제 새로운 access토큰을 호출해야 할까?

access 토큰이 만료될 때마다? 슬라이딩 세션 방식은 특정 요청을 하면 그곳에서 리프레쉬 토큰을 가지고 새로운 access token을 받아오는 전략이다.

 

https://blog.ull.im/engineering/2019/02/07/jwt-strategy.html

ull.im

 

세션에 accessToken을 담는 것은 동의 못하지만  jwt의 유효시간을 보고 재발행을 요청하는 쪽은 FE이다.

BE에서 타임 아웃 에러가 나면 할 수 도 있을 거 같다.

 

https://swalloow.github.io/implement-jwt/

JWT를 구현하면서 마주치게 되는 고민들

 

 

oauth 기초 지식을 습득할 수 있다.

https://developers.cafe24.com/app/front/develop/oauth

카페24 개발자센터

 

jwt를 만들고 나서 cookie로 줄지, http authorization 헤더에 담아 줄지 고민했는데, K말에 따르면 json올 주는 것이 맞다는 것이다. 밑은 oauth에서 access_token을 줄 때의 예시이다. 

 

https://datatracker.ietf.org/doc/html/rfc6750

rfc6750

 

토큰 전략

 

http://www.2e.co.kr/news/articleView.html?idxno=208594 

OAuth 2.0 소개 [2부] : OAuth 2.0의 작동 메커니즘 - 투이컨설팅