[우리집에가면] 25.03.09 - 반환형식 정리 & 카카오 로그인 REST API 방식

이번주부터 일을 시작해서 적응기간을 가졌다....

일집뻗 일집뻗 반복하여 겨우 정신을 차리니 일요일..^^;;

조금이라도 작업 해보고자 일어남 ㅠㅡㅠ

 

 

1. 일관된 반환 형식 정리

ResponseWrapperDto ErrorResponse

 

https://hehesim.tistory.com/318

ResponseWrapperDto와 ErrorResponse - API 응답

 

2. 카카오 로그인 구현

 

- 프론트에서는 카카오에 로그인 요청을 하고 인가코드를 받아 redirect_uri에 포함하여 GET 요청을 보냄

- 백엔드에서는 해당 redirect_uri에서 인가 코드 추출하여 백엔드에 전달.

ex) 프론트 예시

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

const KakaoCallback = () => {
    const navigate = useNavigate();

    useEffect(() => {
        // URL에서 인가 코드 추출
        const urlParams = new URLSearchParams(window.location.search);
        const code = urlParams.get("code");

        if (code) {
            console.log("인가 코드:", code);

            // 백엔드에 인가 코드 전송하여 액세스 토큰 요청
            axios.post("http://localhost:8080/auth/kakao", { code })
                .then(response => {
                    console.log("로그인 성공:", response.data);
                    // JWT 저장 후 메인 페이지 이동
                    navigate("/");
                })
                .catch(error => {
                    console.error("카카오 로그인 실패:", error);
                });
        }
    }, []);

    return <div>카카오 로그인 중...</div>;
};

export default KakaoCallback;

 

- 백엔드에서는 인가 코드 수신 후 이를 활용해 카카오에 액세스 토큰 요청

 

** 원래는 백엔드에서 인가코드, 액세스토큰 모두 받는 방법으로 했었는데 그래서 이때는 OAuth2를 사용할 수 있었다. 

그러나, 현재는 프론트 측에서 인가코드를 받고, 이때 redirect하며 백엔드로 인가코드를 전해주어 백엔드에서는 액세스토큰을 받는 형식으로 하게 되었다. 이때는 OAuth2를 사용할 수 없고, 직접 액세스 토큰 요청을 카카오로 보내어 토큰을 받는 방법이 필요하다. 즉 REST API 방식을 사용해보게 되었다. 

 

-> 일단은 액세스 토큰 요청을 해보았을 때 성공화면을 보았다. 

이제는 액세스 토큰 가지고서 사용자 정보 받고, 이 사용자 정보를 우리 프로젝트 회원가입 과정과 jwt Token을 받는 과정을 거쳐 프론트에 JWT 토큰을 전해주는 과정이 필요하다! 

 

내일 마저 해보도록 하겠다..!

돌아오는 주에는 꼭꼭 ! 퇴근 후에 조금이라도 작업 및 공부 시작하기!!!