---
title: "가이드 — 소셜 OAuth(카카오·네이버) 자체처리 활성화 (CF Workers auth-proxy, 재사용)"
category: "guide"
document_type: "guide"
source_status: "original"
knowledge_group: "01_rules"
priority: "High"
purpose: "Supabase 가 직접 지원하지 않거나 제약(KOE205 등)이 있는 소셜 로그인(카카오·네이버)을 CF Workers auth-proxy 자체처리로 붙이는 활성화 절차 + 최신 콘솔 UI 경로 + 'Bad client credentials' 등 함정. 달록 기준이되 팩토핀 등 타 프로젝트 재사용 가능하게 일반화. 비밀키 미포함."
read_when: ["인증OAuth","배포·도메인","신규프로젝트셋업"]
updated: "2026-06-05"
work_timestamp: "20260605_150224"
context: "달록본레포CC (D:\\dallog\\dallog_git)"
source_of_truth: "https://dallog-tools.hansbridge.co.kr/knowledge/"
---

# 가이드 — 소셜 OAuth 자체처리 활성화 (카카오·네이버)

> Supabase 기본 provider 로 안 되는(또는 제약 있는) 소셜 로그인을 **CF Workers auth-proxy 자체처리**로 붙이는 재사용 절차. 달록(dallog.kr) 적용 사례 기준이며, 팩토핀 등 다른 프로젝트도 같은 패턴으로 활용 가능. **실제 키·시크릿 값은 본 문서에 포함하지 않는다(공개 노출 방지).**

## 0. 언제 이 방식인가
- **구글**: Supabase `signInWithOAuth({provider:'google'})` 로 충분 — 자체처리 불필요.
- **카카오**: Supabase kakao provider 가 `account_email` 을 강제 요청 → 비즈앱 검수 전이면 **KOE205** 로 막힘. → **자체처리로 우회**(scope 미지정 = 닉네임·프로필사진 기본 동의항목만, 이메일 미요청).
- **네이버**: Supabase 미지원 provider → **자체처리 필수**.
- 자체처리 = 프런트가 provider authorize 로 직접 보내고, 콜백 코드를 **CF Workers(auth-proxy)** 가 token exchange → 사용자정보 조회 → Supabase Admin(service_role)으로 사용자 생성/매칭 → JWT 반환 → 프런트가 `supabase.auth.setSession()`.

## 1. ① CF Pages 환경변수 (앱이 provider 키를 알게)
- 위치(최신 UI): Cloudflare 대시보드 → **Workers & Pages** → 프로젝트 → **Settings → Variables and Secrets → Add** (구 "Environment variables" 명칭 변경됨). 일반값 Add, 비밀은 Encrypt.
- 카카오: `VITE_KAKAO_REST_API_KEY = <카카오 REST API 키>` (REST API 키는 OAuth 흐름상 노출되는 공개 식별자 → 평문 OK). 선택 `VITE_KAKAO_CALLBACK_URL = https://<도메인>/auth/kakao/callback`.
- 네이버: `VITE_NAVER_CLIENT_ID = <네이버 Client ID>`. 선택 `VITE_NAVER_CALLBACK_URL`.
- 공통: `VITE_AUTH_PROXY_URL = https://<워커>.workers.dev` (auth-proxy 주소).
- **저장 후 재배포**(Deployments → Retry/재배포) 해야 새 빌드에 반영됨. 연속 push 시 webhook 누락 가능 → Deploy Hook 강제 트리거.

