소셜로그인 - kakao API

Kakao API를 활용하는 소셜 로그인 기능에서 프론트가 하는 부분에 대해서 다 이해하진 못하지만, 백엔드 개발자도 전체적인 통신이 어떤 단계를 거쳐서 이루어지는지를 공식 문서를 통해 파악하고 코드 외적인 설정에는 어떤 게 있는지를 알고 있어야 된다고 생각한다. 구현 코드는 링크를 참고했고 이 글에서는 데이터의 형태가 어떤지, 자잘하게 놓친 점은 어떤 게 있었는지 기록했다.

 

프론트엔드 개발자가 하는 부분이지만, kakao login 기능을 사용하기 전 필요한 절차이다.

1. kakao developers에 로그인 한 뒤 앱을 생성한다.

2. 이 앱 메뉴에서 kakao login에 들어간 뒤 state를 ON으로 설정한다. Platform 부분에 redirect URI를 준다.

3. consent items(메뉴 중 kakao login 바로 아래)에서 사용자에게 요청할 정보를 설정한다. 여기서 profile info(nivckname, profile image)만 필수사항으로 바로 설정할 수 있다. 그 외는 선택정보로 설정할 수 있거나, 카카오의 리뷰가 필요하거나 인가되지 않았다.

 

위 절차 중 3번을 프론트에서 놓쳤을 경우, 백엔드가 카카오에 사용자 정보를 요청한 뒤 얻은 정보의 생김새는 아래와 같다.

{
  'id': 고유숫자,
  'connected_at': 일시
}

id는 사용자의 고유한 것이다. 일시는 '2021-03-07T15:18:34Z' 이런 식으로 생겼다.

이게 끝이다. 닉네임이나 이메일도 없는 상태. 만일 백에서 데이터를 찍어봤는데 이렇게 나왔다면 프론트 측에서 consent items 설정을 어떻게 했는지 확인해보자.

 

consent items에서 profile info를 필수로, email을 선택으로 설정한 뒤 프론트 단에서 사용자가 로그인하면 카카오로부터 사용자 정보에 접근할 수 있는 토큰을 받을 수 있다. 사용자가 선택사항까지 체크한 뒤 가입했을 경우 아래와 같은 형태의 정보를 받는다. 만일 선택사항인 이메일을 체크하지 않고 들어오면 scope에 profile만 있다.

{
  access_token: "토큰",
  token_type: "bearer",
  refresh_token: "토큰",
  expires_in: 4자리 숫자,
  scope: "account_email profile",
  ...
}

이메일을 필수로 받고 싶은데 선택으로만 받을 수 있다. 그래서 만일 선택을 하지 않고 가입을 하려 할 경우 백엔드에서 KeyError로 잡고 프론트 쪽에 alert를 띄울 요량으로 접근해봤는데 정보 동의창이 다시 뜨지 않았다. 그래서 동의사항을 다시 설정할 수가 없었다.

프론트 쪽에서 카카오로부터 받는 정보를 찍어보니 사용자가 카카오 계정으로 로그인 시도를 하면 이 scope가 사용자가 맨 처음 정한대로(profile만) 나왔다. 이메일 정보 유무를 잡는 걸 백엔드 단이 아니고 프론트 단에서 조치해야 될 것 같다.

 

위 정보 중 백엔드가 프론트로부터 받는 건 access token이다. 이를 헤더에 담아 카카오에 사용자 정보를 요청한다. 참고 링크

아래는 사용자가 필수 정보와 이메일까지 동의했을 때 백엔드에서 받은 정보다.

{
  'id': 고유숫자,
  'connected_at': 일시,
  'properties': {
    'nickname': 카카오닉네임
  },
  'kakao_account': {
    'profile_needs_agreement': False,
    'profile': {
        'nickname': 카카오닉네임
    },
    'has_email': True,
    'email_needs_agreement': False,
    'is_email_valid': True,
    'is_email_verified': True,
    'email': 이메일주소
  }
}