💛

카카오 소셜 로그인 설정 가이드

카카오 개발자 앱 등록부터 실제 연동까지 단계별 안내

📊 현재 연동 상태

✅

회원 DB 설계 완료

members 테이블에 social_provider, social_id 컬럼 준비 완료

✅

회원 페이지 UI 준비 완료

member.html에 카카오 로그인 버튼 구현 완료 (API 키만 입력하면 활성화)

⏳

카카오 앱 등록 필요

카카오 개발자 센터에서 앱 등록 후 REST API 키 발급 필요

⏳

API 키 입력 필요

아래 설정 폼에 발급받은 키를 입력하면 즉시 활성화

📋 카카오 앱 등록 단계별 가이드

카카오 개발자 센터 접속 및 로그인

developers.kakao.com 접속 → 카카오 계정으로 로그인
* 카카오 계정이 없으면 먼저 카카오 회원가입 필요

새 애플리케이션 추가

상단 메뉴 내 애플리케이션 → 애플리케이션 추가하기 클릭

입력 정보:
· 앱 이름: 그린골프용품
· 사업자명: 가자트레이드 (또는 법인명)
· 카테고리: 쇼핑

📸 [카카오 개발자 센터 → 내 애플리케이션 → 애플리케이션 추가하기 화면]

앱 키 확인 (REST API 키 복사)

생성된 앱 클릭 → 앱 키 탭에서 아래 키들을 확인하고 복사하세요:

· REST API 키: 서버에서 사용 (중요! 외부 노출 금지)
· JavaScript 키: 프론트엔드에서 사용
· Admin 키: 관리자 기능용 (절대 노출 금지)

⚠️ REST API 키와 Admin 키는 절대 소스코드에 직접 넣지 마세요. 환경변수로 관리합니다.

카카오 로그인 활성화

앱 설정 → 카카오 로그인 → 활성화 설정 ON으로 변경

Redirect URI 등록 (필수!):
아래 주소를 그대로 복사해서 등록하세요:

# Redirect URI (카카오 로그인 후 돌아올 주소)
https://harmonious-presence-production-6ac1.up.railway.app/api/auth/kakao/callback

# 커스텀 도메인 연결 후에는 추가로 등록:
https://[내도메인]/api/auth/kakao/callback
        

동의항목 설정

앱 설정 → 카카오 로그인 → 동의항목

아래 항목을 필수 동의로 설정하세요:
· ✅ 닉네임 (필수)
· ✅ 카카오계정(이메일) (필수)
· ⬜ 프로필 사진 (선택 권장)
· ⬜ 전화번호 (선택 - 비즈앱 심사 필요)

⚠️ 전화번호 수집은 카카오 비즈앱 심사를 통과해야 합니다. 처음에는 이메일과 닉네임만 수집하세요.

아래 설정 폼에 키 입력 후 저장

발급받은 키를 아래 "카카오 로그인 설정" 섹션에 입력하면 즉시 활성화됩니다.

✅ 키 입력 후 member.html에서 "카카오로 시작하기" 버튼이 실제로 동작합니다!

🔑 카카오 로그인 설정 (키 입력)

REST API 키 * 카카오 개발자 센터 → 앱 키 → REST API 키

JavaScript 키 * 카카오 개발자 센터 → 앱 키 → JavaScript 키

Redirect URI (자동 입력됨) 카카오 개발자 센터에 이 주소를 등록해야 합니다

⚙️ 기술 구현 방식 (개발자 참고)

카카오 로그인 흐름 (OAuth 2.0 Authorization Code Flow)

// 1. 사용자가 "카카오로 시작하기" 클릭
window.location.href = `https://kauth.kakao.com/oauth/authorize
  ?client_id=${KAKAO_REST_KEY}
  &redirect_uri=${REDIRECT_URI}
  &response_type=code`;

// 2. 카카오 로그인 완료 후 서버로 code 전달
// GET /api/auth/kakao/callback?code=xxxxx

// 3. 서버에서 토큰 교환
POST https://kauth.kakao.com/oauth/token
  code: [받은 code]
  → access_token 발급

// 4. 사용자 정보 조회
GET https://kapi.kakao.com/v2/user/me
  Authorization: Bearer [access_token]
  → { id, kakao_account: { email, profile: { nickname } } }

// 5. DB에 회원 저장 또는 로그인 처리
INSERT OR UPDATE members SET
  social_provider = 'kakao',
  social_id = [kakao_id],
  email = [kakao_email],
  name = [kakao_nickname]
    

✅ 서버 코드(/api/auth/kakao/callback)는 이미 구현되어 있습니다. API 키만 입력하면 즉시 동작합니다!