느린 개발자

React 카카오 로그인을 구현해보려고 합니다. Nuxt 프레임워크에서 구현해 본 적이 있기 때문에 로그인 프로세스 과정이나 백엔드와 어떻게 통신할지에 대해서는 기본적으로 숙지된 상태입니다. 그런데 리액트로 아직 익숙지 않아 정교하게 구현은 못했지만 간단하게 구현해서 설명해보고자 합니다.REST API 방식으로 URL을 통해서 인가코드를 받아 로그인 과정을 하는 방법과, JavaScript Key를 사용하여 react-kakao-login 라이브러리로 구현하는 방법을 알아보겠습니다.

Kakao Developers 문서

카카오 개발자 공식문서에 카카오 로그인에 대한 전체적인 프로세스가 나와있으니 한번 참고하시면 됩니다. 전체적인 흐름을 이해하려면 문서를 꼼꼼하게 읽어 보시는 걸 추천드립니다. 저도 먼저 구현하기보다 문서를 통해서 이해하려고 노력했고, 구현을 할 때도 프로세스 과정이 머릿속에 들어있으니 금방 이해가 되었습니다.

 

Kakao Developers

 

---

앱 등록

카카오 API를 사용하기 위해서 카카오 Developers에서 내 애플리케이션에 앱을 추가합니다.

테스트용이면 간단하게 입력하고, 실제 서비스 하실 거면 서비스 내용에 관련하여 입력하시면 됩니다.

카카오 개발자 문서 - 카카오 애플리케이션 시작하기

 

앱 키

앱을 생성하게 되면 플랫폼 별 앱 키(App Key)가 발급됩니다.

이 포스팅에서는 Rest API Key와 JavaScript Key를 사용합니다. 따로 기록해 두세요!

카카오 개발자 문서 - 앱 키

 

플랫폼 등록

이 포스팅에서는 Web으로 진행하기 때문에 플랫폼 - Web에 도메인을 입력합니다. http:// , https:// , file://   형식의 도메인을 등록할 수 있고 http와 https 도메인은 둘 중 한 가지만 등록해도 사용가능합니다.
❗로컬에서 진행을 하니 http://localhost:3000을 입력합니다. 꼭 프론트 측 URL을 입력해 주세요!.

카카오 개발자 문서 - 플랫폼

 

Redirect URI

카카오 로그인에서 사용할 OAuth Redirect URI를 설정합니다.

프론트 localhost:3000에서 카카오 버튼을 클릭하면서 요청을 하는 거니 프론트 측 도메인과 code를 받을 path를 적으시면 됩니다. 물론 아래처럼 /auth로 하시게 되면 auth? code='인가코드'가 나오는 거고 localhost:3000으로 설정하시면 localhost:3000/? code='인가코드'로 나오게 됩니다. 개발 나름이겠지만 기본 '/'에서 하시고 싶으신 분들도 있고, 다른 페이지에서 인가코드를 받아서 처리하고 싶으신 분들도 있습니다. 개발 방향에 따라서 설정하시면 될 거 같습니다,
그리고 백엔드 도메인을 적는 게 아닙니다 이거 헷갈리시는 분들이 간혹 있으시더라고요!

카카오 개발 문서 - Redirect URI

 

---

카카오 로그인 과정

1.  Rest API KEY , JavaScript KEY
2. 프론트 도메인 설정
3. Redirect URI 설정

위에 과정을 완료하게 되면 카카오 로그인에 필요한 재료들을 다 준비된 겁니다.

아래 프로세스 이미지로 전체적인 과정을 참고해 보시면 됩니다.

카카오 개발자 문서 - 카카오 로그인 프로세스

 

---

REST API 방식

카카오 개발자 - 앱 키 - REST API 키로 구현합니다.

 

위에서 설정한 내용으로 client_id에는 REST API와 redirect_uri에는 RedirectURI를 입력합니다.

https://kauth.kakao.com/oauth/authorize?client_id=${Rest_api_key}&
redirect_uri=${redirect_uri}&response_type=code

 

 

