샘플 코드로 테스트하기

카카오디벨로퍼스는 카카오 로그인 기능을 체험해볼 수 있도록 샘플 코드를 제공합니다. 이 튜토리얼은 개발 환경 설정부터, 코드 실행, 테스트 안내까지 단계별로 설명합니다.

개요

1. 개발 환경 준비하기

샘플 코드를 실행하려면 개발 도구와 사용할 언어에 필요한 소프트웨어를 먼저 설치해야 합니다. 사용하려는 언어의 설치 요구사항을 참고해 필요한 준비를 완료합니다.

1-1. 필요한 개발 도구 준비하기

1-2. 개발 언어 및 도구 설치하기

샘플 코드를 실행하려면 사용하는 언어와 관련 도구가 설치되어 있어야 합니다.

설치 확인

터미널에 아래 명령어를 입력해 설치 여부를 확인합니다. 사용하려는 언어 또는 도구에 해당하는 명령어를 입력했을 때, 버전 정보가 출력되면 설치가 완료된 것입니다.

# Node.js를 사용하는 경우
node -v
npm -v

# PHP를 사용하는 경우
php -v            

# Python을 사용하는 경우
python3 --version 

최소 요구 사항

샘플 코드를 이용하려면 안내된 버전 이상으로 설치해야 합니다.

설치

버전 정보가 출력되지 않으면 아래 표를 참고해 해당 언어를 설치합니다.

설치가 완료된 후, 설치 여부 확인 명령어를 다시 입력해 정상적으로 설치되었는지 확인합니다.

2. 프로젝트 설정하기

2-1. 폴더 생성하기

새 프로젝트 폴더를 생성 후, 생성한 폴더로 이동하기 위해 터미널에 아래 명령어를 차례로 입력합니다. 이 튜토리얼에서는 kakao-test 폴더에서 설정 파일과 코드 파일을 생성할 예정입니다.

mkdir kakao-test
cd kakao-test

2-2. 샘플 코드 가져오기

이 튜토리얼과 카카오 로그인 구현하기에서 사용된 샘플 코드는 아래 GitHub 저장소에서 다운로드할 수 있습니다.

언어별 GitHub 저장소에서 [Code] > [Download ZIP] 버튼을 클릭해 ZIP 파일을 다운로드합니다. 다운로드한 파일을 압축을 해제한 후, 코드 편집기에서 해당 폴더를 엽니다.

또는 터미널에서 아래 Git 명령어로 레파지토리를 복제(Clone)한 후, 해당 프로젝트 폴더로 이동합니다. (참고: GitHub 공식 문서) 이 방법을 사용하려면 Git을 설치해야 합니다.

git clone https://github.com/kakao-tam/developers-node.js.git
cd developers-node.js 

git clone https://github.com/kakao-tam/developers-php.git
cd developers-php.git

git clone https://github.com/kakao-tam/developers-python.flask.git
cd developers-python.flask

2-3. 의존성 설치하기

필요한 외부 라이브러리를 설치합니다. 설치하지 않으면 코드 실행 시 모듈을 찾을 수 없다는 오류가 발생할 수 있습니다.

npm install

pip install -r requirements.txt

3. 앱 설정하기

이 단계에서는 카카오 로그인 기능을 사용하기 위해 카카오디벨로퍼스에서 설정해야 하는 사항을 안내합니다.

3-1. 앱 생성하기

카카오 API를 사용하려면 먼저 카카오디벨로퍼스 앱을 생성해야 합니다.

앱 생성 방법은 카카오 API 시작하기를 참고합니다.

3-2. 카카오 로그인 기능 활성화하기

1. [내 애플리케이션]에서 생성한 앱을 선택합니다. (내 애플리케이션 바로가기 →)
2. [제품 설정] 하위의 [카카오 로그인]을 선택합니다.
3. [카카오 로그인] 화면에서 [상태]를 [ON]으로 변경합니다.

3-3. 리다이렉트 URI 등록하기

카카오 로그인을 사용하려면, 로그인 후 인가 코드가 전달될 주소(리다이렉트 URI)를 등록해야 합니다.

[카카오 로그인] > [Redirect URI]에서 리다이렉트 URI를 등록합니다. 튜토리얼에서는 아래 값을 사용하지만, 필요에 따라 자유롭게 등록할 수 있습니다.

참고

• Q. 리다이렉트 URI는 무엇인가요?
• Q. 인가 코드와 액세스 토큰이 무엇인가요?

3-4. 동의항목 설정하기

카카오가 API로 사용자 정보에 접근하려면 사용자의 동의가 필요합니다. 사용자 동의를 위해 동의항목을 설정합니다.

1. [내 애플리케이션]에서 사용할 앱을 선택 후, [카카오 로그인] > [동의항목]으로 이동합니다.
2. 동의를 받으려는 동의항목 행에서 [설정] 버튼을 누릅니다.
3. [동의 단계]와 [동의 목적]을 설정한 후, 저장합니다. (참고: 설정하기)

비활성화되어 있는 동의항목과 동의 단계를 설정하려면 앱 권한 신청이 필요합니다.

이 튜토리얼에서는 아래와 같이 동의항목을 설정하겠습니다.

참고

• 동의항목: 카카오 API로 접근할 수 있는 사용자 정보의 범위를 설정하는 항목
• Q. 사용자 동의는 왜 필요한가요?
• Q. 사용자 동의를 어떻게 받을 수 있나요?

4. 테스트 코드 실행하기

4-1. 코드 편집기에서 프로젝트 열기

