[OAuth2.0] 카카오 로그인 구현

카카오 로그인(React, node.js)

들어가며,

카카오 로그인을 구현하면서 정말 많은 삽질을 하였다.

나의 경우 passport를 이용하다가 이해가 가지 않아 다시 공식 문서를 참고하여 Rest API를 이용.. 그러던 와중 결국 프로세스를 깨달아 버려서 해당 내용을 글로 정리하고자 한다.

이번 글에서는 kakao developer사이트의 공식 REST API활용한 방법에 대해 알아본다.

카카오 디벨로퍼 등록

카카오 로그인을 구현하기 위해서는 카카오 디벨로퍼 등록을 진행해야 합니다.관련하여서는 따로 다루지 않으나 추후 추가할 가능성도 있습니다.

RestAPI

RestAPI를 이용하는 방법은 공식 문서에 잘 나와있다. 하지만 이는 조금 아는 사람들에 해당하는 말이고 이를 처음 접한 나로써는 읽기 너무너무 어려웠다. 아무것도 모르던 나라고 생각하고 설명을 해보겠다.

출처 : kakao developer, Rest API, 카카오 로그인 과정 https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#before-you-begin-process _

해당 프로세스에 대해 클라이언트(react)와 서버(node.js) 그리고 카카오 서버의 역할을 간단하게 설명하자면, 아래와 같은 과정을 거치면 된다.

1. 클라이언트 -> 카카오 서버 -> 클라이언트

카카오 로그인 권한 & 인가코드 요청 및 발급

2. 클라이언트 -> 서버

인가 코드 전달

3. 서버 -> 카카오 서버 -> 서버

토큰 요청 및 발급

4. 서버 -> 토큰 전달 및 활용

 

구현

(저의 경우 굉장히 러프하게 구현하였습니다. 참고하시길 바랍니다.)

위 과정을 하나하나 시작해보도록 하자.

 

클라이언트에서 카카오 서버로 로그인 권한 & 인가코드 요청 및 발급.

GET /oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code HTTP/1.1
Host: kauth.kakao.com

카카오 developer에서 설명하는 인가코드를 요청하는 방법은 위와 같다. 

살펴보자면, 디벨로퍼 사이트에서 등록한 RestAPI KEY와 Redirect URL이 필요하며, 해당하는 두 변수를 위 주소에 대입하여 GET/ 요청을 보내면 된다는 뜻이다. 이 때 호스트는 kauth.kakao.com이다. 이를 코드로 구현을 해보자.

GET/ 요청을 보내면 해당 Redirect URL로 진입하게 되며, 이 때 로그인과 권한 동의 등에 대한 항목이 뜨고, 인가코드를 받을 수 있다. 현재 페이지를 바꿔주는 window.location.href를 통해 get 요청을 보내도록 하였다.

 

이 때 주의할 점은 프론트 측에서도 해당 진입 페이지를 구현해주어야 한다는 것이다.

진입 페이지를 위해 라우트를 구현해 주었다.

이제 로그인 버튼을 클릭하면 로그인 및 동의가 진행되고, 이것이 완료되면 /auth/kakao.oAuth페이지로 진입하게 된다. 페이지에 진입하면 인가코드는 아래 사진과 같이 주소에 쿼리 형식으로 존재한다.

이 code= 후면에 오는 검은색으로 가려진 부분이 인가 코드이다. 인가 코드를 받았으니 이제 이 코드를 서버측으로 보내 토큰을 받아보도록 하자.

서버에게 인가코드 전달

클라이언트에서 서버에게 인가코드를 보내는 것은 간단하다. axios, fetch등을 이용하여 보내면 된다.

내 주소의 code부분을 잘라서 변수에 저장해준다. useParam을 이용해도 되고 편한 방법으로 저장하도록 하자.

이후 각자의 서버측 라우터로 code를 담아 통신을 보낸다.

그리고 각자의 서버에서 req.body.code를 확인해보면 !!

인가코드가 도착해있다. 이후 이 코드를 바로/변수에 담아 토큰을 발급받는데 활용한다.

서버에서 카카오서버로 토큰 요청 및 발급.

kakao developer에서 토큰 받기 항목을 보자. API사용법으로는

POST /oauth/token HTTP/1.1
Host: kauth.kakao.com
Content-type: application/x-www-form-urlencoded;charset=utf-8

라고 말하고 있다. 해석은 1.에서 해석과 같다. 위 주소에세 POST/ 요청을 보내면 된다.

이때 주의할점은 조금 스크롤을 내리면 다음과 같이 포함하여야 하는 Request 항목을 확인할 수 있다.

required항목에 O표시아 있는 것은 모두 꼭 포함해야주어야 한다는 것이다.

이 들을 모두 포함하여 카카오 서버에 POST Request를 보내보도록 하자.

이렇게 보내면 허용된 인가코드라면 아래와 같은 응답을 받게 될 것이다.

서버에서 클라이언트에게 토큰 뿌려주기

필자의 경우 보여주기위해 setTimeout함수를 사용하였으나 각자 상황에 맞게 적절한 코드를 이용하여 보내도록 하자.

이렇게 res.json / send등 알맞은 코드를 통해 클라이언트에게 응답을 보내주면?

위와 같이 클라이언트에서도 토큰을 활용할 수 있다 !

이를 토대로 사용자 정보 불러오기 등을 활용하면 된다