비동기 통신 실습 : 카카오 API를 활용한 로그인 기능 구현

1. 비동기 통신을 위한 사전 지식 1.1 개요 1.2 OAuth 1.2.1 OAuth 2.0 1.2.2 OAuth 구성 요소 1.2.3 OAuth의 로그인 방식 1.3 카카오 로그인 흐름 1.3.1 카카오 로그인 과정의 프레임 1.3.2 카카오 로그인 과정의 세부적인 과정 1.3.3 카카오 로그인 과정의 도식적 표현 1.4 카카오 developers 1.4.1 애플리케이션 추가하기 1.4.2 Web 플랫폼 등록 1.4.3 Redirect URI 설정 1.4.4 카카오 로그인 동의 항목 설정 2. API 실습 2.1. HTML & CSS 코드 2.2 Javascript 코드

1. 비동기 통신을 위한 사전 지식

1.1 개요

비동기 통신은 API를 활용하기 때문에 어떤 방법으로 호출하고 데이터를 전송하는지 파악하는 작업은 필수적이다. 그렇기에 실습에 앞서 카카오 개발자 페이지에서 제공하는 문서들을 바탕으로 전반적인 로그인 흐름과 도구들을 활용하여 프로젝트에 적용하는 과정을 살펴보자.

1.2 OAuth

1.2.1 OAuth 2.0

OAuth는 Open Authorization의 줄임말으로, 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준이다. OAuth 2.0은 OAuth 1.0에 비해 보안상의 이슈를 해결한 버전이다.

이러한 표준을 사용하는 대표적인 기업에는 구글, 페이스북, 카카오, 네이버 등이 있다.

1.2.2 OAuth 구성 요소

사용자: 서비스를 이용하려는 사람, 개인정보(Resource)를 소유하고 있는 사람이기도 하다.

클라이언트: 사용자가 이용하려는 서비스, 클라이언트는 사용자에게 필요한 개인정보를 요청한다.

Authorization Server: 사용자에게 권한을 부여해주는 서버, 사용자는 개인정보를 이 서버에 전송하여 Authorization Code를 받는다. 클라이언트는 사용자의 Authorization Code를 서버에 전송하여 Token을 발급받는다.

Resource Server: 사용자의 개인정보를 가지고있는 OAuth 표준을 사용하는 기업의 서버를 뜻한다.

1.2.3 OAuth의 로그인 방식

소셜 로그인 같은 경우에는 클라이언트가 Resource Server에 사용자의 개인정보를 요청하여 사용자 대신 로그인하는 방식이다.

1.3 카카오 로그인 흐름

1.3.1 카카오 로그인 과정의 프레임

JavaScript SDK / REST API를 활용한 서비스앱에서의 카카오 로그인 흐름은 아래와 같이 크게 3가지 단계로 나뉜다.


1. 인가 코드 받기 (Authorization Code)
2. 인가 코드를 통해 토큰 발급 (Acess Token)
3. 토큰을 활용하여 정보 수집

1.3.2 카카오 로그인 과정의 세부적인 과정

위에서 본 3단계 과정이 어떻게 이루어지는지 자세히 살펴보자.

우선, 사용자가 서비스 앱에서의 ‘카카오로 로그인하기’와 같은 버튼을 누르면 카카오 로그인 화면을 보게 된다. 그리고 카카오 로그인 및 동의 항목을 체크를 진행하면 카카오 서버로 해당 내용이 전달된다.

💡

서비스 앱에서 사용자에게 카카오 로그인 화면을 볼 수 있게 해주는 함수 4가지 Kakao.Auth.authorize : 로그인 화면으로 링크가 이동 Kakao.Auth.login : 팝업으로 된 로그인 창 (한 번 로그인하면 자동로그인) Kakao.Auth.loginForm : 팝업으로 된 로그인 창 (매번 새로운 로그인 창) Kakao.Auth.createLoginButton : 로그인 버튼

