2차 프로젝트인 CGV 웹사이트 클로닝 중 kakao login을 구현하려 했을 때 공식문서에서 헷갈렸던 점을 얘기해본다.
크게 내가 프로젝트에서 쓸 수 있는 공식문서에서 제공하는 구현방식은 두가지였다.
- REST API
- javascript sdk
전자는 카카오 뿐만 아닌 많은 소셜로그인에서 범용적인 방법이였고 후자는 카카오에서 제공하는 메소드들을 이용하여 간단하게 로그인을 구현하는 방식이였다.
REST API 의 flow는 대충,
사용자가 로그인을 버튼을 누르고 유저 정보를 입력 --> 카카오에서 동의서를 유저에게 주고 유저는 동의항목을 체크 --> 카카오는 인증코드를 브라우져(프론트엔드로)에 전달하고 --> 브라우져는 인증코드를 서비스서버(백엔드로)로 전달 --> 그럼 백엔드는 받은 인증코드를 다시 카카오서버에 전달하여 유저의 정보를 가져오고 --> 가져온 정보를 서비스서버(백엔드)에 저장을 한 후 토큰을 브라우져(프론트)에 전달 --> 토큰 받은 브라우져는 로그인 완료 처리 --> 그럼 토큰이 있는 해당 브라우져를 사용하는 사용자는 로그인 완료 된 것으로 간주.
이렇게 되는 것인데...
일단 여러 블로그, 유튜브 동영상, 공식문서를 참고한 후 sdk로 구현하기로 하였고 방법자체는 쉬웠다.
문제는 사용자가 로그인 버튼을 누르고 쭉 진행이 되면 인증코드가 브라우져로 날라오는 것이 아니고 access_token이 카카오 서버에서 프론트로 날라왔다. 나는 그 access_token이 인증코드라고 생각하여 백엔드에 넘겨주었고 백엔드는 해당 토큰으로 나머지 작업을 진행하여, 브라우져에 서비스 관련 토큰을 프론트로 던져준다. 여기서 문제! 브라우져의 로컬스토리지에는 현재 카카오에서 받은 access_token과 백엔드에서 던저준 token 이렇게 2개가 저장되었다. 뭐가 문제냐고? 토큰은 원래 한개가 저장되는 것이 정상인데 2개라고....
이건 공식문서를 제대로 안읽어본 나의 삽질이라 할 수 있다.
원래 javascript sdk에서도 2가지 로그인 방식을 제공한다.
- 기본 로그인
- 고급 팝업 로그인
기본 로그인은 REST API 방식과 마찬가지로 인증코드를 받아오는 방식이다. 프로젝트에서 원래 이걸 쓰려고 했던 것이지만...
유튜브 동영상에 심취한 나머지 난 차이점도 모르고 고급팝업 로그인 방식으로 구현하였다.
고급팝업로그인은 보니 카카오에서 유저정보와 토큰을 모두 관리를 해주어, 백엔드에서는 딱히 토큰을 제공할 필요 없고 프론트가 카카오에서 받아오느 토큰 내에 포함되어있는 유저정보만 백엔드에 넘겨주면 회원가입 또는 로그인이 완료된다. 여기서 말하는 토큰이 바로 위에 상기한 카카오의 access_token이였다. 결국 이거 하나로 다 되는 것인데 난 굳이 이걸 백엔드로 보내서 백엔드는 또 다른 토큰을 가공하여 던져줬으니 브라우져의 토큰이 2개가 될 수 밖에.. 쯧쯧.. 어쩐지 백엔드 팀원도 뭔가 좀 이상해요~ 를 남발하였지만 내가 그걸 이해하고 알아차리기에는 너무 무지하였다.
당연한 것은 아니겠지만 일반적으로 REST API는 웹개발 쪽에서 sdk는 앱개발쪽에서 더 많이 쓰인다더라. 물론 sdk를 이용하여 웹 쪽 로그인을 구현해도 된다. 나도 그렇게 해보니 되긴 되더만.
일단 위의 이유로 기본 로그인으로 구현을 못해봤지만, 고급팝업 로그인의 문제가 있음을 보았다 (알고보니 기본로그인도 이 문제가 있다더라). 로그인 한 유저가 로그아웃 후 해당 브라우져에서 다시 로그인을 누르면 비밀번호 등을 치지 않아도 자동으로 재로그인이 되더라. 내 폰에서는 매번 로그인 할 때마다 아이디와 비밀번호를 치라고 나오면 아주 귀찮으니 왠만하면 그냥 자동로그인 시키자라는 카카오 측의 유저 경험을 올려주려는 의도적인 진행 방식이였다. 즉 로그아웃을 해서 서비스에서는 토큰들을 로컬스토리지에서 삭제 할 수는 있지만 카카오에서는 유저정보를 캐쉬/쿠키에다 저장해놓아 좀 더 빠른 로그인을 진행 할 수 있도록 한 것. 하지만 이게 왜 문제냐면, 만약 내 폰이 아니고 PC방 브라우져로 로그인을 했다면? 로그아웃을 했는데 다른 유저가 룰루랄라 들어와 로그인을 누르니 바로 전 유저의 아이디로 그냥 자동로그인이 되네? 그 이후의 문제는 상상도 하기 싫다. 어쨋든 아이디/비밀번호 입력창을 보려면 브라우져의 캐시/쿠키를 삭제해야한다.
아, 공식문서에 "연결끊기"라는 기능으로 위의 문제를 해결할수 있다고 들었는데 확실하진 않지만 해당 방법은 서비스에서의 "탈퇴"라는 개념이 있고 이것보다는 로그인을 구현할때 주소스트링 (나도 아직 못해봐서 정확하게는 모르겠다) 어딘가에 "=login"을 추가하면 항상 로그인 시 아이디/비밀번호 입력창이 나온다고 한다. 공식문서를 읽어보자~
