[Node, React]Instagram Clone - 16. 카카오톡 소셜 로그인 구현..을 빙자한 카카오 OAuth2 인증 미들웨어 구현

여태 한 것 중에 제일 어려웠다.. 카카오톡 로그인 자체를 구현하는 것은 어렵지 않았는데 기존의 로그인 확인 로직(난 쿠키로 넘겨서 관리함)이랑 카카오 로그인 확인 로직을 통합하는 데 애를 먹었다. 카톡 로그인 구현에 걸린 시간이 1시간이라면 로그인 확인 로직 통합은 체감 12시간 걸린 느낌.. 아무튼 이건 기록하지 않으면 두고두고 후회할 것 같아서 오랜만에 포스팅을 해본다. 거두절미하고 시작해 보겠다.

---

1. 카카오 로그인 구현

출처: Kakao Developers

• Kakao Developers 공식 문서를 참고하면 로그인까지 어렵지 않게 구현이 가능하다.(차근차근 하면 끝)

1) 클라이언트 코드(Kakao.jsx)

import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import axios from "axios";

const Kakao = ({ setIsAuthenticated }) => {
  const navigate = useNavigate();

  useEffect(() => {
    const handleKakaoLoginCallback = async () => {
      const url = new URL(window.location.href);
      const code = url.searchParams.get("code");

      if (!code) {
        console.log("카카오 로그인 페이지 렌더링 중...");
        return;
      }

      try {
        const response = await axios.post(
          "http://localhost:5001/auth/kakao/callback",
          { code },
          { withCredentials: true }
        );
        
        const jwtToken = response.data.jwtToken;

        if (jwtToken) {
          axios.defaults.headers.common["authorization"] = `Bearer ${jwtToken}`;
          alert("로그인 성공");
          setIsAuthenticated(true);
          navigate("/");
        } else {
          throw new Error("토큰 복호화 실패");
        }
      } catch (err) {
        alert("로그인 실패");
        console.error("Kakao 인증 실패:", err.message);
        navigate("/auth/login");
      }
    };

    handleKakaoLoginCallback();
  }, [setIsAuthenticated]);
};

export default Kakao;

1. 공식문서 따라 가다가..(~백엔드로 인증 코드 전송까지)
2. withCredentials: true를 설정해 쿠키에 저장된 인증 정보를 활용
3. 서버로부터 JWT 응답을 받고 axios.defaults.headers.common에 Bearer 토큰을 추가해 이후의 모든 요청에 인증 헤더를 포함하도록 설정
4. JWT 토큰이 존재하면, 인증 성공 메세지 출력하고 인증 상태 업데이트(setIsAuthenticated(true))한 후 홈페이지로 이동
5. 그리고 라우터에 경로 추가
   
   

2) 서버 코드(kakao.js)

const express = require("express");
const axios = require("axios");
const jwt = require("jsonwebtoken");

const router = express.Router();
require("dotenv").config();

const bodyParser = require("body-parser");
const cookieParser = require("cookie-parser");

router.use(bodyParser.urlencoded({ extended: true }));
router.use(bodyParser.json());
router.use(cookieParser());

const KAKAO_TOKEN_URL = process.env.KAKAO_TOKEN_URL;
const KAKAO_USER_INFO_URL = process.env.KAKAO_USER_INFO_URL;
const JWT_SECRET = process.env.JWT_SECRET;
const KAKAO_CLIENT_ID = process.env.KAKAO_CLIENT_ID;
const REDIRECT_URI = process.env.REDIRECT_URI;

router.post("/callback", async (req, res) => {
  const { code } = req.body;
  if (!code) {
    return res.status(400).send("Kakao code is missing");
  }

  try {
    const tokenResponse = await axios.post(KAKAO_TOKEN_URL, null, {
      params: {
        grant_type: "authorization_code",
        client_id: KAKAO_CLIENT_ID,
        redirect_uri: REDIRECT_URI,
        code,
      },
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
    });

    if (!tokenResponse.data || !tokenResponse.data.access_token) {
      throw new Error("Failed to get access token");
    }
    const { access_token } = tokenResponse.data;

    const userResponse = await axios.get(KAKAO_USER_INFO_URL, {
      headers: { Authorization: `Bearer ${access_token}` },
    });

    const kakaoUser = userResponse.data;
    const email = kakaoUser?.kakao_account?.email || null;
    const nickname = kakaoUser?.properties?.nickname || "Unknown";

    const user = {
      kakaoId: kakaoUser.id,
      email,
      nickname,
    };

    const jwtToken = jwt.sign(user, JWT_SECRET, { expiresIn: "1h" });

    res.cookie("x_auth", jwtToken, {
      httpOnly: true,
      maxAge: 3600000,
    });

    return res.status(200).json({
      message: "Kakao login success",
      loginSuccess: true,
      jwtToken,
      user: {
        kakaoId: user.kakaoId,
        email: user.email,
        nickname: user.nickname,
      },
    });
  } catch (err) {
    console.error(err);
    res.status(500).send("Kakao 인증 실패");
  }
});

module.exports = router;

1. 클라이언트로부터 code를 POST 요청으로 전달받아 확인, 없을 경우 400 에러
2. 카카오 서버에 엑세스 토큰 요청하고, 받은 토큰으로 사용자 정보 요청
3. 사용자 정보 기반으로 JWT 토큰 생성
4. 생성된 JWT 토큰을 httpOnly 쿠키로 설정
   

 

2. 카카오 OAuth2 인증 미들웨어 구현

