Google Cloud 자격 발급 절차 — Client ID · API Key

2026-07-27 · 관리자용 · 소요 시간 약 10~15분 · 완료하면 사용자는 로그인만으로 드라이브 동기화

🎯 목적: 플랫폼 공용 자격을 한 번 발급해 index.html의 PLATFORM_GOOGLE에 심는다. Client ID·API Key·프로젝트 번호는 모두 공개 가능한 값(도메인 제한)이다 — 관리자 계정의 권한과는 무관하다(개념: OAuth 개념 문서).

사전 준비

console.cloud.google.com에 관리자 계정으로 로그인 → 상단 프로젝트 선택기에서 새 프로젝트 생성 (이름 예: habitree-run). 기존 프로젝트가 있으면 그대로 사용해도 된다.

1단계 — API 2개 사용 설정

좌측 메뉴 API 및 서비스 → 라이브러리에서 검색해 각각 사용(Enable):

Google Drive API
Google Picker API

2단계 — OAuth 동의 화면 구성 (Google Auth Platform)

좌측 메뉴 Google Auth Platform으로 이동 ("API 및 서비스 → OAuth 동의 화면"으로 들어가도 자동 연결). 처음이면 "시작하기" 마법사가 뜬다.

섹션	설정값
브랜딩 (Branding)	앱 이름: `러닝 누적기록` (사용자 동의 화면에 표시) · 지원 이메일: 관리자 Gmail
대상 (Audience)	사용자 유형: 외부(External)
데이터 액세스 (Data Access)	"범위 추가 또는 삭제"에서 다음 3개만 추가: `.../auth/drive.file` · `.../auth/userinfo.email` · `.../auth/userinfo.profile`

⚠️ 이 3개 스코프만 넣을 것. drive.readonly 등 다른 Drive 스코프를 추가하는 순간 민감/제한 범위로 분류되어 Google 보안 심사 대상이 된다. 위 3개는 전부 비민감이라 심사가 없다.

마지막으로 대상(Audience) 페이지의 "앱 게시(Publish app)" 버튼을 눌러 게시 상태를 프로덕션으로 전환한다. 심사 관련 경고 팝업이 떠도 비민감 스코프만 쓰므로 별도 제출 없이 완료된다. 이걸 안 하면 등록된 테스트 사용자만 로그인할 수 있다.

3단계 — OAuth 클라이언트 ID 발급

Google Auth Platform → 클라이언트(Clients) → + 클라이언트 만들기:

애플리케이션 유형: 웹 애플리케이션 · 이름: 예) run-web
승인된 자바스크립트 원본 3개 추가:
https://run.habitree.io
https://run-murex-theta.vercel.app
http://localhost:8000
리디렉션 URI는 비워둔다 (팝업 방식이라 불필요)

만들기를 누르면 xxxx.apps.googleusercontent.com 형식의 Client ID가 표시된다 → 복사.

4단계 — API 키 발급 (Picker용)

API 및 서비스 → 사용자 인증 정보 → + 사용자 인증 정보 만들기 → API 키 생성 후, 키 이름을 클릭해 제한 설정:

애플리케이션 제한사항: 웹사이트 → https://run.habitree.io/* · https://run-murex-theta.vercel.app/* · http://localhost:8000/* 추가
API 제한사항: "키 제한" 선택 → Google Picker API만 체크

AIza… 형식의 API Key를 복사.

5단계 — 프로젝트 번호 확인 (권장)

콘솔 대시보드 또는 ⚙ 프로젝트 설정에서 숫자로만 된 프로젝트 번호(Project number)를 복사. Picker가 drive.file 권한 부여를 정확히 처리하는 데 쓰인다.

완료 후 — 코드 반영

발급된 ① Client ID ② API Key ③ 프로젝트 번호를 index.html의 PLATFORM_GOOGLE 상수에 입력하고 배포한다:

필드	값
`clientId`	① `xxxx.apps.googleusercontent.com`
`apiKey`	② `AIza…`
`appId`	③ 프로젝트 번호 (숫자)

⏱ 원본(origin) 설정 변경은 즉시 반영되지 않고 5분~수 시간 걸릴 수 있다. 설정 직후 로그인 테스트에서 origin_mismatch 오류가 나면 잠시 후 재시도.

주소를 새로 붙일 때 (커스텀 도메인 · 새 배포 URL)

⚠️ 구글은 등록된 주소에서만 로그인을 허용한다. 새 주소를 붙였는데 등록하지 않으면 그 주소에서만 400 오류: origin_mismatch(액세스 차단됨: 승인 오류)가 뜬다 — 기존 주소는 멀쩡하므로 앱 버그로 착각하기 쉽다.

새 주소 https://새주소를 붙였다면 세 곳을 모두 고친다:

OAuth 클라이언트(3단계) → 승인된 자바스크립트 원본에 https://새주소 추가
API 키(4단계) → 애플리케이션 제한사항(웹사이트)에 https://새주소/* 추가
index.html의 APPROVED_ORIGINS 배열에 https://새주소 추가 — 앱이 "이 주소는 등록 안 됨" 안내를 정확히 띄우기 위한 목록이라, 콘솔과 항상 같이 맞춘다

현재 등록된 주소: https://run.habitree.io(운영) · https://run-murex-theta.vercel.app(Vercel 기본) · http://localhost:8000(로컬). Vercel 프리뷰 배포 URL(run-xxxx-….vercel.app)은 배포마다 바뀌므로 등록하지 않는다 — 프리뷰에서는 구글 로그인이 되지 않는 것이 정상이다.