카카오 로그인 컴포넌트 구현

const SocialKakao = ()=>
{
    const Rest_api_key='REST API KEY' //REST API KEY
    const redirect_uri = 'http://localhost:3000/auth' //Redirect URI
    // oauth 요청 URL
    const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${Rest_api_key}&redirect_uri=${redirect_uri}&response_type=code`
    const handleLogin = ()=>{
        window.location.href = kakaoURL
    }
    return(
    <>
    <button onClick={handleLogin}>카카오 로그인</button>
    </>
    )
}
export default SocialKakao

 

 

구현한 버튼을 클릭해 보면 RedirectURI로 설정해 둔 localhost:3000/auth?code= 로 인가코드가 들어오는 것을 확인할 수 있습니다.   

인가코드

 

인가코드 추출 방법은 new URL()을 사용하여 추출하시면 됩니다.

const code = new URL(window.location.href).searchParams.get("code");

여기까지 프론트에서 처리할 과정은 끝났습니다. 이제 인가코드를 백엔드로 전달하면 됩니다. 백엔드에서 처리하는 과정을 간단하게 설명하면 백엔드에서 이 인가코드로 액세스토큰을 발급받아 그 액세스토큰으로 유저정보를 조회해서 DB에 저장한 후  백엔드에서 jwt 토큰을 프론트로 전달하면 로그인 과정은 끝납니다.

 

---

JavaScript SDK 방식

카카오 개발자 - 앱 키 - JavaScript 키로 구현합니다.
react-kakao-login 모듈을 설치하여 사용합니다.

 

라이브러리 설치

npm install react-kakao-login

 

 

 카카오 로그인 컴포넌트 구현

import KakaoLogin from "react-kakao-login";

const SocialKakao =()=>{

    const kakaoClientId = 'JavaScript KEY'
    const kakaoOnSuccess = async (data)=>{
      	console.log(data)
        const idToken = data.response.access_token  // 엑세스 토큰 백엔드로 전달
    }
    const kakaoOnFailure = (error) => {
        console.log(error);
    };
    return(
        <>
          <KakaoLogin
              token={kakaoClientId}
              onSuccess={kakaoOnSuccess}
              onFail={kakaoOnFailure}
          />
        </>
    )
}

export default SocialKakao

 

 

react-kakao-login 모듈을 사용하여 버튼을 클릭하면 위와 같이 Response 데이터가 나옵니다. 여기서 access_token을 백엔드로 전달합니다.  백엔드에서는 위에 access_token 으로 유저 정보를 조회하여 DB에 저장하면 됩니다. 아래는 프론트에서 전달한 access_token로 백엔드에서 유저정보 조회하는 예시입니다. 참고만 하세요!

  // express 백엔드
  // https://kapi.kakao.com/v2/user/me 로 id_token을 헤더에 삽입하여 Post 요청해 데이터를 얻습니다.
  const kakaoResponse = await axios.post(
        'https://kapi.kakao.com/v2/user/me',
        {
          headers: {
            Authorization: `Bearer ${access_token}`,
          },
        },
      );
      idToken = kakaoResponse.data.id;
      name = kakaoResponse.data.kakao_account.profile.nickname;

 

추가) Express 서버 카카오 로그인 글 참조 (Rest api key)

 

[Express] 카카오 로그인 서버 구현하기 (Rest API key) - 1

 

Express

 

 

 

---

이제 Rest API 방식으로 URI에 정보를 담아 카카오 로그인 하는 방식과, JavaScript SDK 방식으로 구성된 react-kako-login 모듈을 사용하여 카카오 로그인하는 방식 두 가지를 해봤습니다. 프론트에서는 이 정도로 인가코드만 넘기고 서버 백엔드에서 인증을 완료하여 DB 저장을 하고 jwt 토큰을 던져주는 방식으로 소셜 로그인은 완료가 됩니다.
추후 express 백엔드로 소셜 로그인 하는 방법을 포스팅해보도록 하겠습니다. 읽어주셔서 감사하고 틀린 부분이 있으면 댓글 부탁드립니다.