이렇게 로그인을 하게 되면 카카오 서버는 서비스 앱의 Redirect URI로 Authorization Code(인가 코드)를 전달해주는데, 이 인가 코드를 통해 서비스 앱은 카카오 서버에 사용자 정보에 접근할 수 있는 토큰에 대한 발급을 요청하고, 토큰을 발급받게 된다.

이 토큰을 활용하여 서비스 앱은 카카오 서버에게 사용자의 정보 수집을 요청할 수 있고, 이 정보를 통하여 서비스 앱에서는 자체적으로 구현한 로그인 or 회원 가입 과정을 사용자가 거칠 수 있도록 하고, 이 과정을 거친 사용자는 서비스 앱을 이용할 수 있게 된다.

💡

토큰을 통해 카카오 API에 접근하여 정보 수집을 할 수 있는 함수 KaKao.API.request()

1.3.3 카카오 로그인 과정의 도식적 표현

아래의 그림은 위에서 설명한 과정을 눈으로 보기쉽게 표현한 과정이다. 위의 설명이 한 번에 이해되지않는다면 그림을 보고 다시 한 번 읽어보는 것을 추천한다.

카카오야 사용자가 로그인하고 싶대!!

kakao

그래? 너 로그인할래?

응 나 로그인할게!

쟤네는 이런 정보가 필요하다는데 너 동의해?

kakao

그럼그럼 동의하지!

사용자가 동의한대! 접근 권한(인가코드) 줄게

고마워! 여기 사용자가 동의한다는 증거(인가코드)야!! 사용자 정보에 접근가능한 토큰을 줄래?

kakao

알았어 토큰 발급해줄게~

카카오야 사용자가 로그인하고 싶대!! kakao 그래? 너 로그인할래? 응 나 로그인할게! 쟤네는 이런 정보가 필요하다는데 너 동의해? kakao 그럼그럼 동의하지! 사용자가 동의한대! 접근 권한(인가코드) 줄게 고마워! 여기 사용자가 동의한다는 증거(인가코드)야!! 사용자 정보에 접근가능한 토큰을 줄래? kakao 알았어 토큰 발급해줄게~

1.4 카카오 developers

카카오 API를 활용한 비동기 통신 실습을 하기 전에 카카오 developers에 대한 이해가 필요하다. 카카오 developers란 카카오 API를 활용하여 다양한 애플리케이션을 개발할 수 있는 API플랫폼으로 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공한다.

1.4.1 애플리케이션 추가하기

[내 애플리케이션] > [애플리케이션 추가]에서 새로운 애플리케이션을 등록할 수 있다. 앱 아이콘, 앱 이름, 사업자명 등을 입력한다.

등록한 애플리케이션을 클릭하면 해당 애플리케이션의 키를 확인할 수 있다. PC 또는 모바일 웹 브라우저(Web Browser) 환경에서 애플리케이션을 등록할 경우 JavaScript 키를 사용하여 Kakao.Auth.authorize 함수에 접근하여 카카오 로그인 화면에 접근 할 수 있다. 자세한 내용은 API 실습 파트에서 보도록 하자

1.4.2 Web 플랫폼 등록

사이트 도메인은 JavaScript SDK, 카카오톡 공유, 카카오맵, 메시지 API 사용시 등록이 필요하다.

[ 플랫폼 설정하기] > [Web 플렛폼 등록]에서 사이트 도메인에 localhost를 설정 해주고 상태를 활성화 하면 카카오 로그인이 가능한 상태가 된다.

1.4.3 Redirect URI 설정

Web 플랫폼 등록이 완료되었다면 Redirect URI(회신 URL)을 설정해야 한다. Redirect란 말 그대로 다시 지시하는 것을 뜻한다. 예를들어 브라우저가 A라는 URL을 웹 서버에 요청했을 때 서버는 HTTP 응답 메시지를 통해 B라는 URL로 요청할 수 있도록 지시한다. Redirect가 필요한 이유는 권한이 없는 상태에서 사용자의 [마이페이지] URL에 접근하고자 했을 때 [마이페이지]가 아닌 [로그인 페이지]로 이동시킬 수 있기 때문이다. [등록하러 가기]를 클릭하고 localhost/html 파일 경로 형식으로 등록한다.

