[node.js] 이해가 어려웠던 카카오 로그인 박살내기

연동로그인은 앱과 사용자간의 거리를 좁혀주는 확실히 필요한 툴이다.

그 중 한국에서는 카카오를 사용하지 않으면 간첩(?)일 정도니

카카오 연동로그인 구현이 필수적이라고 생각한다.

 

하지만 연동로그인은 계정, 사용자 정보를 공유하는 것이니 그 절차가 복잡하고 까다로울 수 밖에 없다.

그래서 여러 지원 툴이 나와있는데 그 중 가장 유명한 것이 passport이다

하지만 passport는 페이스북, 구글 등 해외 소셜앱에 대해서는 체계적으로 그 방법이 나와있고

스택 오버플로우 등에서 그 절차 또한 여럿 공유되고 있다.

 

거의 모든 앱이 카카오 연동로그인을 갖추고 있는 만큼 그 레퍼런스도 충분히 많았지만

어떤 아이디어로 구현하고자 하느냐에 따라

프론트엔드와 백엔드가 어떻게 역할을 나누냐에 따라 등등

 

그 안에서 또 방법이 나뉘었기 때문에

머리만 핑핑 돌 뿐

내 입맛에 맞는 방법을 전혀 찾지 못했다.

 

그래서 나는 구글링을 멈추고

맨 눈으로 카카오 개발자 공식 링크로 돌아가

카카오 로그인 가이드라인을 그대로 이해하고자 했다.

역시 개발자는 요행을 바라지 않고 바닥부터 기어야 한다.

 

이틀동안 뻘짓을 한 끝에 드디어 이해를 했고 그 내용을 공유하고자 한다.

 

목차는 다음과 같다.

1. 내가 생각한 연동 로그인 아이디어
2. 구현 방법

순으로 말하고자 한다.

---

1. 연동 로그인 아이디어

 

먼저 연동로그인 부분은 프론트엔드와 백엔드 중 누구 한 명이 도맡아 전체를 구현할 수 있고

부분을 나눠서 같이 구현할 수 있다.

연동 로그인은 개념이 상당히 추상적이어서

부분을 나눠서 하더라도 전체적인 연동로그인 구현 흐름을 알아야 하고

그러기 위해선 전체적인 구현해본 경험이 있어야 한다고 생각한다.

 

그래서 여기서는

백엔드 입장에서 카카오 연동 로그인 전체를 구현하는 방법, 즉

사용자가 [카카오 로그인]버튼을 눌렀을 때 로그인되어져서 앱의 홈화면으로 가기까지

처리하는 모든 절차를 보여줄 것이다.

---

2. 구현 방법

 

구현방법은 크게 세단계로 나눌 수 있다.

1) 카카오 - 앱 인증

2) 카카오 - 사용자 인증

3) 앱 - 사용자 인증

 

1) 카카오 - 앱 인증
: 등록된 앱 검증 및 코드 발급

 

 

(1) 먼저 카카오에 등록된 앱인지 확인한다.

클라이언트가 한 uri로 요청하면 아래의 카카오api로 리다이렉팅 해준다.

이때 리다이렉팅은 request 모듈을 사용할 수 있다.

(카카오서버)
https://kauth.kakao.com/oauth/authorize
?client_id=clientidclientidclientidclientid		//아무거나 입력한 것이다
&redirect_uri=http://localhost:3000/auth/oauth		// 내 서버의 uri
&response_type=code

- client_id : 앱의 REST API 키

- redirect_uri : 리다이렉트시킬 url(내서버), 등록되어있어야 한다.

 

(2) 인증 성공 시 자동으로 등록된 Redirect Url로 이동시켜준다

(내 서버)
http://localhost:3000/auth/oauth
?code=codeedoccodeedoccodeedoccodeedoccodeedoccodeedoc

 

나의 서버의 url에 code와 함께 리다이렉트 해준다.

저 리다이렉트되는 url은 카카오개발자 사이트에 내가 등록한 redirect url.

 

저 url로 자동으로 보내주는 만큼 redirect url에 대한 api를 만들어야 한다.

그리고 그 api는 리턴되는 code를 활용해야 하는데 그 api의 내용은 그 code를 사용해서 유저인증을 해야하는 것이다.

 

 

2) 카카오 - 사용자 인증
: 앱을 검증하고 받은 코드를 갖고 유저 카카오 인증

 

 

이전에 앱을 인증했다면 이번엔 사용자 인증 차례다.

앱을 인증하고 리다이렉팅되는 내 서버에서 구현해야 한다.

내 서버 → 카카오 서버

내 서버에서 아래의 리다이렉팅 url를 가진 api를 만들고 아래의 request코드를 구현한다.

 

POST
https://kauth.kakao.com/oauth/token

 

헤더:

 

body:

 

내가 이해하고있는 것이 맞나 확신이 없어 시간이 오래 걸렸던 것 같다.

위의 url를 통하면 현재 기기에서 카카오에 로그인되어있는 계정으로 계정 연동이 이루어지는 것이다.

헤더는 꼭 application/x-www-form-urlencoded 로 해야한다

 

바디를 보면

- code : 앱 인증으로 받은 코드

- grant_type : authorization_code 지정

- client_id : RestAPI 키를 한번 더 입력해준다(이걸 한번 더 요구하길래 의심을 많이 하고 확신이 줄어드는데 큰 역할(?)을 한 녀석이다.

- redirect_uri : 아까 code가 리다이렉트된 url를 '한번 더' 보내준다.(이녀석도 의미를 알기 전, 왜 한번 더 보내는 거지 하고 내가 생각했던 시나리오에 대한 의심을 갖게 만든 장본인 중에 한개다. 그냥 인증용인 것 같다.)

- client_secret : 연결된 카카오계정에 대한 보안을 추가한 것(이 기능을 신청한 앱은 이 프로퍼티를 무조건 추가해야되는데 기능은 신청해놓고 까먹고 이 프로퍼티가 필수가 아님을 보고 추가하지 않아서 시간을 낭비하였다.)

 

기기의 카카오가 연동되어있는 계정을 가져와 카카오서버에 사용자인증을 하는 것이다.

인증이 성공하면

 

이렇게 카카오 토큰이 주어진다.

 

 

 

3) 앱 - 사용자 인증

이제 사용자 - 앱 인증하는 일만 남았다.

카카오 - 사용자 인증을 통해 얻은 카카오 토큰으로 사용자의 이메일을 가져와 앱에 로그인시킨다.

이 부분은 본연히 내 서버의 api를 이용한다.

(내 서버)
http://localhost:3000/authAPI/kakao/login

 

헤더 :

 

바디 : 카카오 - 사용자 인증으로 얻은 토큰을 사용한다.

 

이렇게 요청하고 서버 내부에서는

request.get({
      url: "https://kapi.kakao.com/v2/user/me",
      headers: {
              Authorization: `Bearer ${kakaoToken}`
      }
}, async (err, response, body) => {
...
}

 

이렇게 구현해 주면

 

 

이렇게 사용자에 대한 정보를 가져올 수 있다.