[React] 카카오 로그인 구현 및 사용자 정보 가져오기

목차

1. 인가 코드 발급
2. 토큰 받기
3. 사용자 정보 가져오기

먼저 카카오 소셜 로그인을 진행하기 전
1. 카카오 애플리케이션 생성
2. [Web 플랫폼 등록]에서 개발 사이트 도메인 추가
3. 카카오 로그인 활성화 상태 설정
4. Redirect URI 등록

위 과정을 거친 후 진행해야 합니다.

 

1. 인가 코드 발급

https://developers.kakao.com/docs/latest/ko/kakaologin/js

Redirect URI는 카카오 로그인이 정상적으로 이루어졌을 때 리다이렉트할 URI를 의미합니다.

또한 로그인이 정상적으로 이루어지면 Redirect URI로 인가 코드를 담은 쿼리 스트링이 전달됩니다.

 

 

Javascript SDK

Kakao Developers

위 링크에서 JS SDK 데모를 확인할 수 있습니다.

 

 

Kakao Developers

Script Tag 코드 복사 및 Integrity 값 복사

 

먼저 위 링크로 이동해 Integrity 값을 포함한 Script Tag 코드를 복사합니다.

그 후 public > index.html 헤더 부분에 복사한 태그를 붙여넣습니다.

<script src="https://t1.kakaocdn.net/kakao_js_sdk/${VERSION}/kakao.min.js"
  integrity="${INTEGRITY_VALUE}" crossorigin="anonymous"></script>

 

JS SDK를 페이지에 포함한 후에는 JS SDK 초기화를 진행해주어야 합니다.

Javascript 키의 경우 앱 설정 > 앱 키 > JavaScript 키값을 복사해 사용합니다.

또한, Redirect URI 부분에는 이전에 설정한 Redirect URI 중 하나를 작성합니다.

import React, {useEffect} from 'react'

const {Kakao} = window

const KakaoLogin = () => {
  const initKakao = () => {
    if (Kakao && !Kakao.isInitialized()) {
      Kakao.init(`${JavaScript 키}`)
    }
  }
  
  useEffect(() => {
    initKakao()
  }, [])
  
  const kakaoLoginHandler = () => {
    Kakao.Auth.authorize({
      redirectUri: `${Redirect URI}`,
    })
  }

  return (
    <SocialLogin onClick={kakaoLoginHandler}>
      <MessageCircle />
      <span>카카오 로그인</span>
    </SocialLogin>
  )
}

export default KakaoLogin

 

이 모든 과정이 정상적으로 동작한다면 리다이렉트된 URI에 쿼리스트링으로 인가 코드를 확인할 수 있습니다.

code의 값이 인가 코드입니다.

이 인가 코드를 이용해 토큰을 발급받을 수 있습니다.

 

const params = new URL(document.location.toString()).searchParams
const code = params.get('code')
if (code) {
  getToken(code)
}

인가 코드를 searchParams로 추출합니다.

 

 

 

2. 토큰 받기

요청에는 다음과 같은 정보를 담아야 합니다. 이 부분 문서로 확인하기

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}"

 

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#request-token-sample

 

토큰을 받기 위해서 grant_type, REST API Key, Redirect URI, 인가 코드(Authorize code) 총 4가지가 필요합니다.

 

1. grant_type의 경우 'authoriztion_code'를 사용합니다.

2. REST API Key의 경우 앱 설정 > 앱 키 > REST API 키값을 복사해 client_id의 값으로 사용합니다.

3. Redirect URI의 경우, 이전에 설정한 URI값을 사용합니다.

3. 인가 코드의 경우 Redirect URI에 쿼리 스트링으로 담긴 값을 사용합니다.

 

또한 headers 값인 "Content-Type: application/x-www-form-urlencoded"을 필수로 포함해야 합니다.

 

const getToken = async code => {
    const grant_type = 'authorization_code'
    const client_id = `${REST_API_KEY}`

    const res = await axios.post(
      `https://kauth.kakao.com/oauth/token?grant_type=${grant_type}&client_id=${client_id}&redirect_uri=${REDIRECT_URI}&code=${AUTHORIZE_CODE}`,
      {
        headers: {
          'Content-type': 'application/x-www-form-urlencoded;charset=utf-8',
        },
      },
    )

    const token = res.data.access_token
    // ... 생략
}

res.data.access_token에 token값이 저장되어 있으며 이 토큰 값으로 사용자의 정보를 받아올 수 있습니다.

 

 

 

3. 사용자 정보 가져오기

액세스 토큰 사용하여 모든 정보 받으려면 다음과 같이 요청을 보내야 합니다.

문서 참고하기

curl -v -X GET "https://kapi.kakao.com/v2/user/me" \
  -H "Authorization: Bearer ${ACCESS_TOKEN}"

문서를 참고해 특정 정보만 추출할 수도 있습니다.

 

const getKaKaoUserData = async token => {
    const kakaoUser = await axios.get(`https://kapi.kakao.com/v2/user/me`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
    })
    
    return await kakaoUser.data
}

getKaKaoUserData(token)

토큰을 이용해 get 요청으로 사용자의 정보를 받아올 수 있습니다.

 

사용자 정보 응답 객체

사용자 정보 응답 객체는 내 애플리케이션 > 제품 설정 > 카카오 로그인 > 동의 항목에 수집할 정보로 설정된 정보만을 가져옵니다. 또한 사용자가 카카오 로그인 과정에서 동의를 누르지 않은 경우, 해당 항목은 수집되지 않습니다.