Node.js(express) & React를 이용한 카카오 소셜 로그인 구현하기 - 1

이 글 하나면 적어도 nodejs 기반의 REST API 방식 카카오 로그인 구현은 확실히 이해하고 실행할 수 있다.

 

 

 

코딩을 '많이' 하는것도 중요하지만, 배운 내용을 '확실히' 정리하는 것의 필요성을 부쩍 느끼고 있다.

 

 

하루, 이틀, 길게는 일주일이 넘는 시간 동안 고민을 하던 문제를 해결하여도 따로 기록으로 남기지 않고 '이만큼 오래 고민했으면 머리에 알아서 남았겠지' 하는 안일한 생각으로 그냥 넘어갔던 것들이 있는데, 

OAuth(카카오) 로그인도 그 중 하나였다.

 

 

이번이 세 번째 구현인데도 헤매는 나를 보면서 다시금 확실히 정리해야 겠다고 생각했다.

 

 

 

우선 Kakao Developers에 나와 있는 카카오 로그인 관련 로직은 다음과 같다.

카카오 로그인의 기본 골자

우선, 로그인을 왜 하는걸까?

 

A라는 사람이 B쇼핑몰 웹사이트에서 옷을 구매했다고 하자.

 

B쇼핑몰 웹사이트는 사이트에 접근하는 사용자가 A가 맞는지 확인(인증)한 후, 확인이 완료되었을 때에만 A에 대한 정보를 제공(인가)해야 할 것이다.

 

즉 로그인은, 웹사이트(서버)에게 '나를 인증'하고 그에 따른 정보를 받을 수 있는 허락(인가)을 받는 과정이다.

(인증/인가의 개념인데 구체적인 내용은 추후에 별도로 포스팅하겠다.)

 

카카오 로그인을 위해서는 내가 작업하는 서비스 서버(node.js 서버. 이하 "서버") 외에 카카오측 서버(이하 "카카오 서버")와도 통신을 해야 한다.

 

카카오 로그인을 통한 인가 과정을 한 줄로 요약하면, '인가 코드를 통해 토큰을 받아 이를 통해 정보를 얻는 과정'이다.

 

즉, 토큰이 있어야 카카오 서버에서 필요한 정보를 받아올 수 있고, 그 토큰을 받기 위해서는 인가 코드가 필요하다.

 

<1> 인가 코드 받기

 

(1) 클라이언트(React)에서 서버의 특정 url(`${Server_url}/auth/kakao`)로 GET 요청을 보내면 서버에서 카카오 로그인 페이지를 redirect해준다.("oauth/authorize~")

// React
<LoginKakao href="ServerUrl/auth/kakao"></LoginKakao>

// Node.js
app.get('/auth/kakao',(req,res)=>{
    const kakaoAuthURL = `https://kauth.kakao.com/oauth/authorize?client_id=${kakao.clientID}&redirect_uri=${kakao.redirectUri}&response_type=code`;
    res.redirect(kakaoAuthURL);
})

 

 

(2) 카카오 계정/비밀번호을 입력하고 동의 항목을 체크한 후 '동의하고 계속하기' 버튼을 누르면 카카오 서버는 kakao developers에서 미리 설정된 redirect uri로 인가 코드를 보내줌.

인가코드 발급 과정

인가코드를 받는 이 과정이 전에는 잘 이해가 안됐었는데, 카카오 서버에서 redirect uri로 GET 요청을 보낸다고 생각하면 된다.

 

이때 카카오 서버에서 인가 코드를 쿼리스트링으로 담아서 redirect uri로 함께 보내므로, 서버에서 이를 받아 와서 액세스 토큰을 발급받는 데에 활용하면 된다.

 

router.get(
  "/kakao/callback",
  async (req, res, next) => {
    let token;
    // 사용자가 '동의하고 계속하기'를 누르면 redirect uri로 인가코드가 전송됨.(get요청) 이를 담아서 다시 카카오 서버로 POST 요청을 보내서 액세스 토큰을 받는 과정
    try {
      token = await axios({
        method: "POST",
        url: "https://kauth.kakao.com/oauth/token",
        headers: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: qs.stringify({
          grant_type: "authorization_code", //특정 스트링
          client_id: kakao.clientId,
          client_secret: kakao.clientSecret,
          redirectUri: kakao.redirectUri,
          code: req.query.code, // 카카오 서버에서 redirect uri로 인가코드를 보낼때, url 속에 query문으로 담아서 보내줌. 이를 받아서 다시 쓰는 것.
        }),
      });
    } catch (err) {
      res.json(err.data);
    }
    ...

 

 

이어서 계속..