OAuth 설정 가이드

소셜 로그인 기능을 활성화하는 방법

현재 설정 상태

Google OAuth
테스트 모드
Kakao 로그인
테스트 모드

테스트 모드에서는 시뮬레이션된 계정으로 소셜 로그인 기능을 체험할 수 있습니다.

Google OAuth 설정

1단계: Google Cloud Console 접속

Google Cloud Console에 로그인하고 프로젝트를 생성합니다.

Google Cloud Console 열기

2단계: OAuth 2.0 클라이언트 생성

  1. "API 및 서비스" → "사용자 인증 정보" 메뉴 선택
  2. "사용자 인증 정보 만들기" → "OAuth 클라이언트 ID" 클릭
  3. 애플리케이션 유형: "웹 애플리케이션" 선택
  4. 이름 입력 (예: "AI 라벨링 스튜디오")

3단계: 승인된 자바스크립트 원본 추가

로컬 개발:

http://localhost:3000

프로덕션 (예시):

https://your-domain.com

4단계: 클라이언트 ID 설정

생성된 클라이언트 ID를 복사하여 설정 파일에 입력합니다.

// js/oauth-config.js
const OAuthConfig = {
    google: {
        clientId: 'YOUR_ACTUAL_CLIENT_ID_HERE',
        testMode: false  // false로 변경
    }
};

Kakao 로그인 설정

1단계: Kakao Developers 접속

Kakao 계정으로 로그인하고 애플리케이션을 생성합니다.

Kakao Developers 열기

2단계: 애플리케이션 생성

  1. "내 애플리케이션" → "애플리케이션 추가하기"
  2. 앱 이름, 사업자명 입력
  3. 앱 아이콘 업로드 (선택사항)

3단계: 플랫폼 설정

  1. "앱 설정" → "플랫폼" 메뉴 선택
  2. "Web 플랫폼 등록" 클릭
  3. 사이트 도메인 입력

도메인 예시:

http://localhost:3000
https://your-domain.com

4단계: 카카오 로그인 활성화

  1. "제품 설정" → "카카오 로그인" 선택
  2. 활성화 설정 ON
  3. Redirect URI 등록
  4. 동의항목 설정

5단계: JavaScript 키 설정

"앱 키" 메뉴에서 JavaScript 키를 복사하여 설정합니다.

// js/oauth-config.js
const OAuthConfig = {
    kakao: {
        appKey: 'YOUR_KAKAO_JAVASCRIPT_KEY',
        testMode: false  // false로 변경
    }
};

테스트 모드 사용법

OAuth 설정 전에도 테스트 모드를 통해 소셜 로그인 기능을 체험할 수 있습니다.

테스트 계정 (Google)

  • • hong.gildong@gmail.com
  • • kim.chulsoo@gmail.com
  • • testuser@gmail.com

테스트 계정 (Kakao)

  • • kakao.user@kakao.com
  • • lee.younghee@kakao.com
  • • park.minsoo@kakao.com

테스트 모드에서는 실제 OAuth 인증 없이 시뮬레이션된 계정으로 로그인할 수 있습니다.

문제 해결

"액세스 차단됨: 승인 오류" 발생 시

  • 클라이언트 ID가 올바르게 설정되었는지 확인
  • 승인된 자바스크립트 원본에 현재 도메인이 추가되었는지 확인
  • OAuth 동의 화면이 구성되었는지 확인
  • 테스트 사용자가 추가되었는지 확인 (개발 중인 경우)

"invalid_client" 오류 발생 시

  • 클라이언트 ID가 유효한지 확인
  • OAuth 2.0 클라이언트가 활성화되었는지 확인
  • 프로젝트가 올바르게 선택되었는지 확인

팁: OAuth 설정이 어려우신가요? 테스트 모드를 활용하거나 이메일 가입 기능을 사용해보세요.