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

React

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

createElement 2022. 12. 17. 22:20

1. 인가 코드 발급

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

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

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

Javascript SDK

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

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

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

먼저 위 링크로 이동해 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에 쿼리스트링으로 인가 코드를 확인할 수 있습니다.

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

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 요청으로 사용자의 정보를 받아올 수 있습니다.

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

티스토리