1.4.4 카카오 로그인 동의 항목 설정

동의 항목

카카오 로그인 사용자의 카카오 서비스 기능을 활용하기 위해서 각 정보와 기능 접근에 대한 사용자 동의가 필요하다. 사용자는 카카오 로그인 시 서비스에 카카오계정 정보나 기능을 제공할 것인지 항목별로 동의할 수 있으며, 카카오는 사용자의 동의가 있는 항목에 한하여 사용자 정보 가져오기를 통해 정보를 제공하거나 API 요청을 수행한다. [내 애플리케이션] > [카카오 로그인] > [동의항목]에서 사용자 정보에 대한 설정을 할 수 있다.

동의 단계 상세

ㅤ	ㅤ
필수 동의	카카오 로그인 시 사용자가 필수로 동의해야 한다.
선택 동의	사용자가 동의하지 않아도 카카오 로그인을 완료할 수 있다.
이용 중 동의	카카오 로그인 시 동의를 받지 않고, 항목이 필요한 시점에 동의를 받는다.
사용 안함	사용자에게 동의를 요청하지 않는다.

개인정보 동의 항목

[내 애플리케이션] > [카카오 로그인] > [동의 항목] > [개인정보]에서 설정하며 닉네임, 프로필 사진, 카카오 계정, 성별 연령대 등 다양한 동의 항목을 제공한다. 해당 동의 항목은 API를 통한 사용자 정보 제공에 필요하다. 아래의 이미지는 각 동의항목별 동의 상태 설정이 완료된 모습이다.

2. API 실습

javascript 코드를 살펴보며 함께 실습해보자. 스타일은 아래 제공해드리는 html, css 코드를 활용하셔도 좋고, 직접 만들어보셔도 좋다. vscode의 확장 프로그램인 live server를 통해 로컬 호스트에서 로그인이 작동하는 것을 확인해볼 수 있다.

Live Server - Visual Studio Marketplace

