[CodeReview] kakao Login

mokyoungg·2020년 10월 13일
2

wecode에서 2차 프로젝트를 진행하며 기능은 구현하였지만 이해가 부족하다고 생각한 코드가 있었다.
이제서야 이 코드를 리뷰한다. 모든 정답은 공식 문서에 있으니..
해당 리뷰는 카카오의 디벨로퍼스 앱을 만들고 코드의 작성을 시작할 수 있을 때 진행되는 코드이다.

출처 : kakao developers
https://developers.kakao.com/docs/latest/ko/getting-started/app

기록하고 싶은 코드 - 소셜로그인(카카오)
https://velog.io/@mokyoungg/WECODE-2%EC%B0%A8-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8


1. 개발 환경 세팅.(index.html)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kakao JavaScript SDK</title>

    1. 웹페이지에 JavaScript SDK 포함하기
    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>

    2. 초기화하기
    <script>
        // SDK를 초기화 합니다. 사용할 앱의 JavaScript 키를 설정해 주세요.
        Kakao.init('JAVASCRIPT_KEY'); //앱을 생성하면 받는 키이다.
        // SDK 초기화 여부를 판단합니다.
        console.log(Kakao.isInitialized());
    </script>
</head>
<body></body>
</html>

출처 : https://developers.kakao.com/docs/latest/ko/getting-started/sdk-js

  • index.html에 카카오의 JavaScript SDK 경로를 포함시킨다.
  • 초기화를 통해 카카오의 sdk를 쓸 수 있는 세팅을 한다.
  • SDK의 초기화 여부는 true / false로 나온다.

SDK란 무엇인가?
소프트웨어 개발 키트(Software Development Kit, SDK)는 일반적으로 소프트웨어 기술자가 사용하여 특정한 소프트웨어 꾸러미, 소프트웨어 프레임워크, 하드웨어 플랫폼, 컴퓨터 시스템, 게임기, 운영 체제 등을 위한 응용 프로그램 등을 만들 수 있게 해주는 개발 도구의 집합이다. 응용 프로그램을 만들기 위해서는 특정한 SDK를 다운로드 받아야 하는데...

출처 : https://ko.wikipedia.org/wiki/%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4_%EA%B0%9C%EB%B0%9C_%ED%82%A4%ED%8A%B8

쉽게 말해서 카카오의 다양한 서비스(로그인, 지도 등)를 이용하기 위한 개발 도구이다.


2. 로그인 기능 구현(src/components/App.js)

import React from "react";

const App = () => {

  1 loginRequest 함수 선언
  const loginRequest = () => {
    //window 객체 사용 
    window.Kakao.Auth.login({
      success: function (response) {
        console.log(response);

        2 token을 사용한 백엔드 요청
          fetch('백엔드 API' , {
            method: 'POST',
            header: {
              Authorization : response.access_token,
        },
      })
        .then((res) => res.json())
        .then((res) => {
          if(res.token) {
            localStorage.setItem('Login-token', res.token);
            alert('로그인 되었습니다.')
            history.push('/')
          } else {
            alert('다시 확인해주세요.');
          }
        });
      },
      fail : function(err) {
        console.log('에러', err);
        alert('로그인에 실패했습니다.')
      },
    })
   };

  return(
    <div>
      <button onClick={loginRequest}>
        로그인하기
      </button>
    </div>
}

export default App;

코드는 길지만 1번만 보아도 된다. 카카오 로그인에서 중요한 것은 token을 받는 것이기 때문이다.
받은 토근은 이후 백엔드API로 보내고(요청) 이후 응답에 따라 진행되는 코드를 작성하면 된다.
이전에 내가 이해가 안 되었던 것은 token을 받는 코드였다.

당시 나의 의문은 이것이다.(1번 코드에 대한 의문)

  • 저런 코드를 어떻게 쓰는거지?
  • 저런 코드는 못 찾았는데, 나중에 실력이 좋아지면 혼자서 작성할 수 있는것인가?
  • 공식 페이지의 설명은 너무 어렵다.

이러한 의문은 공식 홈페이지에서 해결하였다.
고급 가이드 부분에서 친절하게 설명해주었다.

Kakao.Auth.login
카카오 로그인 동의화면을 팝업으로 띄우거나 클라이언트에서 모든 인증처리를 하고 싶은 경우 Kakao.Auth.login 함수를 사용할 수 있습니다. 클릭 이벤트 핸들러에서 함수를 호출하면 카카오 로그인 동의화면을 띄울 수 있으며, 동의화면을 통해 사용자로부터 사용자 정보 및 기능 활용 동의를 받을 수 있습니다.

함수 호출시 팝업으로 카카오 로그인 동의 화면이 표시됩니다. 로그인 요청 결과 토큰이 발급되며, 이 토큰은 SDK 내부적으로 사용되고 있기 때문에 별도의 처리가 필요하지 않습니다. 로그인 성공 시 서비스의 로그인 및 회원 가입 처리가 필요합니다. 인증 성공 시 서비스의 로그인 처리는 success 콜백함수를 사용해야 합니다.

출처 : https://developers.kakao.com/docs/latest/ko/kakaologin/js#advanced-guide

친절하게 샘플도 보여준다.

Kakao.Auth.login({
  success: function(response) {
    console.log(response);
  },
  fail: function(error) {
    console.log(error);
  },
});

왜 그때는 이걸 못 찾았을까...

아무튼 success 콜백함수를 통해 response를 콘솔에 띄어보면...
이렇게 예쁜 모습으로 나온다.
access_token, refresh_token 등등 다 있다.

추가적으로...
카카오의 SDK를 react에서 활용하려면 window 객체를 사용해야 한다.
그렇지 않으면 Kakao가 정의되지 않았다는 에러가 발생한다.



솔직히 이 내용을 공식문서에서 보았을 때 당황스러웠다.
저 부분을 못 찾아서 프로젝트 기간에 하루, 이틀을 고생한 걸 생각하니 부끄럽기도 했다.
그때는 문제를 해결하고 싶은 마음에 급했나...

아무튼 공식문서를 믿어야 한다.

profile
생경하다.

1개의 댓글

comment-user-thumbnail
2021년 10월 1일

안녕하세요. 글 잘 읽었습니다.
access_token을 백엔드로 보낸 뒤에는 백엔드에서 어떤 처리를 해줘야 하는지 알려주실 수 있나요?

답글 달기