[React/Nodejs] 카카오 로그인 연결하기

카카오 로그인을 진행해 보자. 기본적인 작동 방식은 여기를 눌러서 확인하자. 기본 셋팅은 할수 있다 판단하고 글을 적어보겠다. 사실 쉽게 사용하기 위해 만들어진 라이브러리도 많다. 그러나 딱히 난이도가 있지 않기 때문에 react-kakao-login 같은 라이브러리는 사용하지 않고 만들어 보겠다. 만약 nodejs에 대한 기초지식이 부족하거나, frontend, backend 구축에 대한 기초내용을 알고 싶다면 아래의 url을 참고하자.

 

[Web/nodejs] - nodejs 기초 총 정리

[Nodejs/react] 깃헙(github)으로 로그인 / 깃헙(github) API로 데이터 불러오기

 

 

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

Kakao Developers

 

 

위의 사이트를 확인해 보면 인증을 위해 사용하는 방법은 아래와 같이 나온다.

 

 

 

JavaScript SDK vs REST API

웹서비스라면, JavaScript SDK와 REST API 중에 어느 것을 선택해야할 지 정해야한다. 모바일 환경에서 REST API를 사용하면 웹에서 카카오 홈페이지에 로그인 하는 창이 뜨기 떄문에 모바일 유저들의 경험을 해친다. 그리고 카카오 로그인시 인증 코드를 백엔드로 보내서 처리를 하기 위해서는, 프론트에서 카카오 토큰을 직접 전달 받는 JavaScript SDK 구현은 맞지 않다. 결과론적으로 우리가 사용하는 React, nodejs에서는 받은 인증 코드를 백엔드에 넘기기 위해서 REST API를 사용한다.

 

다시 말하자면, 프론트만으로 카카오 로그인을 구현하나, 프론트+백엔드로 카카오 로그인을 구현하는지를 먼저 정해야 카카오 로그인이 헷갈리지 않는다. 여기서는 둘다 구현을 해보자.

 

 

 

 

카카오 서버가 하는 일은 2가지다.

1. 카카오 서버는 로그인 시 인가 코드를 준다.
2. 카카오 서버로 인가 코드를 보내면 유효 토큰을 준다.

이 외의 로직은 개발자기 만드는 것이다. 우리가 해야하는 것은 토큰을 받는일이다.

 

 

 

처음 카카오 로그인을 구현하거나, 시작 전 큰 흐름과 기초세팅 부분을 이해하기 위해 여기를 눌러서 꼭 확인을 하고, 아래의 코드를 보면 더 빠르게 이해가 될 것이다.

 

 

1. 로그인 하기 화면 구성

먼저 프론트엔드로 구현을 해보자. 우리가 흔히 볼 수 있는 kakao 로그인 버튼은 아래의 url을 통해 다운 받으면 된다.

 

https://developers.kakao.com/docs/latest/ko/reference/design-guide

Kakao Developers

 

 

여기서 get이니 post니 쓰지말고, 그냥 a태그를 넣어주면된다.

return (
    <>
        <a href={KAKAO_AUTH_URL}>
            <div 
                className={styles.kakao_btn} 
                >
            </div>
        </a>
    </>
)


# css
.kakao_btn{
    background-image: url("/src/images/kakao_login_medium_wide.png");
    background-repeat: no-repeat;
    background-size : cover;
    margin: 10px auto;
    /* padding: -10px; */
    color: transparent;
    width: 300px;
    height: 45px;
}

 

 

그리고 KAKAO_AUTH_URL에 들어갈 내용은 아래와 같다.

 

const CLIENT_ID = "REST API 부분을 넣어준다.";
const REDIRECT_URI =  "설정한 리다이렉트 URL을 넣어준다";

// 프런트엔드 리다이랙트 URI 예시
// const REDIRECT_URI =  "http://localhost:3000/oauth/callback/kakao";

// 백엔드 리다이랙트 URI 예시
// const REDIRECT_URI =  "http://localhost:5000/kakao/code";


export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;

 

 

사실 여기서 프론트엔드만 쓸지 백엔드만 쓸지가 나뉜다.  Redirect_URI 를 프런트엔드 주소로 넣어주면, 프런트엔드 주소로 get방식에 params로 인가 코드가 넘어오고, 백엔드 주소로 넣어주면 백엔드로 get방싱에 params로 인가 코드가 넘어온다. 

 

여기서 아래 2번은 프런트엔드로 토큰을 받는 방식이고, 3번은 백엔드로 토큰을 받는 방식이다. 위의 리다이랙트 URI도 이것에 따라 나뉜다.

 

 

위와 같이 코드를 작성 후에 a태그에 포함된 이미지를 누르면 페이지 이동이 되고, 로그인 화면이 아래와 같이 뜬다. 

 

 

리다이렉트 url은 여기서 로그인을 한 후에 get방식으로 params에 인가코드를 넣어서 보낼 url이라고 생각하면된다.

---

 

2. 프런트엔드에서 토큰 받기

우선적으로 카카오서버에서 리다이렉트 해서 보낸 api를 받을 url가 프론트 엔드에 있어야한다. 따라서 router 설정을 해준다.

 

