사이드 프로젝트 버그 수정하기 - 카카오 로그인

사이드 프로젝트 버그 픽스

로컬 호스트를 기준으로 카카오 로그인이 제대로 동작돼서 아! 됐다! 하고 어~~ 카카오 구현했어요~ 했었는데 ㅋㅋㅋㅋ

실제 배포한 프로덕션 환경에서 카카오 로그인이 에러를 뱉는 것을 확인했다. 되긴 뭐가 돼... 😑

또 한가지 문제로는 카카오 로그인 진행 중에 사용자가 뒤로가기 버튼을 누르면 그 이후에도 오류를 뱉는다.

후자는 로컬 호스트에서 개발시 발견했던 문젠데 전자는 배포 환경에서 발견한 에러다.

 

현업에서 실제 배포 후에 기도 메타를 탄다는 얘길 들었던 것 같은데, 그게 뭔지 아주 조금은 알 것 같다.

분명 내가 할 때는 잘 됐는데 다른 사용자 환경에서 안 돌아가면 그건 잘못된거니까..ㅋㅋㅋ

 

소셜 로그인 카카오 구현이 제일 쉽다고 누가 그러던데

쉬운거 맞죠....?ㅠㅠ

 

세상에서 제일 재미있는 디버깅시간..!

피할 수 없으면 즐기라니까 재미있게 하기로 했다.

구현보다 더 오래 걸리는 디버깅쨩.. 오늘은 아프지 않게 금방 고쳐주세요..ㅠㅠ

 

시간이 꽤 지나서.. 하루 전 날 짠 코드도 다시 보면 기억을 못하는 관계상

어떻게 전달해달라고 하셨더라 기억이 나지 않아서 슬랙을 찾아갔다. (히스토리 추적은 역시 협업툴 🥰👍👍)

고민

본인은 인가코드만 프론트에서 받아 백엔드로 전달하는 로직을 생각했으나,

백엔드 팀원 선생님께서 프론트에서 인가 코드 획득 후 액세스 토큰까지 받아서 액세스 토큰을 백엔드로 전달해달라고 하셨다.

그래도 되는지는 아직도 의문인 게 액세스 토큰을 프론트에서 받아서 갖고 있어도 되나하는 보안 이슈가 자꾸 머릿속을 나돌아 다님..

그나마 다행인 건 https로 통신한다는 점.

PWA때문에 프론트를 https로 배포를 하면서 겸사겸사 백엔드 측에 https로 요청을 드린 건 아무리 생각해도 잘한 것 같다.

 

법적으로 문제가 된다고 하면 백엔드 선생님께 로직 수정 요청을 드리겠는데 아는 바가 없어서 무지함의 죄다. 깔깔.

근거없는 뇌피셜로 보안 이슈가 있을 것 같네요. 수정해주세요. 라고

설득력없는 요청을 드리기 싫으므로 그렇지 않을까? 생각만 하고 있다. 😶🙄

 

기능 구현 순서

아무튼 주어진 API로 할 수 있는 방법이 이뿐이니 기능 구현 순서를 생각해보면 다음과 같을 것으로 예상해볼 수 있겠다.

1. 카카오 로그인 버튼 클릭

2. 사용자가 카카오 계정 로그인

3. 리다이렉트 페이지에서 카카오에게 인가코드 요청

4. 발급 받은 인가코드로 카카오에게 액세스 토큰 요청

5. 카카오 액세스 토큰 발급 받은 후 헤더에 실어 백엔드로 전달

6. 백엔드로부터 우리 서버 액세스 토큰과 리프레시 토큰을 받음

7. 세션 스토리지에 백엔드 서버로부터 받아온 토큰 저장

 

 

대부분은 이미 이전에 구현을 해놨기 때문에

현재 버그가 발생하는 부분으로 추정되는 부분부터 다시 체크할 생각이다.

(이전에 작성했던 코드를 지우고 다시 구현하기로!)

일단 /oauth/kakao로 요청을 보냈을 때 400 응답을 받을 경우 비회원을 의미하므로

/oauth/join 으로 보내야 해서 로직이 좀 복잡하다.

 

문제는 400 응답을 받았을 때 try-catch 구문의 catch로 넘어가기 때문에 catch 구문에서 해결해야하는건데

타스형이 힘들게 한다고 찡찡대려고 했는데 어쩐 일로 스무스하게 넘어갔다. (어라, ㅋㅋㅋ)

가장 난해? 어렵다고 느낀 부분이 에러 타입지정 부분이었는데

백엔드 REST API대로 요청을 하려면 400 에러를 받아서 resultCode: "NEED_MORE_INFO" 를 받았을 때 회원가입을 시키는 로직이 들어가야하는데 에러 타입을 지정하려고하면 항상 unknown 타입이 어쩌구 저쩌구하면서 시비를 걸었던 기억이 있다.

 

assertion을 쓰는 것이 최선인가.

 

catch 구문 타입 지정 에러를 해결하기 위해서 ErrorResponse interface를 만들었다.

 

이렇게 타입에러를 핸들링했다.

 

콘솔 로그도 예상한대로 출력되는 것을 보아 data의 resultCode가 NEED_MORE_INFO일 때

백엔드 API에 따르면 서버로 request를 한번 더 요청해야한다.. 끝날 때 까지 끝난 게 아니라니

 

그러고보니 에러 타입 인터페이스를 잘못 작성해서 수정해줘야겠다.

data가 중간에 한번 중첩되는 구조였다.

 

회원가입되는거 확인하고 싶은데 탈퇴 API가 없어서 로그인 밖에 확인을 못해봐서

소셜 로그인 때문에 DB를 날려달라하기는 좀 그렇고 카카오에서 연결을 끊어버리면 될 것으로 판단했다.

 

회원가입도 잘 되는 것으로 확인했다.

이전에도 여기까지 동작하는 건 확인했었다. (다만 일부 코드는 다시 짰다는 것..!)

 

확인이 필요한 부분은 프로덕션 환경에서 에러가 나는 것과

회원가입 도중 이탈했을 때 발생하는 예외처리가 필요하다.

 

우선 발견된 부분인 회원가입 중에 취소 버튼을 누르면 홈으로 리다이렉트되도록 했다.

프로덕션 환경에서 에러가 나는 부분은 배포 서버에서 봐야 하려나.

리다이렉트 url만 로컬 호스트에서 서버 주소로 변경하고 확인하기로 했다.

 

배포 환경에서도 제대로 동작한다. (휴ㅠㅠ)

의문이 드는 건 카카오에서 연결 끊기 하더라도 실제 서비스 DB에 남아 있어서 이전 닉네임 정보가 그대로 존재했다.