[D+135] Final Project : 15일차(2) 카카오 API로 소셜로그인 구현하기

 

 

D+135

-  Final Project : 15일차 -

( 카카오 소셜 로그인 구현하기 )

 

---

 

 

포스트맨으로 카카오 API를 이용해 내 정보를 불러오는 것 까지 연습해 보았다면

이번에는 직접 코드를 작성해서 구현해 보는 시간을 가져보았다.

 

사실 코드는 생각보다 어렵지는 않았는데 공식문서를 제대로 들여다 보지 않아서 

여러번 삽질을 시도해본 끝에 다행히(?) 돌고돌아서 내 정보를 불러오는데 성공하였다.

 

사실 소셜로그인을 구현하기전에 팀원분과 회의를 진행했었는데

당시에 우리가 토큰을 구현을 다 하지 않은 상태로 소셜로그인으로 넘어왔기 때문에 토큰이 머릿속에 남아있는 상태였는데

카카오에서 액세스 토큰과 리프레시 토큰을 받아오는 것을 보고

우리가 만든 토큰과 카카오에서 오는 토큰이 충돌이 나면 어쩌지 하는 고민을 엄청 많이 했던 것 같다.

 

그래서 이 충돌을 막기 위해 카카오 토큰을 어떻게 관리해줘야 하지라는 엄청 깊은 고민을 했었는데

생각해보니 내가 카카오에서 액세스토큰을 받아오는 이유는 단순히 카카오에서 정보를 불러오는 목적으로 가져오는 것이기 때문에

다른 목적으로 해당 토큰을 사용할 이유가 없다는 것을 조금 늦게 깨닫게 되었다.

 

그래서 우리 팀은 카카오에서 받아오는 토큰은 정보를 받아올때만 사용하고 나머지 인증과정에서 필요한 토큰은

따로 우리가 만든 토큰을 이용할 수 있게 하자라는 계획을 세울 수 있었다.

 

 

그래서 우리는 클라이언트로부터 인가코드를 받아오기 때문에 

받아온 인가코드를 axios를 통해서 값을 불러오려는 시도를 하였지만

콘솔을 돌려보았지만 요상한 에러만 나타날 뿐 데이터를 받아올 수 없었다..... ㅠㅜ

 

그래서 우리는 카카오로부터 정보를 잘못 전해줬을 것이라는 생각에

카카오 로그인에 대한 정보를 엄청나게 검색하고 시도해보았지만 결과는 똑같았다.

 

포스트 맨에서는 제대로 작동이 되었는데도 불구하고 결과가 안나와서 약간 멘붕상태였는데

생각해보니 나는 이전에 axios로 요청할때 content-type을 application/x-www-form-urlencoded 형태로 값을 보내본 적이 없다.

 

항상 json형식으로 보내왔는데 혹시 타입이 문제가 있어서

요청이 제대로 가지 않는 것일까 싶어서 검색을 해보았더니 

 

역시나... axios는 데이터를 보낼 때 JSON 형식으로 데이터를 전송하는 것 같았다.

 

그래서 form타입의 데이터는 제대로 요청이 가지 않는 것이라는 것을 알게 되었다.

 

이에 대한 해결방안은 axios에서 해당 타입의 정보를 보내기 위해서는 'qs'라는 모듈을 함께 사용하는 것이었고,

qs는 보안이 추가된 쿼리 문자열 구문을 분석하고 이를 문자열화 해주는 라이브러리라고 한다.

 

qs

 

그래서 qs를 이용해 데이터를 전송해 주었더니 콘솔로그로 토큰을 제대로 받아오는 것을 확인하였다.

 

이 이후에 다시 .then을 사용해 받아온 토큰으로 회원정보를 불러오고

회원정보를 이용해 DB의 데이터값을 추가하고 JWT 토큰을 생성하여

카카오 소셜로그인 구현을 완성하였다.

 

오늘은 사실 여러 방면으로 삽질을 하기도 했고, 외부에서 데이터를 제대로 불러오는 과정이

어찌나 뿌듯한지....

 

오늘의 결론 ) 공식문서를 잘 읽자 !!!

 

 

---