구글 로그인, apple로그인 구현, 기존 카카오톡 로그인 사용자를 위한 데이터 이전 로직 구현

[jaeml06]

PR의 목적이 무엇인가요?

기존의 카카오톡 로그인을 더이상 지원하지 않고 apple로그인과 구글 로그인을 지원하게 되었다. 이를 구현하고, 기존 카카오톡 로그인 사용자를 위해 데이터 이전 로직이 필요하다.

이슈 ID는 무엇인가요?

• 553

설명

구글 로그인과 애플 로그인을 구현하였다. 애플 로그인의 경우 기존 카카오톡 로그인과 같은 oauth2.0을 수동으로 구현하였다. 흐름은

1. apple 로그인 하기 버튼 클릭
2. apple 로그인 페이지로 이동
3. 로그인
4. 애플로서 리다이렉션 url에 code를 쿼리로 붙여서 전달
5. OAuthLoginPage 컴포넌트에서 url에서 code를 추출하여 서버로 전달
6. 서버에서 access_token을 받아옴
7. 로그인 완료 와 같이 진행된다.

이와 다르게 구글 로그인에 경우, oauth2.0을 수동으로 구현할 수 있었으나, 서버에서 code를 검증할 때 문제가 파악할 수 없는 문제가 발생하여 https://developers.google.com/identity/gsi/web/guides/overview 다음 링크를 통한 방식으로 구현하게 되었다. GIS(Google Identity Services)를 이용하여 로그인을 하는데 설명을 읽어보면

Google 계정으로 로그인은 맞춤설정된 버튼, 원탭, 자동 로그인, 승인 등 여러 관련 서비스를 포괄하는 단일 SDK를 제공합니다. 표준 OAuth 및 OpenID Connect 프로토콜보다 더 쉽고 안전한 환경을 개발자에게 제공하는 동시에 더 원활한 사용자 환경을 제공하는 것을 목표로 합니다.

라고한다. 실제로 로그인 버튼을 구글에서 제공하는 버튼으로 넣기만 하면 자동으로 JWT로 암호화된 idToken을 가져온다. 이 idToken을 서버로 보내면 로그인이 된다.

다만 현재 이 방식에서도 문제가 발생한다. 간혈적으로 구글 로그인 버튼이 사라지는 문제인데 dev.mouda.site에서 처음 접속했을 때는 정상적으로 로그인버튼이 보인다. 이때 새로고침을 하게 되면 로그인 버튼이 사라지게 된다. 그리고 개발자 모드를 킨 상태에서는 로그인 버튼이 보인다. 해당 문제가 발생하는데 도데체 왜 이런 문제가 발생하는 문제가 생긴다. 프론트 인원 중 시간이 있는 인원에게 도움을 청한다. PR을 쓰는 시점에도 왜 이런 문제가 발생하는지 모르겠다.

https://github.com/user-attachments/assets/72a994a7-5e63-42b8-8348-ece8a519c2d1

다음은 기존 사용자의 데이터 이전을 위한 로직이다. 해당 로직은 아래의 문서로 제출하겠다. https://successful-jeep-771.notion.site/e598b8b22f8643eea759859d0df35aad?pvs=4

질문 혹은 공유 사항 (Optional)

간혈적으로 구글 로그인 버튼이 사라지는 문제인데 dev.mouda.site에서 처음 접속했을 때는 정상적으로 로그인버튼이 보인다. 이때 새로고침을 하게 되면 로그인 버튼이 사라지게 된다. 그리고 개발자 모드를 킨 상태에서는 로그인 버튼이 보인다. 해당 문제가 발생하는데 도데체 왜 이런 문제가 발생하는 문제가 생긴다. 프론트 인원 중 시간이 있는 인원에게 도움을 청한다. PR을 쓰는 시점에도 왜 이런 문제가 발생하는지 모르겠다.

역시 stackoverflow는 신이다. 찬양하도록 하자 https://stackoverflow.com/questions/70993933/why-does-the-sign-in-with-google-button-disappear-after-i-render-it-the-second-t 이것으로 해결할 수 있는지 일요일쯤 다시 테스트해보도록 하겠다.

[Mingyum-Kim]

오 그래도 문제 해결 방법을 찾은 것 같네요 해결 되면 다시 연동 테스트 해 보아요 ~

[hoyeonyy]

지원 가능한 백엔드 등장