카카오 OAuth 로그인의 2가지 방식

[moonjun1]

카카오 로그인 구현 방식 비교

🖥️ 서버 사이드 OAuth2 (현재 구현 방식)

특징

• Spring Security OAuth2 기능 활용
• 서버가 카카오와 직접 통신
• 전통적인 웹 애플리케이션 방식

플로우

1. 사용자 → 프론트엔드: "카카오 로그인" 클릭
2. 프론트엔드 → 백엔드: GET /oauth2/authorization/kakao
3. 백엔드 → 사용자: 카카오 로그인 페이지로 리다이렉트
4. 사용자 → 카카오: 로그인 정보 입력
5. 카카오 → 백엔드: 인증 코드 전송 (callback)
6. 백엔드 → 카카오: 인증 코드로 Access Token 요청
7. 카카오 → 백엔드: Access Token + 사용자 정보 응답
8. 백엔드: JWT 토큰 생성 & DB 저장
9. 백엔드 → 프론트엔드: JWT 토큰과 함께 리다이렉트

장점

• ✅ 보안성 높음 - Client Secret이 서버에서만 관리
• ✅ 간단한 구현 - Spring Security OAuth2 자동 처리
• ✅ 토큰 관리 용이 - 서버에서 모든 토큰 관리
• ✅ SEO 친화적 - 서버 사이드 렌더링 가능

단점

• ❌ SPA 부적합 - 페이지 새로고침 발생
• ❌ 모바일 앱 부적합 - 웹뷰 필요
• ❌ 프론트엔드 제약 - 리다이렉트 방식 강제

사용 케이스

• 전통적인 웹 애플리케이션
• SSR(Server Side Rendering) 환경
• 보안이 중요한 서비스

구현 예시

Spring Boot (Backend)

@Configuration
@EnableWebSecurity
public class SecurityConfig {
    
    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        return http
            .oauth2Login(oauth2 -> oauth2
                .userInfoEndpoint(userInfo -> userInfo
                    .userService(customOAuth2UserService)
                )
                .successHandler(oAuth2LoginSuccessHandler)
            )
            .build();
    }
}

Frontend (HTML/JavaScript)

function loginWithKakao() {
    // 서버의 OAuth2 엔드포인트로 리다이렉트
    window.location.href = '/oauth2/authorization/kakao';
}

---

📱 클라이언트 사이드 OAuth2

특징

• 카카오 JavaScript SDK 사용
• 프론트엔드가 카카오와 직접 통신
• SPA(Single Page Application) 친화적

플로우

1. 사용자 → 프론트엔드: "카카오 로그인" 클릭
2. 프론트엔드 → 카카오: JavaScript SDK로 로그인 요청
3. 사용자 → 카카오: 팝업에서 로그인 정보 입력
4. 카카오 → 프론트엔드: Access Token + 사용자 정보 응답
5. 프론트엔드 → 백엔드: 카카오 토큰과 사용자 정보 전송
6. 백엔드 → 카카오: 토큰 검증 요청
7. 카카오 → 백엔드: 토큰 유효성 응답
8. 백엔드: JWT 토큰 생성 & DB 저장
9. 백엔드 → 프론트엔드: JWT 토큰 응답

장점

• ✅ SPA 친화적 - 페이지 새로고침 없음
• ✅ 모바일 앱 지원 - React Native 등에서 사용 가능
• ✅ 사용자 경험 - 팝업 방식으로 부드러운 UX
• ✅ 프론트엔드 독립성 - API 서버와 완전 분리

단점

• ❌ 보안 위험 - 토큰이 브라우저에 노출
• ❌ 복잡한 구현 - JavaScript SDK 설정 필요
• ❌ CORS 이슈 - 도메인 간 요청 관리 필요
• ❌ 토큰 관리 복잡 - 클라이언트에서 갱신 처리

사용 케이스

• React, Vue, Angular 등 SPA
• 모바일 앱 (React Native, Flutter)
• 마이크로서비스 아키텍처

구현 예시

카카오 SDK 초기화 (Frontend)

<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>
  // 카카오 SDK 초기화
  Kakao.init('YOUR_APP_KEY');
</script>

