🚀 소셜 로그인 흐름: 프론트엔드 vs 백엔드 처리 방식 비교
소셜 로그인 구현 방식에는 여러 가지 방법이 있지만, 프론트엔드 중심 처리 방식과 백엔드 중심 처리 방식 두 가지가 대표적입니다.
1️⃣ 기존 프로젝트 방식 (프론트엔드 중심)
✅ 과정:
1. 사용자가 프론트엔드에서 직접 카카오 로그인 URL로 이동 (window.location.href = kakao_auth_url)
2. 카카오가 리디렉트 URL을 통해 프론트엔드로 임시 코드(Authorization Code) 전달
3. 프론트엔드에서 받은 Authorization Code를 백엔드로 전송하여 액세스 토큰(JWT) 요청
4. 백엔드는 Authorization Code로 카카오 API에 요청 → 액세스 토큰 발급 → 사용자 정보 조회 후 자체 로그인 처리 및 JWT 발급
5. 프론트엔드는 받은 JWT를 로컬스토리지, 쿠키, Zustand 등의 상태 관리에 저장✅ 📌 특징
• 프론트엔드에서 Authorization Code를 직접 백엔드로 보내서 로그인 요청을 수행
• 보안이 상대적으로 낮음 (클라이언트에서 Authorization Code를 직접 다루기 때문)
• 구현 방식이 비교적 단순하며, 다양한 OAuth 제공업체와 쉽게 연동 가능
✅ 🔴 단점
• Authorization Code를 클라이언트가 다루기 때문에 악성 코드 공격에 취약
• 쿠키 기반 인증을 적용하기 어렵고, JWT를 로컬스토리지에 저장하면 XSS 취약점이 생길 수 있음
2️⃣ 최근 프로젝트 방식 (백엔드 중심)
✅ 과정:
1. 사용자가 프론트엔드에서 백엔드에서 제공하는 로그인 URL로 이동 (window.location.href = backend_auth_url)
2. 백엔드가 해당 요청을 카카오 OAuth 로그인 URL로 리디렉트
3. 사용자가 카카오 로그인을 완료하면 카카오가 백엔드로 Authorization Code를 전달
4. 백엔드가 Authorization Code를 사용해 카카오에서 액세스 토큰을 발급받고, 사용자 정보를 가져옴
5. 백엔드는 JWT를 생성하고, 프론트엔드로 리디렉트하면서 헤더에 JWT를 포함하여 전달
6. 프론트엔드는 백엔드에서 받은 JWT를 쿠키에 저장 (or 상태 관리)✅ 📌 특징
• 프론트엔드는 OAuth 인증 과정에 직접 관여하지 않고, 백엔드가 모든 OAuth 인증을 처리
• 백엔드에서 JWT를 발급하고, 리디렉트 URL을 통해 응답 헤더에 JWT를 담아서 전달
• JWT를 쿠키(HttpOnly) 에 저장할 수 있어 보안성이 높아짐
✅ 🟢 장점
• Authorization Code를 프론트엔드에서 다루지 않음 → 보안성이 높아짐
• JWT를 쿠키(HttpOnly, Secure)로 관리 가능 → XSS 공격 방지
• API 요청마다 JWT를 Authorization 헤더로 보내는 방식보다 자동 로그인 유지에 유리
✅ 🔴 단점
• 로그인 과정이 더 복잡하고, 백엔드에서 OAuth 처리 부담이 증가
• 프론트엔드에서 JWT를 직접 다루지 않기 때문에, 상태 관리 라이브러리(Zustand 등)와의 연동이 어렵고, API 요청 시 인증이 자동으로 포함되지 않는 문제가 있을 수 있음.
3️⃣ 어느 방식이 더 흔한가?
📌 OAuth 로그인 방식 트렌드
방식 보안성 사용 사례 쿠키 기반 인증 가능 여부
프론트엔드 중심 낮음 (취약점 존재) 일반적인 OAuth 연동, SPA ❌ (JWT를 직접 저장해야 함)
백엔드 중심 높음 (Code 처리 없음) 보안이 중요한 서비스 (금융, 기업 내부 서비스) ✅ (HttpOnly 쿠키로 가능)
💡 최근에는 백엔드 중심 방식이 보편화되는 추세입니다.
특히, XSS / CSRF 방지를 위해 HttpOnly 쿠키를 사용하는 방식이 보안적으로 우수하기 때문입니다.
그래서 OAuth 인증 후 JWT를 헤더에 담아서 프론트엔드로 리디렉트하는 방식이 종종 사용됩니다.
4️⃣ 프론트엔드에서 JWT를 응답 헤더로 받아서 처리하는 방법
백엔드가 로그인 후 리디렉트 시 JWT를 응답 헤더에 포함하여 프론트엔드로 전달하면, 프론트엔드는 이를 쿠키에 저장해야 합니다.
useEffect(() => {
fetch('/auth/callback/kakao', { credentials: 'include' }) // JWT 포함된 응답 받기
.then((response) => {
const token = response.headers.get('Authorization'); // JWT 헤더에서 가져오기
if (token) {
document.cookie = jwt=${token}; path=/; Secure; HttpOnly; // 쿠키에 저장
}
})
.catch((err) => console.error(err));
}, []);
✅ credentials: 'include'를 사용하면 쿠키 기반 인증을 활용할 수 있음
5️⃣ 최종 결론
📌 프론트엔드 중심 방식 → 구현이 쉽지만 보안이 취약
📌 백엔드 중심 방식 → 보안성이 높고 JWT를 HttpOnly 쿠키에 저장 가능
최근에는 “백엔드 중심 OAuth 인증”이 더 선호되는 방식입니다.특히, JWT를 응답 헤더에 담아서 리디렉트하는 방법은 보안성을 높이기 위한 설계이며, 금융 서비스나 보안이 중요한 서비스에서 자주 사용됩니다.
✅ 결론적으로, 이 방식이 흔한 방법인지?
→ 최근 보안 강화 트렌드에 따라 점점 더 많이 사용되는 방식이며, OAuth 로그인 후 JWT를 응답 헤더에 담아 리디렉트하는 방식도 꽤 일반적입니다. 🚀