• 클라이언트에서 기본 로그인이랑 카카오 로그인을 통합해서 인증 상태를 일관되게 유지해야 하는데 그게 안되서 카카오 로그인하면 로그인 상태인 걸 인식을 못해서 로그인이 필요한 다른 페이지에 접근이 안되는 이슈가 생겼다. 
• 문제는 미들웨어 부분이였다.
• 처음엔 그냥 JWT로 만들어서 쓰면 기존의 로직에 바로 적용되는 줄 알았는데 알고보니 그 내부 형태도 다르고 뭔가 복잡하게 얽혀있었다.
• 그래서 하나하나 로그를 찍어보면서 뜯어 고쳐보았다..(이게 진짜 10시간은 넘게 걸린 듯..ㅋㅠㅠ)

1) 카카오 토큰 검증 함수 (verifyKakaoToken)

const verifyKakaoToken = async (token) => {
  try {
    const response = await axios.post(
      "https://kapi.kakao.com/v2/user/me",
      {},
      {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      }
    );

    if (response.data) {
      return {
        isAuth: true,
        user: {
          _id: response.data.id,
          email: response.data.kakao_account.email,
          username: response.data.properties.nickname,
        },
      };
    } else {
      return { isAuth: false };
    }
  } catch (error) {
    console.error("카카오 토큰 검증 에러:", error);
    return { isAuth: false };
  }
};

• 이 함수는 클라이언트가 전달한 카카오 액세스 토큰을 이용해 사용자 정보를 검증함
• 카카오 API에 요청해 사용자 데이터를 받아오며, 유효하지 않은 토큰일 경우 에러를 반환함
  
  

2) User 모델 수정(findOrCreateByKakaoId)

userSchema.statics.findOrCreateByKakaoId = async function (kakaoId, userData) {
  const kakaoIdStr = kakaoId.toString();
  // console.log("카카오Id 문자열 변환", kakaoIdStr);

  const user = await this.findOne({ kakaoId: kakaoIdStr });
  // console.log("모델에서 찾은 user:", user);

  if (user) {
    return user;
  } else {
    // console.log("사용자가 존재하지 않음, 새로운 사용자 생성.");
    const newUser = new this({
      kakaoId: kakaoIdStr,
      user_id: userData.user_id || kakaoIdStr,
      email: userData.email,
      name: userData.nickname,
      profile_image: userData.profile_image || null,
    });

    return newUser
      .save()
      .then((savedUser) => {
        console.log("저장된 사용자:", savedUser);
        return savedUser;
      })
      .catch((err) => {
        console.error("사용자 저장 실패:", err);
        throw new Error("사용자 저장 실패");
      });
  }
};

• 주어진 kakaoId로 사용자를 검색하고 없으면 새로운 사용자 데이터를 생성함
  
  

3) 인증 미들웨어 수정(auth.js)

// 인증 미들웨어
let auth = async (req, res, next) => {
  const jwtToken = req.cookies.x_auth;
  const kakaoToken = req.headers.authorization?.split(" ")[1];
  const secretKey = process.env.JWT_SECRET;

  // JWT 인증 처리
  if (jwtToken) {
    if (!secretKey) {
      return res.status(500).json({
        isAuth: false,
        message: "서버 설정 오류: 비밀 키가 설정되지 않았습니다.",
      });
    }

    try {
      const decoded = jwt.verify(jwtToken, secretKey);
      console.log("decoded", decoded);

      // 토큰 만료 확인
      if (decoded.exp < Date.now() / 1000) {
        return res.status(401).json({
          isAuth: false,
          message: "토큰이 만료되었습니다.",
        });
      }

      let user;
      if (decoded.kakaoId) {
        // 카카오
        const kakaoId = decoded.kakaoId.toString();
        user = await User.findOrCreateByKakaoId(kakaoId, {
          user_id: decoded.user_id,
          email: decoded.email,
          nickname: decoded.nickname,
          profile_image: decoded.profile_image || null,
        });
      } else if (decoded._id) {
        // 일반 유저
        user = await User.findById(decoded._id);
      } else {
        return res.status(401).json({
          isAuth: false,
          message: "유효하지 않은 토큰입니다.",
        });
      }

      // console.log("user 확인", user);

      if (!user) {
        return res.status(401).json({
          isAuth: false,
          message: "유효하지 않은 토큰입니다.",
        });
      }

      req.token = jwtToken;
      req.user = user;
      return next();
    } catch (err) {
      console.error("JWT 검증 실패:", err);
      return res.status(401).json({
        isAuth: false,
        message: "유효하지 않은 토큰입니다.",
      });
    }
  }

  // 카카오 로그인 인증 처리
  if (kakaoToken) {
    const kakaoResult = await verifyKakaoToken(kakaoToken);
    if (kakaoResult.isAuth) {
      req.user = kakaoResult.user;
      return next();
    } else {
      return res.status(401).json({
        isAuth: false,
        message: "카카오 인증 실패",
      });
    }
  }

  // JWT와 카카오 토큰 모두 없을 경우
  console.error("쿠키 또는 헤더에서 인증 토큰이 감지되지 않음");
  return res.status(401).json({
    isAuth: false,
    message: "로그인이 필요합니다.",
  });
};

• 클라이언트로부터 받은 JWT 또는 카카오 토큰을 검증하고 사용자 정보르 req.user에 저장하는 미들웨어
• 가장! 어려웠던 부분인데, 일반 로그인과 카카오 로그인을 구별해야 하는 점이 어려웠음
• 무엇보다 카카오 API 호출했을때 응답 데이터 파싱이 제대로 이뤄지지 않아서 undefined 오류가 계속 발생함

3. 느낀 점

• 약간 쓰고 나니깐 별거 아닌 거 같다.. 쩜 이미 코드 흐름이 머릿속 에 있어서 그런 것 같음. 제대로된 트러블 슈팅을 써보고 싶었는데 아쉽다. 
• 앞으로는 Redis도 써서 세션 관리를 제대로 해보고 싶다.