로그인 구현 (Frontend)

function loginWithKakao() {
    Kakao.Auth.login({
        success: function(authObj) {
            console.log(authObj);
            
            // 사용자 정보 요청
            Kakao.API.request({
                url: '/v2/user/me',
                success: function(res) {
                    // 백엔드로 토큰과 사용자 정보 전송
                    sendTokenToServer(authObj.access_token, res);
                }
            });
        },
        fail: function(err) {
            console.error(err);
        }
    });
}

function sendTokenToServer(accessToken, userInfo) {
    fetch('/api/auth/kakao', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            accessToken: accessToken,
            userInfo: userInfo
        })
    })
    .then(response => response.json())
    .then(data => {
        // JWT 토큰 저장
        localStorage.setItem('accessToken', data.accessToken);
        localStorage.setItem('refreshToken', data.refreshToken);
    });
}

토큰 검증 API (Backend)

@RestController
@RequestMapping("/api/auth")
public class AuthController {
    
    @PostMapping("/kakao")
    public ResponseEntity<?> kakaoLogin(@RequestBody KakaoLoginRequest request) {
        // 1. 카카오 토큰 검증
        boolean isValid = kakaoService.validateToken(request.getAccessToken());
        
        if (!isValid) {
            throw new InvalidTokenException("유효하지 않은 카카오 토큰");
        }
        
        // 2. 사용자 정보 처리
        User user = userService.findOrCreateUser(request.getUserInfo());
        
        // 3. JWT 토큰 생성
        String jwtToken = jwtTokenProvider.generateToken(user.getKakaoId());
        
        return ResponseEntity.ok(new TokenResponse(jwtToken));
    }
}

---

🔄 구현 방식 전환 가이드

서버 사이드 → 클라이언트 사이드 전환 시

프론트엔드 변경사항

// 기존 (서버 사이드)
function loginWithKakao() {
    window.location.href = '/oauth2/authorization/kakao';
}

// 변경 (클라이언트 사이드)
function loginWithKakao() {
    Kakao.Auth.login({
        success: function(authObj) {
            // 카카오 토큰을 서버로 전송
            sendTokenToServer(authObj.access_token);
        }
    });
}

백엔드 변경사항

// 기존: Spring Security OAuth2 설정 제거
// @EnableOAuth2Client 등 제거

// 추가: 카카오 토큰 검증 API 엔드포인트
@PostMapping("/api/auth/kakao")
public ResponseEntity<?> kakaoLogin(@RequestBody KakaoTokenRequest request) {
    // 카카오 토큰 검증 로직 구현
    return ResponseEntity.ok(tokenResponse);
}

---

📊 방식별 비교표

구분	서버 사이드	클라이언트 사이드
구현 복잡도	🟢 낮음	🟡 보통
보안성	🟢 높음	🟡 보통
SPA 적합성	🔴 낮음	🟢 높음
모바일 지원	🔴 어려움	🟢 쉬움
사용자 경험	🟡 보통	🟢 좋음
토큰 관리	🟢 쉬움	🔴 복잡함
개발 시간	🟢 빠름	🟡 보통
유지보수	🟢 쉬움	🟡 보통

---

🎯 선택 기준

서버 사이드를 선택해야 하는 경우

• 전통적인 웹 애플리케이션 개발
• 보안이 최우선인 서비스
• 빠른 개발이 필요한 프로토타입
• SSR이 필요한 경우

클라이언트 사이드를 선택해야 하는 경우

• React, Vue, Angular 등 SPA 개발
• 모바일 앱도 함께 개발하는 경우
• 마이크로서비스 아키텍처
• 사용자 경험이 중요한 서비스

---

📚 참고 자료

카카오 공식 문서

• 카카오 로그인 REST API
• 카카오 JavaScript SDK

Spring Security OAuth2

• Spring Security OAuth2 Client
• OAuth2 Login

모범 사례

• Client Secret은 반드시 서버에서만 관리
• JWT 토큰은 적절한 만료시간 설정
• HTTPS 통신 필수
• CORS 정책 적절히 설정

---

작성일: 2025년 7월
작성자: 멋쟁이 뉴스 배달부 개발팀