import { ConnectedRouter } from 'connected-react-router';
import { Route, Switch } from 'react-router-dom';
import history from './history';
import KakaoRedirectHandler from './kakao/KakaoRedirectHandeler';
import Home from './pages/Home';
import Signin from './pages/Signin';

function App() {
  return (
    <ConnectedRouter history={history}>
      <Switch>
        <Route exact path="/signin" component={Signin} />
        <Route exact path="/" component={Home} />
		
        // 아래 부분을 추가해 준것이다.
        <Route path="/oauth/callback/kakao" component={KakaoRedirectHandler} />
        
      </Switch>
    </ConnectedRouter>
  );
}

export default App;

 

 

이제 KakaoRedirectHandler.jsx를 작성해 보자.

 

 

// 리다이렉트될 화면
// KakaoRedirectHandeler.js

import React, { useEffect } from "react";
import axios from 'axios';

const KakaoRedirectHandler = () => {
  useEffect(()=> {
    let params = new URL(document.location.toString()).searchParams;
    let code = params.get("code"); // 인가코드 받는 부분
    let grant_type = "authorization_code";
    let client_id = "REST API 부분을 넣어준다.";

    axios.post(`https://kauth.kakao.com/oauth/token?
        grant_type=${grant_type}
        &client_id=${client_id}
        &redirect_uri=http://localhost:3000/oauth/callback/kakao
        &code=${code}`
        , {
    headers: {
        'Content-type': 'application/x-www-form-urlencoded;charset=utf-8'
    }
  }).then((res) => {
      console.log(res)
      // res에 포함된 토큰 받아서 원하는 로직을 하면된다.
  })
  }, [])

  return <div>사실 이페이지는 크게 의미 없다. 첫화면으로 로직이 끝나면 이동시켜주면 된다.</div>;
};

export default KakaoRedirectHandler;

 

 

어려워 보이지만, 사실 인가코드 받고, 그 인가 코드를 이용해서 보내라 한 방식처럼 다시 보내주면 토큰이 들어오게 된다.

 

 

만약 모르는 부분이 하나라도 있다면, 위에서 적은 url로 다시 한번 들어가서 확인을 해보자.

 

 

3. 프런트엔드와 백엔드에서 토큰 받기

백엔드(nodejs)와 프론트엔드(React)를 보통 사용하는 방식은 아래와 같다.

(사실 둘다 자바스크립트라 사실상 코드는 같다.)

 

1. React에서 로그인을 하면 카카오 서버는 인가 코드를 Redirect url에 params로 포함시켜 보낸다.
2. 인가 코드를 받은 Nodejs는 url에서 인가 코드를 분리한다.
3. Nodejs는 받은 인가코드를 카카오 서버로 보내고 유효 토큰을 받는다.
4. Nodejs는 받은 유효 토큰을 통해서 필요한 유저정보를 카카오 서버에 호출하여 받는다.
5. Nodejs는 받은 유저정보를 사전에 정한 인증 방식(내부 전용 토큰)으로 활용한다.
6. Nodejs는 사전에 정한 인증방식(내부 전용 토큰)을 활용해 React에 보낸다.
7. React는 받은 정도를 통해 로그인을 시키고, 화면을 redirect(화면변환) 시킨다.

 

첫번째 단계로 돌아가서 리다이렉트 URI를 백엔드 주소로 설정하고, 백엔드에 get 방식을 받을 수 있는 url을 하나 만들고 코드를 적어주면 된다.

 

var express = require('express');
var router = express.Router();
const KAKAO_OAUTH_TOKEN_API_URL = "https://kauth.kakao.com/oauth/token"
const KAKAO_GRANT_TYPE="authorization_code"
const KAKAO_CLIENT_id="REST API 부분을 넣어준다."
const KAKAO_REDIRECT_URL="http://localhost:5000/kakao/code"

router.get('/kakao/code', function (req, res, next) {
        let code = req.query.code;
        try{
            axios.post(
                `${KAKAO_OAUTH_TOKEN_API_URL}?grant_type=${grant_type}&client_id=${client_id}&redirect_uri=${redirect_uri}&code=${code}`
                , {
                 headers: {
                    'Content-type': 'application/x-www-form-urlencoded;charset=utf-8'
                }
            }).then((result)=>{
                console.log(result.data['access_token'])
                // 토큰을 활용한 로직을 적어주면된다.
    
            }).catch(e=> {
                console.log(e)
                res.send(e);
            })
        }catch(e){
            console.log(e)
            res.send(e);
        }
})

 

이때 주의할 부분은 redirect_url 부분을 적을 때, 인가 코드를 받을 때 적는 것과 같은 url을 적어줘야한다. 토큰이 잘 들어온다면, 끝!!!

 

 

주의) 테스트 시, 카카오 서버는 토큰을 한번만 발급해준다. 토큰 발급이 후에는 인가 코드는 삭제 된다. 따라서, 그 후에 동일한 인가 코드로 토큰을 요청한다면, 토큰을 가지고 올 수 없다.(토큰이 발급 된줄도 모르고 계속 로그인 하면.... 엄청난 시간낭비를 할 가능성이 크다.)