## 2. ② provider 콘솔 (카카오 디벨로퍼스, 2026.06 최신 UI 기준)
- 앱 선택 → REST API 키 확인: **[앱] → [플랫폼 키]**.
- 플랫폼 등록: **[앱 설정] → [플랫폼] → [Web]** → 사이트 도메인 `https://<도메인>`.
- 로그인 활성화: **[카카오 로그인] → [사용 설정] → [상태] ON**.
- ⭐ Redirect URI(가장 중요, 정확 일치): **[앱] → [플랫폼 키] → [REST API 키] → [리다이렉트 URI]** 에 `https://<도메인>/auth/kakao/callback`. (최신 UI에서 예전 "카카오 로그인" 하위 → "플랫폼 키 > REST API 키" 아래로 이동됨.)
- 동의항목: **[카카오 로그인] → [동의항목] → [개인정보]** 에서 닉네임·프로필사진만. **이메일은 설정하지 않음**(비즈앱 검수 필요 + 켜면 KOE205).
- (선택) Client Secret: **[앱] → [플랫폼 키] → [REST API 키] → [클라이언트 시크릿]** 사용함 → ③에서 시크릿 등록.
- 네이버: 네이버 디벨로퍼스에서 앱 등록 + Callback URL 동일 패턴(`/auth/naver/callback`) + Client ID/Secret 발급.

## 3. ③ auth-proxy(CF Workers) 배포
- 배포: `cd workers/auth-proxy && wrangler deploy`.
- 평문 vars(wrangler.toml): provider client_id / REST API 키(공개 식별자), SUPABASE_URL.
- 암호화 시크릿(`wrangler secret put`): `NAVER_CLIENT_SECRET`, `SUPABASE_SERVICE_ROLE_KEY`, (카카오 Client Secret 사용 시) `KAKAO_CLIENT_SECRET`.
- 허용 Origin 목록에 운영 도메인(+staging/pages.dev) 포함.
- 보안: Origin allowlist · body size · rate limit · CSRF state(네이버) · 매 로그인 임시 패스워드 재생성.

## 4. ④ 비즈앱 검수 — 언제 필요/불필요
- **카카오는 계정범위 제약이 없다** — 비즈앱 검수 전이라도 모든 사용자 로그인 가능. 제약은 "받는 정보가 닉네임·프로필사진까지"뿐. → 이메일을 **직접 수집**해야 할 때만 비즈앱 검수 필요. (이메일 없이 provider 고유 ID 합성 이메일 `<provider>_<id>@<provider>.<도메인>` 로 식별하면 검수 없이 운영 가능.)
- **네이버는 검수 전 등록 멤버/테스터만** 로그인 가능 → 외부 공개 전 검수 필요.
- 비즈앱 검수 공통 선행조건: **개인정보처리방침 공개 URL 라이브**.

## 5. ⚠️ 핵심 함정 — "Bad client credentials" (카카오)
- 증상: 카카오 인증화면까진 가는데 콜백에서 `Bad client credentials`.
- 원인: 카카오 콘솔 Client Secret 을 **'사용함'** 으로 켰는데, 워커가 token exchange 시 `client_secret` 을 **안 보냄** = 시크릿이 라이브 워커에 실제로는 **미등록**(엉뚱한 CF 계정/워커에 등록, 또는 평문 var 로 넣어 재배포 때 소실).
- 해결: **올바른 워커**에 `wrangler secret put KAKAO_CLIENT_SECRET`(암호화)로 재등록 → `wrangler secret list` 에 등재 확인 → 시크릿모드에서 로그인 성공 확인.
- 예방: client_secret 은 항상 암호화 시크릿으로, 배포 대상 워커/계정 확인.

## 6. 기타 함정·확인 팁
- Redirect URI 는 슬래시·http/https 한 글자도 틀리면 실패(KOE006 등).
- 라이브 확인: `<도메인>/login` → provider 버튼 클릭 → **provider 인증화면(kauth.kakao.com / nid.naver.com)으로 넘어가면 성공**(=로그인 가능). "설정 안 됨" 폴백이 뜨면 ① 환경변수 미반영(재배포).
- Supabase Users 화면에선 자체처리 사용자도 provider="Email" 로 표시되는 한계 → `user_metadata.provider_<x>` 로 구분.

## 7. 달록 적용 사례(요약)
- 네이버·구글·카카오 3종 라이브(2026-06-05). 카카오는 KOE205 회피 위해 자체처리(scope 미지정·합성이메일), Client Secret 사용 → §5 함정 겪고 올바른 워커 Encrypt 재등록으로 해결.
- 사장님 콘솔용 시각 가이드(HTML): 달록 본레포 `docs/archive/260605_카카오OAuth활성화_사장님콘솔가이드.html`.