[Node.js] 카카오 로그인 구현(REST API)

태연·2025년 3월 7일

JavaScript mysql node.js 카카오API

프로젝트

목록 보기

4/4

게시판 웹페이지를 만들면서 로그인/회원가입 기능도 구현하고 있다.
여기에 간편 로그인도 할 수 있으면 좋을 것 같다는 생각이 들어 카카오 로그인을 넣어보았다.

1. 준비 단계

먼저 카카오 developers에 들어가 내 애플리케이션을 클릭해준다.
그러면 애플리케이션을 추가할 수 있다.

대충 이름이나 이런거 정해서 저장해주면 애플리케이션이 생긴다.

해당 애플리케이션을 눌러 다음과 같은 화면을 볼 수 있는데 그 중에서 카카오 로그인 상태를 ON해줘야한다.

바로 밑에 Redirect URL도 있으니까 이것도 설정해준다.
이게 뭐냐면 페이지에서 로그인을 요청하게 되면 카카오의 로그인 페이지로 이동한다. 그리고 사용자가 로그인에 성공하면 다시 해당 웹페이지로 돌아가야 되는데 그 돌아갈 주소를 말하는 것이다.
즉!! 사진에 있는 주소를 따라하지 않아도 된다는 소리다.

자 이제 동의 항목에서 내가 가져오고 싶은 정보를 선택해보자...
엇...??

닉네임은 있는데 이름, 전화번호, 이메일이.. 권한이 없다...(두둥)
이럴수가...
어떻게 할 방법이 없는지 찾아보니까 비즈 앱으로 전환하면 된다고 한다. (휴.. 못하는 줄 알고 놀랐네)

앱 아이콘을 등록해주고

사업자 정보 등록을 눌러 개인 개발자 비즈 앱 전환을 클릭해주었다.

그런 다음!!!

테스트앱 생성을 해주면~~~

해당 앱에서 내가 원하던 동의항목을 설정할 수 있다.

그럼 이제 vsCode로 넘어와서 앱 설정 > 앱 키에 REST API 키랑 제품설정 > 보안에 Client Secret을 .env파일에 잘 넣어둔다. 다른 사람한테 보여주면 안되는 키이기 때문에 .env파일에 넣고 .gitignore해주면 된다.

불러올 땐 이런 식으로~

process.env.env파일에 적은 변수명

app.js에

const snsRouter = require("./routes/snsRouter");
app.use('/auth', snsRouter);

라우터를 /auth로 연결해준다.

그리고 사용자가 카카오톡 로그인을 클릭할 수 있도록 /auth/kakao로 get요청을 보내는 a태그를 하나 만들어 놓는다.

 <a id="kakao" href="/auth/kakao" class="btn">카카오톡 로그인</a>

이제 라우터 파일에 카카오 로그인 페이지로 이동하여 콜백 처리를 해줄 것이다.

const express = require("express");
const router = express.Router();
const axios = require("axios");
const db = require("../models");
const loginModel = db.users; // user 모델 사용
const jwt = require("jsonwebtoken");
const secretKey = process.env.JWT_SECRET; // JWT 시크릿 키

// 카카오 로그인 API
const KAKAO_ID = process.env.KAKAO_ID;
const kakaoredirectURI = encodeURI("http://localhost:3000/auth/kakao/callback");
const kakao_secret = process.env.KAKAO_SECRET;
let kakaoAPI_URL = "";

// 카카오 로그인 페이지로 이동 (url 생성)
router.get("/kakao", (req, res) => {
  kakaoAPI_URL = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${KAKAO_ID}&redirect_uri=${kakaoredirectURI}`;
  res.redirect(kakaoAPI_URL);
});

// 카카오 로그인 콜백 처리
router.get("/kakao/callback", async (req, res) => {
  const { code } = req.query;
  kakaoAPI_URL = "https://kauth.kakao.com/oauth/token";
  try {
    // 접근 토큰 요청
    const tokenAxios = await axios({
      method: "get",
      url: kakaoAPI_URL,
      params: {
        grant_type: "authorization_code",
        client_id: KAKAO_ID,
        redirect_uri: kakaoredirectURI,
        code: code,
        client_secret: kakao_secret,
      },
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
      },
    });
    const accessToken = tokenAxios.data.access_token;

    // 사용자 프로필 정보 요청
    const profileRes = await axios({
      method: "get",
      url: "https://kapi.kakao.com/v2/user/me",
      headers: { Authorization: `Bearer ${accessToken}` },
    });

    const { email, name, phone_number } = profileRes.data.kakao_account;
    const { nickname } = profileRes.data.kakao_account.profile;
    const phone = phone_number.replace("+82 ", 0);

    // DB에서 기존 회원 여부 확인
    let user = await loginModel.findOne({ where: { email } });
    if (!user) {
      // 없으면 신규 회원 가입
      user = await loginModel.create({
        email,
        username: name,
        nickname: nickname,
        phone,
        provider: "kakao",
      });
    }

    // JWT 토큰 발급
    const token = jwt.sign({ id: user.id }, secretKey, { expiresIn: "7d" });

    // 쿠키에 토큰 저장
    res.cookie("token", token, { httpOnly: true });
    res.redirect("/");
  } catch (error) {
    console.error("카카오 로그인 실패:", error);
  }
});

module.exports = router;

아까 설정한 redirectURI와 API키로 카카오 로그인 페이지로 이동시켜준다.
그리고 로그인했을때 접근 토큰을 요청해서 해당 사용자의 프로필 정보를 요청해준다.
만약 DB에 없는 사용자라면 신규 회원가입을 위해 DB에 추가해준다.
후에 JWT 토큰을 발급해주고 메인 페이지로 돌아간다.

해당 사용법은 카카오 API 공식 문서에 잘 나와있으니 확인해보면 될 것이다.
https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

우왕 이제 DB에 저장된다~~ 했는데!!!!!