코드 편집기(IDE)에서 kakao-test 폴더를 엽니다. 프로젝트 설정하기 단계에서 수행한 설정이 반영된 폴더를 확인할 수 있습니다.

4-2. 앱 정보 반영하기

각 언어별 설정 파일에서 사용할 앱 정보를 입력합니다.

• Node.js: app.js
• PHP: api.php
• Python: api.py

위의 설정 파일을 열어 client_id 값에 내 앱의 REST API 키를 입력합니다. 나머지 변수는 샘플 코드 값을 그대로 사용해도 됩니다.

예시

//app.js

const client_id = "6f95e7e3146********"; // 앱의 REST API 키 입력로 교체
// const client_secret = " this is client secret key "; 
const domain = "http://localhost:4000";
const redirect_uri = `${domain}/redirect`;
const token_uri = "https://kauth.kakao.com/oauth/token";
const api_host = "https://kapi.kakao.com";

// api.php

$client_id = '6f95e7e3146********';  // 앱의 REST API 키 입력로 교체
// $client_secret = ' this is client secret key ';
$domain = 'http://localhost:4000';
$redirect_uri = $domain . '/api.php?action=redirect';
$kauth_host = 'https://kauth.kakao.com';
$kapi_host = 'https://kapi.kakao.com';

# api.py

client_id = "6f95e7e3146********"  # 앱의 REST API 키 입력로 교체
# client_secret = " this is client secret key "
domain = "http://localhost:4000"
redirect_uri = domain + "/redirect"
kauth_host = "https://kauth.kakao.com"
kapi_host = "https://kapi.kakao.com"

4-3. 서버 실행하기

터미널을 열어 복제한 폴더로 이동 후, 서버를 실행하는 명령어를 입력합니다.

cd developers-node.js 
npm start  

cd developers-php
php -S localhost:4000

cd developers-python.flask
python api.py

4-4. 웹 브라우저 접속하기

아래 예시와 같이 터미널에 나타나는 웹 브라우저 주소로 접속합니다.

> kakao-test@1.0.0 start
> node app.js

Server is running at http://localhost:4000

PHP 8.4.7 Development Server (http://localhost:4000) started

* Running on all addresses.
  WARNING: This is a development server. Do not use it in a production deployment.
* Running on http://172.12.34.5:4000/ (Press CTRL+C to quit)
:

5. 테스트하기

웹 브라우저에 접속하면 아래와 같은 테스트 웹페이지를 확인할 수 있습니다. 페이지는 아래와 같이 구성돼 있습니다.

5-1. 카카오계정으로 로그인하기

[카카오계정으로 로그인] 버튼을 누르면 카카오 로그인 구현하기 > 3-3. 인가 코드 받기 코드가 실행되어 카카오 로그인 화면이 나타납니다.

본인의 카카오계정으로 로그인 후, 동의화면에서 동의하면 3-4. 액세스 토큰 요청 및 세션 저장하기 코드가 실행되고, 테스트 웹페이지로 돌아옵니다. 만약 에러가 발생한 경우, 문제 해결을 참고합니다.

5-2. 프로필 조회하기

[프로필 조회] 버튼을 누르면 카카오 로그인 구현하기 > 3-5. 로그인한 사용자 정보 가져오기 코드가 실행됩니다.

응답 예제

요청 성공 시, [응답 확인 영역]에서 카카오 API 서버가 보낸 사용자 정보를 확인할 수 있습니다. 사용자의 동의 여부에 따라 일부 응답 필드는 제공되지 않을 수 있습니다. 즉, 사용자가 제공에 동의한 사용자 정보만 제공됩니다.

요청에 실패하거나 오류가 발생한 경우, 에러 메시지도 함께 표시됩니다. 에러 발생 시 문제 해결에서 원인을 파악할 수 있습니다.

{
  // 서비스에서 사용자를 구분하기 위한 회원번호
  "id": 123456789, 
  // 카카오 로그인으로 사용자가 앱과 연결된 시간
  "connected_at": "2023-10-01T12:34:56Z",
   "properties": {
    "nickname": "홍길동",
    "profile_image": "http://.../profile.jpg",
    "thumbnail_image": "http://.../thumb.jpg"
  },
  // 카카오계정에 저장된 사용자 정보
  "kakao_account": {
    "email": "hong@example.com",
    "profile": {
      "nickname": "홍길동",
      "profile_image_url": "http://.../profile.jpg"
    }
  }
}

5-3. 로그아웃하기

[로그아웃] 버튼을 누르면 사용자의 액세스 토큰을 만료시키며, 사용자는 앱에서 로그아웃됩니다. 단, 카카오계정으로 로그인한 웹브라우저의 로그인 세션은 유지됩니다.

5-4. 연결 끊기

연결 끊기를 테스트하기 위해 다시 로그인 합니다. [연결 끊기] 버튼을 누르면 카카오 로그인 구현하기 > 3-6. 로그아웃 및 연결 끊기 구현하기 코드가 실행되어 앱과 사용자 계정의 연결이 해제됩니다.

로그아웃과 달리, 연결이 끊어진 후 재로그인을 시도하면 동의 화면이 나타나며 사용자는 앱에 다시 연결(가입)할 수 있습니다.

더보기

• 카카오 API 시작하기: 카카오디벨로퍼스 앱 생성부터 카카오 API를 호출하는 방법까지 단계별로 안내
• 카카오 로그인 구현하기: Node.js, PHP, Python 환경에서 프로젝트 생성부터 직접 로그인 기능을 구현하는 방법 안내