✏️ Development/kakao OAuth2

[카카오 OAuth2] 웹에서 카카오 로그인을 구현해보자 (1)

Lennon 2022. 2. 7. 04:14
728x90
반응형

SNS 로그인?

요즘 대부분의 서비스는 sns 로그인이 필수적으로 들어가는 것 같다. 아마도 사용자 경험 측면에서 편리하고 유용하게 서비스를 이용할 수 있도록 하기 위해 그런 것이 아닐까?라는 개인적인 추측이다.

바로 본론으로 들어가서 서비스를 기초까지 구현해보자.

 

이번 포스팅은 카카오 로그인을 javascript키를 은닉하고, 모듈화로 진행해 기본적인 로그인, 로그아웃을 구현할 것이며,

다음 포스팅은 정보 제공에 대해 그 값들을 가져와 로그인 성공 시 프로필 사진, 이름 등을 본인의 웹 페이지에 띄워볼 것이다. 

 

1. kakao developers 접속(https://developers.kakao.com/)

1. 내 어플리케이션 들어가기

2. 어플리케이션이 없다면 새로 추가하고, 아니면 바로 들어가 보자.

 

들어가면 바로 앱 키를 찾아볼 수 있을 것이다. 해당 포스팅에서는 JavaScript 키를 이용해 구현할 것이다.

해당 키는 좀 이따 사용해보도록 하자.

이제 플랫폼으로 들어가 Web에 사이트 도메인을 추가해보자. (해당 포스팅에선 Local로만 진행할 거라 일단 저렇게 해놓았다.)

 

여기서 중요한 건 밑에 Redirect URI이다. 카카오 로그인을 누르면 로그인 페이지로 이동하게 되고, 로그인을 성공했을 때 이동하는 페이지를 지정할 수 있다. 자바스크립트는 사실 window.location.href로 로그인 성공 시 페이지 이동하게 만들 수 있지만, rest API를 사용하는 경우 필수적으로 작성해줘야 한다.

 

로그인 성공하면 main.html로 가도록 구성해봤다.

 

정보동의도 프로필 정보와 카카오 계정을 받아 다음 포스팅에서 웹에 띄어보도록 하자.

2. VScode 실행

 

폴더 구성은 다음과 같다.

(모듈화, 은닉 등 진행하므로 똑같이 하는 게 편리할 것 같다.)

(index.js와 profile.js는 아직 사용하지 않지만, 다음 포스팅에서 사용하므로 만들어놓자)

 

Key를 은닉하자!

우선 우리의 javascript키는 소중하기 때문에 정보를 은닉할 필요성이 있다. 깃허브에 커밋하거나, 서비스 이용에 노출이 된다면 문제가 될 수 있을 것이다.

// key.js

const KEY = {
  kakao: '자바스크립트 key',
};

export default KEY;

우선 key.js 파일을 만들어 코드를 입력하고 아까 위의 본인의 javascript키 값을 입력하고 모듈화 하자.

🔥필수적으로 .gitignore에 key.js를 입력하도록 하자🔥

 

// Auth.js

import key from '../config/key.js';

window.Kakao.init(key.kakao);

const kakaoLogin = () => {
  window.Kakao.Auth.login({
    scope: 'profile, account_email', // 동의항목 페이지에 있는 개인정보 보호 테이블의 활성화된 ID값을 넣습니다.
    success(response) {
      console.log(response); // 로그인 성공하면 받아오는 데이터
      window.Kakao.API.request({
        // 사용자 정보 가져오기
        url: '/v2/user/me',
        success: (res) => {},
      });

      window.location.href = 'main.html'; // 리다이렉트 되는 코드
    },
    fail(error) {
      console.log(error);
    },
  });
}

const kakaoLogout = () => {
    if (Kakao.Auth.getAccessToken()) {
    Kakao.API.request({
      url: '/v1/user/unlink',
      success: function (response) {
        alert('로그아웃 되었습니다.');
        window.location.href = 'index.html';
      },
      fail: function (error) {
        console.log(error);
      },
    });
    Kakao.Auth.setAccessToken(undefined);
  }
}

export { kakaoLogin, kakaoLogout };

그 후 Auth.js파일을 생성해 해당 코드를 작성해보도록 하자. 

모듈화 한 key값을 import 해서 불러와

window.Kakao.init(key.kakao);

해당 코드에 입력한다.

유의할 점

kakaoLogin선언 뒤 2번째 줄을 보면 scope라고 작성돼있는 게 보일 것이다.

해당 값을 입력해줘야 다음 포스팅에 해줄 닉네임과 프로필 사진, email 가져오기에 지장이 없으므로 같이 작성해주도록 하자.

❌만약 애플리케이션의 정보동의 항목과 해당 scope값이 맞지 않으면 오류가 발생하니 조심하자❌

ex) 정보동의에서 이메일 사용 안 함 상태임에도 scope에 email값이 들어가 있는 경우

 

kakaoLogin, kakaoLogout 함수를 작성하고 마찬가지로 모듈화를 위해 export 해준다.

 

// Login.js

import { kakaoLogin } from './Auth.js';

class Login {
  kakaoIn() {
    document
      .querySelector('.kakao-login-btn')
      .addEventListener('click', (e) => {
        kakaoLogin();
      });
  }
}

const login = new Login();

login.kakaoIn();

Login.js에서 kakaoLogin함수를 불러와 html에 class가 kakao-login-btn인 요 소을 찾아 로그인 이벤트를 걸어준다.

 

// Logout.js

import { kakaoLogout } from './Auth.js';

class Logout {
  kakaoOut() {
    document
      .querySelector('.kakao-logout-btn')
      .addEventListener('click', (e) => {
        kakaoLogout();
      });
  }
}

const logout = new Logout();

logout.kakaoOut();

로그아웃도 마찬가지로 구성해준다. 로그아웃은 카카오 로그인 완료 후 main.html로 이동하므로 main.html에서 실행되어야 한다.

<!-- index.html -->

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Steady Life</title>
  </head>
  <body>
    <body>
      <header class="login-page">
        <div class="login-page-item">
          <h1>Steady Life</h1>
        </div>
        <div class="login-page-item">
          <img class="kakao-login-btn" src="images/kakao_login.png" />
        </div>
      </header>
      <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
      <script type="module" src="js/Auth/Login.js"></script>
    </body>
  </body>
</html>

index.html은 이렇게 작성해보자.

img파일에 있는 kakao_login.png는 카카오 디벨로퍼 홈페이지에서 사이즈별로 쉽게 구할 수 있다.

(https://developers.kakao.com/tool/resource/login)

<!-- main.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"
    />
    <title>Document</title>
  </head>
  <body>
    <header>
      <div class="main-header">
        <h1>Steady Life</h1>
        <button class="kakao-logout-btn btn btn-success" type="button">
          로그아웃
        </button>
      </div>
    </header>
    <div id="app"></div>
    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
    <script type="module" src="js/Auth/Logout.js"></script>
  </body>
</html>

다 입력했으면 로그인 이미지를 클릭해 로그인을 시도해보자. 로그인 성공 후 main.html로 이동하는 것을 확인할 수 있다.

그리고 로그아웃도 눌러보자. 로그인 페이지로 이동하는 것을 확인할 수 있다.

 

개발자 도구에서 로그인, 로그아웃마다 토큰이 어떻게 되는지 확인해보자.

로그인되어있을 때는 키 값이 모두 존재하는 걸 확인할 수 있다.

로그아웃 됐을 때는 키 값이 사라지는 걸 확인할 수 있다. 

 

다음 포스팅에선 정보동의 항목을 웹에 띄어보도록 하자!

728x90
반응형