mkdir kakao-login
cd kakao-login

npm init -y

{
  "name": "kakao-login",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

npm install express express-session axios qs

.
├── index.html   # 메인 HTML 파일
├── app.js       # 메인 애플리케이션 파일
├── package.json # 프로젝트 메타데이터 및 의존성
└── README.md    # 프로젝트 설명 파일

//app.js

const express = require('express')
const session = require('express-session')
const qs = require('qs')
const axios = require('axios')
const app = express()
const port = 4000

// 정적 파일 서빙 설정 추가
app.use(express.static(__dirname))
app.use(express.json()) // JSON 파싱을 위해 추가

// 로그인 상태 유지를 위한 세션 설정
app.use(
  session({
    secret: 'your session secret',
    resave: false,
    saveUninitialized: true,
    cookie: { secure: false },
  })
)

// 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 호출 서버 주소

// API 요청 함수 정의
async function call(method, uri, param, header) {
  let rtn
  try {
    // 지정된 method, uri, param, header 값을 사용해 카카오 API 서버로 HTTP 요청 전송
    rtn = await axios({
      method: method, // "POST" 또는 "GET" 등 HTTP 메서드
      url: uri, // 요청할 API 주소
      headers: header, // 요청 헤더 (예: Content-Type, Authorization 등)
      data: param, // 전송할 요청 데이터 (body)
    })
  } catch (err) {
    // 오류 발생 시, 응답 객체에서 오류 응답 내용 저장
    rtn = err.response
  }
  // 요청 성공 또는 실패에 상관없이 응답 데이터 반환
  return rtn.data
}

// app.js
// 이전 단계에서 입력한 코드
//   :

// 카카오 인증 서버로 인가 코드 발급 요청
app.get('/authorize', function (req, res) {
  // 선택: 사용자에게 추가 동의를 요청하는 경우, scope 값으로 동의항목 ID를 전달
  // 친구 목록, 메시지 전송 기능의 경우, 추가 기능 신청 필요
  // (예: /authorize?scope=friends,talk_message)
  let { scope } = req.query
  let scopeParam = ''
  if (scope) {
    scopeParam = '&scope=' + scope
  }

  // 카카오 인증 서버로 리다이렉트
  // 사용자 동의 후 리다이렉트 URI로 인가 코드가 전달
  res.status(302).redirect(`https://kauth.kakao.com/oauth/authorize?client_id=${client_id}&redirect_uri=${redirect_uri}&response_type=code${scopeParam}`)
})

// app.js
// 이전 단계에서 입력한 코드
//   :

// 카카오 인증 서버에서 전달받은 인가 코드로 액세스 토큰 발급 요청
app.get('/redirect', async function (req, res) {
  // 인가 코드 발급 요청에 필요한 파라미터 구성
  const param = qs.stringify({
    grant_type: 'authorization_code', // 인증 방식 고정값
    client_id: client_id, // 내 앱의 REST API 키
    redirect_uri: redirect_uri, // 등록된 리다이렉트 URI
    code: req.query.code, // 전달받은 인가 코드
    client_secret: client_secret, // 클라이언트 시크릿(Client Secret) 사용 시 추가 필요
  })

  // API 요청 헤더 설정
  const header = { 'content-type': 'application/x-www-form-urlencoded' }

  // 카카오 인증 서버에 액세스 토큰 요청
  const rtn = await call('POST', token_uri, param, header)

  // 발급받은 액세스 토큰을 세션에 저장 (로그인 상태 유지 목적)
  req.session.key = rtn.access_token

  // 로그인 완료 후 메인 페이지로 이동
  res.status(302).redirect(`${domain}/index.html?login=success`)
})

// app.js
// 이전 단계에서 입력한 코드
//   :

// 액세스 토큰을 사용해 로그인한 사용자의 정보 조회 요청
app.get('/profile', async function (req, res) {
  const uri = api_host + '/v2/user/me' // 사용자 정보 조회 API 주소
  const param = {} // 사용자 정보 요청 시 파라미터는 필요 없음
  const header = {
    'content-type': 'application/x-www-form-urlencoded', // 요청 헤더 Content-Type 지정
    Authorization: 'Bearer ' + req.session.key, // 세션에 저장된 액세스 토큰 전달
  }

  const rtn = await call('POST', uri, param, header) // 카카오 API에 요청 전송

  res.send(rtn) // 조회한 사용자 정보를 클라이언트에 반환
})

// app.js
// 이전 단계에서 입력한 코드
//   :

// 로그아웃 요청: 세션을 종료하고 사용자 로그아웃 처리
app.get('/logout', async function (req, res) {
  const uri = api_host + '/v1/user/logout' // 로그아웃 API 주소
  const header = {
    Authorization: 'Bearer ' + req.session.key, // 세션에 저장된 액세스 토큰 전달
  }

  const rtn = await call('POST', uri, null, header) // 카카오 API에 로그아웃 요청 전송
  req.session.destroy() // 세션 삭제 (로그아웃 처리)
  res.send(rtn) // 응답 결과 클라이언트에 반환
})

// 연결 해제 요청: 사용자와 앱의 연결을 해제하고 세션 종료
app.get('/unlink', async function (req, res) {
  const uri = api_host + '/v1/user/unlink' // 연결 해제 API 주소
  const header = {
    Authorization: 'Bearer ' + req.session.key, // 세션에 저장된 액세스 토큰 전달
  }

  const rtn = await call('POST', uri, null, header) // 카카오 API에 연결 해제 요청 전송
  req.session.destroy() // 세션 삭제 (연결 해제 처리)
  res.send(rtn) // 응답 결과 클라이언트에 반환
})

// app.js
// 이전 단계에서 입력한 코드
//   :

app.listen(port, () => {
  console.log(`Server is running at ${domain}`)
})

<!-- index.html -->
<!DOCTYPE html>
<html lang="kr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Kakao REST-API Node.js example</title>
    <!-- 카카오 JavaScript SDK를 불러오기 위한 스크립트 -->
    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
    <!-- UI 스타일을 설정하는 CSS 파일 임포트 -->
    <link rel="stylesheet" href="https://kakao-tam.github.io/developers-static/style.css" />
    <link rel="icon" type="image/png" href="https://devtalk.kakao.com/uploads/default/optimized/2X/9/9b7b5d9cbbe2e8d6a5410c2d28926804cd8b0bb1_2_32x32.png" />
  </head>

  <body>
    <div class="header">
      <h1>카카오 로그인 및 API 예제</h1>
    </div>
    <div class="main-container">
      <div class="container">
        <div class="vertical-layout">
          <script>
            const domain = window.location.origin
            Kakao.init(' JavaScript 키 ') // [JavaScript SDK로 로그인]을 테스트하려면 [플랫폼 키]에서 확인한 JavaScript 키를 입력하세요.

            function kakaoLogin() {
              Kakao.Auth.authorize({
                redirectUri: `${domain}/redirect`,
              })
            }

            function REST_Call(path) {
              fetch(domain + path)
                .then((response) => response.text()) // 응답을 텍스트로 변환
                .then((data) => {
                  try {
                    // JSON 파싱 시도
                    const jsonData = JSON.parse(data)
                    setContents(JSON.stringify(jsonData, null, 2))
                  } catch (e) {
                    // JSON 파싱 실패 시 텍스트로 출력
                    setContents(data)
                  }
                })
                .catch((error) => {
                  console.error('Fetch 에러:', error)
                })
            }

            function setContents(data) {
              document.getElementById('contents').value = data
            }
            // 로그인 성공 메시지 표시
            window.onload = function () {
              const urlParams = new URLSearchParams(window.location.search)
              if (urlParams.get('login') === 'success') {
                const successLabel = document.createElement('span')
                successLabel.textContent = '로그인 성공'
                successLabel.style.color = 'green'
                successLabel.style.marginLeft = '10px'
                document.querySelector('.login-buttons').appendChild(successLabel)
              }
            }
          </script>
          <!-- 로그인 버튼 영역 -->
          <div class="login-container">
            <div class="login-buttons">
              <!-- REST API로 로그인하기 위한 버튼 -->
              <a href="/authorize">
                <img src="//k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg" alt="카카오 로그인" />
              </a>
              <!-- JavaScript SDK로 로그인하기 위한 버튼, 테스트하려면 JS SDK 초기화 필요 -->
              <button
                onclick="kakaoLogin()"
                style="
                  background-color: white;
                  border: 1px solid var(--kakao-yellow);
                "
              >
                JavaScript SDK로 로그인
              </button>
            </div>
          </div>
          <!-- 로그인 기능을 테스트할 수 있는 버튼 영역 -->
          <div class="api-container">
            <div class="section-title">기본 기능</div>
            <div class="button-group">
              <button onclick="REST_Call('/profile')">사용자 정보 조회</button>
              <button onclick="REST_Call('/logout')" style="background-color: white; border: 1px solid #e5e5e5">로그아웃</button>
              <button
                onclick="REST_Call('/unlink')"
                style="
                  background-color: white;
                  color: #ff5c5c;
                  border: 1px solid #ff5c5c;
                "
              >
                연결 해제
              </button>
            </div>
          </div>
          <!-- 응답 확인 영역 -->
          <textarea id="contents" placeholder="이곳에 API 응답 결과가 표시됩니다."></textarea>
        </div>
      </div>
    </div>
  </body>
</html>

node app.js