[oauth] 카카오 로그인 이해하기

🔗 OAuth 2.0의 동작원리

🔗 카카오 로그인 시작하기

 

카카오 로그인 이해하기

로그인 과정

아래 다이어그램은 카카오 로그인을 이용한 서비스 로그인 과정을 나타낸 것이다.

사용자 클라이언트, 서비스 서버, 카카오 인증 서버, 카카오 API 서버를 OAuth 역할에 매핑해봤다. 

• 사용자 클라이언트 == 클라이언트 FE
• 서비스 서버 == 클라이언트 BE
• 카카오 인증 서버 == 인가 서버
• 카카오 API 서버 == 리소스 서버

 

Step 1 : 카카오 로그인

사용자가 서비스에서 `카카오 로그인` 버튼을 클릭하면, 서비스는 카카오 인증 서버로 인가 코드 발급을 요청하게 된다. 카카오 인증 서버는 사용자에게 인증을 요청한다. 사용자가 인증에 성공하면 서비스의 동의 항목 설정을 바탕으로 사용자에게 동의 화면을 전달한다. 사용자가 필수 동의 항목에 동의하고 로그인을 요청하면 카카오 인증서버는 인가 코드를 발급하고 리다이렉트 URI(서비스)로 전달한다. 서비스는 전달받은 인가 코드로 토큰을 요청한다.
 

 Step 2 : 회원 확인 및 가입

서비스는 토큰으로 사용자 정보를 요청한다. 카카오 API 서버는 토큰의 유효성을 검증하고 서비스의 요청에 응답한다. 서비스는 카카오로부터 제공받은 정보를 바탕으로 이미 가입된 회원인지 확인한다. 이미 가입된 회원의 경우, 로그인 완료 처리를, 가입되지 않은 사용자의 경우 서비스의 데이터베이스에 회원 정보를 저장한다.
 

Step 3 : 서비스 로그인

서비스는 사용자에게 세션을 발급하고 로그인된 서비스 화면으로 이동시킨다.
 

---

인증

인증과 인가에 대해 좀 더 자세히 알아보자. 사용자는 카카오 로그인을 통해 서비스에 로그인 할 수 있다. 카카오 로그인은 카카오 계정의 자격 정보로 사용자 신원을 인증한다. 즉, 서비스는 카카오 로그인을 통해 신뢰할 수 있는 인증 정보를 제공 받고, 사용자의 비밀번호를 입력받지 않고도 인증을 수행할 수 있다.
 

인가

카카오 로그인은 사용자가 인증에 성공하면 동의 화면을 통해 사용자에게 인가를 요청한다. 사용자가 동의항목에 동의하면 카카오 로그인은 사용자의 동의 내역을 인가 코드에 담아서 서비스에 전달한다.
 

---

JS를 이용한 카카오 로그인

이제 자바스크립트 SDK를 이용하여 카카오 로그인을 구현하는 방법을 알아볼 것이다!

서비스는 서드 파티 어플리케이션으로 OAuth의 클라이언트를 의미한다. 서비스 클라이언트는 서비스의 웹 브라우저, 서버는 서비스의 웹 서버로 볼 수 있다.
 

Step 1 : 간편 로그인 (FE & BE)

Kakao.Auth.authorize({
  redirectUri: '${REDIRECT_URI}',
});

사용자가 `카카오 로그인` 버튼을 누르면 서비스는 `Kakao.Auth.authorize()` 함수를 호출한다. 사용자는 카카오 인증 서버는 사용자의 선택에 따른 결과를 담아 `redirectUri`로 전달한다.

- ✅ 동의 : `redirectUri`로 인가 코드를 담은 쿼리 스트링 전달
- ❎ 취소 : `redirectUri`로 에러 정보를 담은 쿼리 스트링 전달

간편로그인 확인하기 (+ 파라미터 정보)

 

Step 2 : 토큰 받기 (BE)

curl -v -X POST "https://kauth.kakao.com/oauth/token" \
 -H "Content-Type: application/x-www-form-urlencoded" \
 -d "grant_type=authorization_code" \
 -d "client_id=${REST_API_KEY}" \
 --data-urlencode "redirect_uri=${REDIRECT_URI}" \
 -d "code=${AUTHORIZE_CODE}"

서비스 서버는 인가 코드로 토큰 발급을 요청한다. 필수 파라미터를 포함하여 인가 서버에 POST 요청을 전송한다.

토큰 요청시 전달할 수 있는 파라미터

• 토큰 발급 확인하기 (+ 요청/응답 정보)
• 카카오 로그인에서 제공하는 토큰 확인하기

 

Step 3 : 사용자 로그인 처리 (BE)

`토큰 받기`를 요청하면 카카오 인증 서버에서 위의 응답을 전송한다. 해당 정보를 바탕으로 사용자 정보를 조회하고, 존재하지 않는 회원에 대해 회원 가입을 진행하고 로그인된 서비스를 제공한다.

• REST API로 사용자 정보 가져오기
• REST API로 토큰 갱신하기

 

---

참고자료

• https://developers.kakao.com/docs/latest/ko/kakaologin/common
• https://developers.kakao.com/docs/latest/ko/kakaologin/js
• https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api