프로젝트/Beatn-beat [비튼 - 비트]

10. Spring-boot와 OAuth2.0

2024. 2. 11. 14:24
목차
  1. 참고자료
  2. 과정
  3. Spring으로 oAuth2.0 연결
  4. Request로 OAuth페이지를 열면 CORS가..?
  5. Front-end 구현
  6. Back-end 구현
  7. 피드백

 

참고자료

 

 

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

본격적으로, 프로젝트에 사용된 OAuth 2.0 로그인 관련 클래스 코드를 설명드리고자 합니다! 들어가기 전 OAuth 관련 패키지 구조는 다음과 같습니다. OAuth2Service를 생성하기 위해 spring-boot-starter-oauth

ksh-coding.tistory.com

 

 

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

회사에서 소셜 로그인을 구현해야 할 업무가 생겼는데 마침 진행하고 있는 프로젝트의 Spring Boot 버전이 3.0.4여서 Spring Boot 3.x 버전에서 OAuth2 라이브러리를 이용하여 카카오 로그인을 구현하고

kim-jong-hyun.tistory.com

 

 

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

개발자 X 디자이너 간 연합 동아리인 디프만의 공식 repository 입니다. 디프만 - 디자이너와 프로그래머가 만났을 때 has 332 repositories available. Follow their code on GitHub.

github.com

 

 

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

악명 높은 CORS 에러 메세지 웹 개발을 하다보면 반드시 마주치는 멍멍 같은 에러가 바로 CORS 이다. 웹 개발의 신입 신고식이라고 할 정도로, CORS는 누구나 한 번 정도는 겪게 된다고 해도 과언이

inpa.tistory.com

 

 


 

과정

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 에러가 나는지 당황하였으나, 따지고 보니 그럴만 하다고 납득했다.

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

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

 

저작자표시 비영리 변경금지 (새창열림)

'프로젝트 > Beatn-beat [비튼 - 비트]' 카테고리의 다른 글

12. Nginx로 같은 host에서 운영하기  (0) 2024.02.14
11. 인증과의 전쟁  (0) 2024.02.12
9. Flutter web CI/CD 적용  (0) 2024.02.08
8. Positioned.fill 버그 발견 및 해소  (1) 2024.01.29
7. Flutter 개발 환경 Setting  (0) 2024.01.29
  1. 참고자료
  2. 과정
  3. Spring으로 oAuth2.0 연결
  4. Request로 OAuth페이지를 열면 CORS가..?
  5. Front-end 구현
  6. Back-end 구현
  7. 피드백
'프로젝트/Beatn-beat [비튼 - 비트]' 카테고리의 다른 글
  • 12. Nginx로 같은 host에서 운영하기
  • 11. 인증과의 전쟁
  • 9. Flutter web CI/CD 적용
  • 8. Positioned.fill 버그 발견 및 해소
코딩 악귀
코딩 악귀
고민하고 발전하는 코더의 발자취.
가짜 개발자고민하고 발전하는 코더의 발자취.
코딩 악귀
가짜 개발자
코딩 악귀
전체
오늘
어제
  • 분류 전체보기 (48)
    • 프로그래밍 언어 (10)
      • Python (1)
      • Java (2)
      • MySQL (7)
    • 개발 관련 (7)
      • Agile (4)
      • 마음가짐 (2)
      • 셋업 (1)
    • 알고리즘 (12)
    • 프로젝트 (18)
      • Beatn-beat [비튼 - 비트] (17)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

최근 댓글

최근 글

hELLO · Designed By 정상우.
코딩 악귀
10. Spring-boot와 OAuth2.0
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.