10. Spring-boot와 OAuth2.0

 

참고자료

 

Spring Security + JWT를 이용한 자체 Login & OAuth2 Login(구글, 네이버, 카카오) API 구현 (7) - OAuth 2.0 로그

 

Spring Boot 3.x 버전에서 OAuth2 라이브러리를 이용하여 카카오 로그인 구현 및 OAuth2 동작원리 살펴보

 

디프만 - 디자이너와 프로그래머가 만났을 때

 

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

 

 

---

 

과정

Main 화면을 만들었고, 개발 환경 및 배포도 얼추 완성이 됐으므로,

만악의 근원인 로그인을 만들차례다.

 

Spring으로 oAuth2.0 연결

개인적으로 보편적인 로그인 방식보다, OAuth를 좋아한다.

웬 나부랭이한테 내가 자주 쓰는 ID / PW를 알려주기는 싫기 때문이다.

 

Django로 구현하면, 그냥 설정 몇 개만 툭툭하면 바로 OAuth가 적용이 된다.

Spring은 그 정도까지는 아니지만, 얼추 잘 되어 있었다.

 

yaml 파일에 세팅값을 잘 넣어줬다.

 

그리고, 지정된 Url로 접속을 하면 OAuth로그인 창이 잘 뜬다!  UI가 심플하고 이뻐서 좋다.

 

front-end에서 여기로 로그인 할 수 있게 해야하니까, flutter에서 로그인 할 수 있게

redirect-api를 만들어서 연결을 하면! -> cors 에러가 난다... 

 

---

Request로 OAuth페이지를 열면 CORS가..?

 

조사를 하고, 상상을 해본 결과는 다음과 같다.

 

 

정상적으로 OAuth 페이지에 접근 했을 때.

oAuth창을 정상적으로 열었을 때, url 을 보면 client_id같은 인증 정보가 들어가서 생성이 된다.

아마도 OAuth 인증 사이트를 여는 순간, OAuth의 인증 서버와 연결되는 것 같다.

 

oAuth를 인증을 시작한 Origin과, OAuth 페이지를 달라고 한 Origin이 달라서 발생한 것이라 추측 중이다.

그래서 request를 해서 접근을 하면 CORS가 나고, href 속성을 하면 되는 것 같다.

 

---

 

Front-end 구현

시간이 없으므로, 디자인은 대충 만들었다.

flutter에서는 다음 코드를 이용해 페이지에서 직접 열 수 있었다.

 onPressed: () {
                        html.window.open(Url.kakaoOAuthUrl, '_self');
                      }

 

---

 

Back-end 구현

로그인 시에 받는 Response를 확인해 보면,

지 마음대로 보냅니다. 하긴 이건 규칙이 없으니깐...

 

이렇게 interface가 다 다른 경우에는, 통합시켜서 관리하는게 편합니다.

이런 고민을 하다보면, 어댑터 패턴으로 자연스럽게 빠지는 것 같습니다.

 

리팩토링 구루는 최고다!

 

직접 구현하려고 이리저리 고민을 하고 있었는데,

참고 자료의 젤 처음 자료를 보면 어댑터 패턴을 쓰고있다..!

그래서 내 상황에 맞게 적당히 수정해서 그대로 채용했다.

 

피드백

Django에서는 OAuth 라이브러리 넣으면 자동으로 돼서, 자세한 과정에는 관심이 1도 없었다.

이번 삽질을 통해서 알게 된 점은, 세부적인 과정을 이해하지 않고 사용하는게 상당히 위험 하다는 것.

 

왜 CORS 에러가 나는지 당황하였으나, 따지고 보니 그럴만 하다고 납득했다.

근본을 이해하고 있어야 기술을 쓸 자격이 있다는 것을..

머리가 아닌 몸으로 이해 했다...