[D+135] Final Project : 15일차(1) 카카오 소셜 로그인

 

 

D+135

-  Final Project : 15일차 -

( 포스트맨으로 카카오 API 테스트 )

 

---

 

 

오늘은 소셜로그인에 대해 구현을 진행해 보았으며,

카카오에 등록한 내 정보가 포스트맨을 통해서 나오는 것을 통해 확인해보고 신기하다는 것을 느꼈다.

 

중간에 공식문서를 제대로 확인해보지 않아서 약간 삽질을 하기는 했지만

그래도 문제를 해결하게 되어서 너무나 다행이었다.

 

우선은 데이터를 가져오는지를 확인하기 전에 'kakao devleopers'에 내 앱을 만들어줘야 한다.

Kakao Developers

 

그러면 앱에 대한 키들이 있는데 정보가 타인에 의해 사용되지 않도록 주의해야한다.

 

 

이제 본격적으로 API를 사용하기 전에 [앱설정] - [플랫폼] 에서 도메인이 제대로 설정이 되었는지 확인하고

밑에 Redirect URI도 제대로 설정 되었는지 잘 확인해야 한다.

 

 

본격 포스트맨으로 테스트를 하기 전에 카카오로부터 어떻게 정보를 받아오는지에 대해 간략하게 말하자면

먼저 내가 가지고 있는 client_id(REST API키)를 통해서 카카오로부터 인가코드를 받아오고

이 인가코드를 통해 다시 요청을 보내 액세스토큰과 리프레시 토큰을 받아와 회원의 정보를 받아오면 된다.

 

말로하면 이해하기 어려울 수 있으니 이제 본격적으로 카카오에서 내 정보를 뽑아오자.

 

 

STEP 01 > 인가코드 받아오기

인가코드를 받아오기 위해서는 Rest API에 있는 문서를 확인하고 양식에 맞춰서 url을 작성해준 다음에

주소창에 검색을 시도해 본다.

 

카카오 API에서 요구하는 양식에 맞춰서 url을 주소창에 넣어주면 카카오 로그인을 진행하라는 창이 뜨게 되는데

일단 입력란에 값을 넣엇 로그인버튼을 눌러준다.

 

그러면 화면창에서는 특별한 변화는 없을 수 있으나 주소창을 확인해보면

code라고 적힌 이후에 문자열이 나와있는 것을 확인 할 수 있다.

 

이것이 바로 인가코드가 되는 것인데 'code='이후의 값들을 복사해준 다음에

포스트맨을 이용해 토큰을 부여받는 테스트를 진행해보려 한다.

 

STEP 02 > 토큰 받아오기

토큰을 받아오는 것 부터는 포스트맨을 활용하면 되는데 아까 우리가 복사한 인가코드를 code 값에 넣어주면 된다. 

 

그리고 client_secret은 환경설정에 들어가서 ON으로 설정되어 있을 경우엔

값을 넣어주어야 하므로 제대로 확인해보고 진행해야 한다.

 

이때 제일 중요한건 Content-type인데 json형식이 아니라 application/ x-www-form-urlencoded 이므로

제대로 형식에 맞춰서 작성해줘야하며, Headers에도 입력해줘야 토큰이 제대로 받아져 온다.

 

포스트맨으로 작성해 준 모습으로 Headers에서도 Content-Type을 지정해 주는 것 잊지 않도록 한다.

 

요청했을시에 이렇게 토큰이 오는 것을 확인 할 수 있다.

 

이제 이 토큰을 이용해서 회원의 정보를 불러올 수 있다.

 

STEP 03 > 회원 정보 불러오기

액세스 토큰을 가져왔다면 사실 다른 건 다 구현이 가능하다는 것이기 때문에

자기 입맛에 맞게 API를 사용하면 되기는 하는데 우리는 회원의 정보를 알아야 해서 회원 정보를 불러왔다.

 

마찬가지로 이것도 포스트맨으로 정보를 불러올 수 있는데

이때에는 Authorization에서 Bearer 형식으로 타입을 지정해 주고 액세스토큰을 넣어준 다음에

STEP 02 와 같은 방식으로 Headers에 Content-type으로 값을 넣어서 send하게 되면

로그인한 회원의 정보가 응답하는 것을 확인할 수 있다.

(해당 캡처본은 개인 정보가 포함되어 있어 생략합니다 😅)

 

포스트 맨으로 연습도 해봤겠다 이제 본격적으로 코드로 직접 구현을 해보도록 하자!!

(코드로 직접 구현 하는건 다음 게시글에 ...)