Live Server loves 💘 your multi-root workspace Live Server for server side pages like PHP. Check Here Launch a local development server with live reload feature for static & dynamic pages. [NOTE: In case if you don't have any .html or .htm file in your workspace then you have to follow method no 4 & 5 to start server.]

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

코드가 작성된 파일에서 마우스 우클릭 > Open with Live Server 실행

2.1. HTML & CSS 코드

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>카카오 API를 이용한 로그인 구현</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="flex">
        <div class="login-wrap">
            <div class="login-inner">
                <h2>로그인</h2>
								<form>
	                  <input placeholder="ID" type="text">
	                  <input placeholder="Password" type="password">
								</form>
                <button class="login-button" type="button">로그인</button>
                <p class="or">또는</p>
                <section class="social">
                    <button class="social-button kakao" type="button">카카오톡 계정으로 로그인</button>
                </section>
            </div>
        </div>
    </div>
</body>
</html>

CSS 코드


// index.css
@import url(./reset.css); // 에릭 마이어 리셋 CSS import

/* login */
.login-wrap {
  background-color: lightgoldenrodyellow;
  height: 100vh;
  text-align: center;
  padding: 50px;
  box-sizing: border-box;
}

.login-title {
  font-size: 30px;
  font-weight: 700;
}

.login-inner {
  padding: 20px;
  width: 370px;
  margin: 0 auto;
}

.login-inner h2 {
  font-size: 50px;
  font-weight: 700;
}

.login-inner p {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 60px;
}

.login-inner input {
  border: none;
  height: 28px;
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 20px 25px;
  box-sizing: border-box;
  border-radius: 7px;
}

.login-button {
  background-color: #b4b4b4;
  color: #fff;
  font-size: 14px;
  height: 38px;
  border-radius: 10px;
}

.login-inner .or {
  text-align: center;
  margin: 30px 0;
  color: #b4b4b4;
  font-size: 12px;
  position: relative;
}

.login-inner .or::before {
  content: " ";
  position: absolute;
  background-color: #b4b4b4;
  top: 0;
  left: 0;
  right: 60%;
  bottom: 0;
  height: 1px;
  margin: auto 0;
}

.login-inner .or::after {
  content: " ";
  position: absolute;
  background-color: #b4b4b4;
  top: 0;
  left: 60%;
  right: 0;
  bottom: 0;
  height: 1px;
  margin: auto 0;
}

.link-button-wrap {
  display: flex;
  justify-content: space-between;
}

.social {
  background-color: white;
  border-radius: 44px;
}

.social-button {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  padding: 13px 0;
  border-radius: 44px;
  color: #767676;
  position: relative;
}

.social-button::before {
  content: " ";
  width: 24px;
  height: 24px;
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 17px;
  margin: auto 0;
}

.social-button.kakao {
  border: 1px solid #f2c94c;
}

.social-button.kakao::before {
  background: url(./icon/message-circle.png);
}

2.2 Javascript 코드

본격적인 코드를 작성하기에 앞서 위의 준비과정에서 발급받았던 API 키를 별도의 파일에 분리하는 과정이 필요하다. 발급받은 Javascript 키는 개인별로 고유한 값이기 때문에, github 등에 프로젝트를 업로드하거나 배포할 때 주의하여야 한다. API 키를 숨기는 방법에는 다양한 방식이 존재하지만 가장 간단한 방법으로 API 키를 가지고 있는 별도의 파일을 생성하고, gitignore 를 통해 업로드하지 않는 방식을 소개하겠다.


config = {
  API_KEY : 'a1b2c3d4e5', // 문자열 타입 확인
}

config.js 파일을 별도로 생성하고, 발급받은 키 정보를 입력한다.


config.js

gitignore 파일을 생성하고, 위에서 만든 config.js 파일을 추가해준다.

위와 같이 gitignore를 통해 config.js 파일만 업로드되지 않도록 해주면 퍼블릭하게 key를 노출하지 않을 수 있다.


// index.html에 추가 작성 (별도의 js 파일로 분리해도 무방하다.)

<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
// 카카오 API들을 사용하기 위한 최신 버전 JavaScript SDK 주소를 가장 상단에 입력한다. SDK란 Software Development Kit의 약자로, 여기서 SDK는 카카오에서 만든 개발 도구의 모음을 뜻하며 API보다 광범위한 개념이다.
<script type='text/javascript' src='./config.js'></script> // 위에서 만든 config.js 파일 가져오기
<script>
    Kakao.init(config.API_KEY); // SDK를 초기화하고 config.js 파일에서 개인별 고유 javascript 앱 키 가져오기
    console.log(Kakao.isInitialized()); // SDK 초기화가 잘 되었는지 여부 판단, false가 출력된다면 javascript 키 값을 정확히 입력했는지 확인이 필요하다.
    function kakaoLogin() {  // kakaoLogin 함수 정의
        Kakao.Auth.login({ // Auth에 내장된 login 메서드 사용 (팝업 로그인창, 한번 로그인하면 자동 로그인)
            success: function (response) { // login 성공시
                Kakao.API.request({ // 유저 정보 요청해서 받아오는 내장 메서드
                    url: '/v2/user/me', // 유저 정보를 요청할 url
                    success: res => {
                        console.log(res) // 유저 정보 요청 성공시 콘솔에서 response 확인
                    },
                    fail: err => { // 유저 정보 요청 실패시 콘솔에 에러 출력
                        console.log(error)
                    },
                })
            },
            fail: err => { // login 실패시 콘솔에 에러 출력
                console.log(err)
            },
        })
    }

    const $kakaoBtn = document.querySelector('.kakao');
    $kakaoBtn.addEventListener('click', kakaoLogin); // 로그인 버튼 클릭시 위에서 정의한 로그인 함수 실행
</script>

로그인에 성공하면 위와 같이 콘솔에 로그인 정보가 출력되는 것을 확인할 수 있다.

참고 자료

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

https://developers.kakao.com/product