GPTea☕️ JavaScript SDK를 이용한 카카오 로그인 로직 수정

1. AccessToken 이용해서 unlink 요청

초기에 구현할 때 unlink 요청은 accessToken으로 하면 요청 에러가 발생했다. 요청 파라미터가 부족하다는 에러가 자꾸 났었다. 구글링을 해보니 어떤 인턴하셨던 분께서 정리해놓은 글에도 똑같이 accessToken방식은 요청이 계속 실패한다는 글을 보고 나도 Admin키로 요청하고 있었다.

그런데 오늘 다시 로그인 부분 코드를 수정하고 있는데 문서에 다음과 같은 글을 보았다. 어드민 키는 서버에서만 사용하라는 것.

오늘 AccessToken으로 요청해보니 성공했다. 😳 AccessToken을 사용해서 요청하는 방법으로 바꾸기로 했다.
어드민 키로 요청을 하기 위해서 사전에 user_id가 필요했는데, IDtoken을 추가적으로 받고 파싱해서 userId를 추출해내서 사용하고 있었다. 이 작업을 줄일 수 있어서 더욱 잘됐다. 

 

2. 소셜로그인 토큰 SessionStorage 사용

공식 문서에 JavaScript SDK로 인가코드를 받더라도 AccessToken을 받을 때에는 REST API로 토큰 받기 요청을 하라고 되어있다. API와 SDK의 개념이 잘 잡히지 않은 상태에서 무작정 따라하다보니 로그아웃과 계정삭제 요청 또한 REST API로 하고 있었다.

API는 다른 프로그램끼리 소통할 수 있는 수단, 요청과 응답을 주고받을 수 있는 방법인데
SDK는 Software Development Kit, 프로그램을 개발하는데 도움이 되는 도구이다. API를 포함하여 추가적으로 구현이 되어있는 더 큰 상위 개념이라고 할 수 있다.

그래서 로그아웃을 구현할 때 AccessToken 삭제 API 요청을 하고 후속작업을 직접 해주는게 아니라, SDK로 logout 함수를 실행함으로써 AccessToken도 삭제되고 세션 스토리지에서도 삭제가 되는 등 작업을 한 번에 할 수 있다.

공식문서에 카카오 JavaScript SDK로 다른 API를 호출하려면 로그인 후 Kakao.Auth.setAccessToken을 호출하라고 쓰여있다. 해당 함수를 실행하면 AccessToken이 세션 스토리지에 저장된다. GPTea에서의 소셜로그인은 GPTea 서비스에 가입하고 GPTea Token들을 받기 위한 일회성 수단일 뿐이라서 탭을 종료하면 자동으로 사라지는 세션 스토리지를 사용하는 것이 더 좋을 것 같다. 단, GPTea AccessToken과 RefreshToken은 자동로그인을 위해 유지되어야 하므로 그대로 로컬 스토리지를 사용했다.

 

카카오 로그인 구현

1. 로그인

SDK kakaoLogin.Auth.authorize({Redirect_URI}) -> 인가코드 발급
REST API 토큰받기 요청
SDK Kakao.Auth.setAccessToken(accessToken) -> 추후 SDK로 로그아웃/계정삭제 API 이용하기 위해 세션스토리지에 AccessToken 저장

2. 로그아웃

SDK kakaoLogin.Auth.logout()

3. 계정삭제

SDK kakaoLogin.API.request({url: ‘/v1/user/unlink})