DB + 회원가입 — 구글/카카오 OAuth

왜 "구글로 로그인"인가? — 비밀번호를 직접 안 다루는 게 핵심

OAuth(오어쓰)는 "구글/카카오로 로그인" 버튼 그거예요. 사용자가 본인 서비스에 비밀번호를 따로 만드는 대신, 이미 가진 구글·카카오 계정으로 바로 들어오는 방식이에요.

이메일·비밀번호 회원가입을 직접 만들면 본인이 떠안아야 할 게 많아져요 — 비밀번호 안전하게 보관, 비밀번호 찾기 메일, 이메일 진짜인지 확인, 비밀번호 까먹은 사용자 응대, 그리고 만에 하나 유출되면 책임까지. 비개발자가 첫 출시에 감당하기엔 무거워요.

반면 "구글/카카오로 로그인"은 이 골치 아픈 일을 전부 구글·카카오에 맡겨요. 본인은 "이 사람이 구글에 로그인했다"는 결과만 받아서 본인 명단(DB)에 추가하면 끝. 편하고, 안전하고, 사용자도 클릭 한 번이라 더 좋아해요.

전체 흐름 — 4단계

단계 1 — /v3-database로 User 모델

Claude Code 채팅에 한 줄.

/v3-database

스킬이 본인에게 묻는 것 + 추천 답:

• "User 모델 만들까요?" → 네
• "필드는 어떤 게 필요한가요?" → 기본만(name, email, provider, uid). 추가 필드는 나중에.
• "마이그레이션 실행할까요?" → 네

스킬이 자동으로 다음을 해 줘요:

• db/migrate/create_users.rb 마이그레이션 파일 생성
• app/models/user.rb User 모델 클래스 생성
• bin/rails db:migrate 실행 → DB에 users 테이블 생성
• 기본 테스트 fixtures 추가 (test/fixtures/users.yml)

단계 2A — 구글에서 "열쇠 2개" 받아오기

"구글로 로그인"을 쓰려면 구글에 본인 서비스를 한 번 등록하고 열쇠 2개(client ID / secret)를 받아와야 해요. 화면이 영어·메뉴가 많아 처음엔 복잡해 보이지만, 목표는 딱 하나 — 열쇠 2개를 복사하는 것이에요. 한 번만 하면 끝.

console.cloud.google.com에 로그인한 뒤, 큰 흐름은 이래요:

1. 새 프로젝트 만들기(이름은 아무거나, 예: "my-cafe-app").
2. "사용자 인증 정보" 메뉴에서 "OAuth 클라이언트 ID 만들기"를 찾아 클릭. (처음이면 "동의 화면"을 먼저 만들라고 안내가 떠요 → "외부" 고르고 이름·이메일만 채워 저장하면 돼요.)
3. 유형은 "웹 애플리케이션" 선택.
4. "승인된 리디렉션 URI" 칸에 아래 한 줄을 그대로 복붙:

   http://localhost:3000/auth/google_oauth2/callback

5. "만들기"를 누르면 클라이언트 ID와 비밀 키(secret)가 떠요. 둘 다 복사해 두세요. (이 2개가 목표였어요.)

단계 2B — .env에 구글 키 저장

Antigravity 좌측 트리에서 .env 파일 열기. 다음 두 줄 추가 (값은 방금 발급받은 것으로 교체):

GOOGLE_CLIENT_ID=123456789-abcdef.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=GOCSPX-abcdefghijklmnop

저장 후 변경 사항 git status 확인. .env는 git이 자동으로 무시하므로 빠져 있어야 정상.

단계 3 — (선택) 카카오 OAuth 앱 만들기

한국 사용자 타겟이면 카카오도 같이 추가하는 걸 권장. 비슷한 흐름이에요.

developers.kakao.com에 카카오 계정으로 로그인한 뒤, 여기서도 목표는 열쇠 2개(REST API 키 + Client Secret) 복사예요. 큰 흐름:

1. "애플리케이션 추가하기"로 앱 하나 만들기.
2. "앱 키" 메뉴에서 REST API 키 복사 (구글의 client ID 역할).
3. "카카오 로그인"을 활성화 ON 하고, 같은 화면의 "Redirect URI"에 아래 한 줄 복붙:

   http://localhost:3000/auth/kakao/callback

4. "동의 항목"에서 닉네임·이메일을 ON.
5. "보안" 메뉴에서 Client Secret 생성 → 복사. (이 2개가 목표였어요.)

역시 메뉴 위치가 다르거나 막히면, 그 화면을 캡처해서 Claude Code에 "여기서 카카오 로그인 키 어디서 받아?"라고 물어보세요.

.env에 추가:

KAKAO_CLIENT_ID=여기에_REST_API_키
KAKAO_CLIENT_SECRET=여기에_Client_Secret

단계 4 — /v3-auth로 OAuth 연동

Claude Code에 한 줄.

/v3-auth

스킬이 본인에게 묻는 것 + 추천 답:

• "어떤 OAuth 제공자를 쓸까요?" → "구글 + 카카오" 또는 "구글만"
• "User 모델에 추가 컬럼 필요할까요? (provider, uid)" → 네 (4-8 단계 1에서 안 만들었으면)
• "세션 저장 방식은?" → 기본(쿠키 + DB) OK
• "로그인 후 어디로 redirect?" → /dashboard 또는 본인 메인 페이지

스킬이 자동으로 해 주는 일:

• omniauth-google-oauth2, omniauth-kakao gem 추가
• config/initializers/omniauth.rb 설정 (.env 값 사용)
• routes에 OAuth 콜백 경로 추가
• SessionsController 생성 + 콜백 처리 로직
• 로그인/로그아웃 헬퍼 메서드
• 로그인 페이지 view (간단한 "Google로 로그인" 버튼)
• 기본 통합 테스트

단계 5 — 본인이 직접 로그인 테스트

터미널에서 서버 띄우기.

bin/dev

브라우저 새 탭 → http://localhost:3000/login (또는 스킬이 알려준 경로). "Google로 로그인" 버튼 → 본인 구글 계정 선택 → 권한 동의 → 본인 서비스로 돌아옴 → 로그인 성공!

진짜 명단(DB)에 본인이 추가됐는지도 확인해 봐요. 직접 DB를 뒤질 필요 없이, Claude Code에 한 줄 부탁하면 돼요:

방금 로그인한 내 계정이 DB(users)에 잘 저장됐는지 확인해줘.

Claude가 가장 최근 가입한 사용자(본인 이메일·구글/카카오 표시)를 찾아서 보여줘요. 이 한 줄이 보이면 회원가입이 진짜로 동작한 거예요.

자주 발생하는 문제 + 해결

완료 후 git commit + 보안 점검

git add .
git commit -m "DB + OAuth (Google/Kakao) 회원가입 완료"

보안 점검 권장: 04-security-agent에 "OAuth 구현 점검" 티켓 만들어서 배정. 자동으로 client secret 노출, redirect URI 화이트리스트, CSRF 토큰 등을 검토해 줘요.

자가 진단 — 통과 기준

• ☐ User 모델 + users 명단(테이블)이 만들어짐 (/v3-database가 처리)
• ☐ 구글에서 열쇠 2개(client ID/secret)를 받아 .env에 넣음
• ☐ (선택) 카카오 열쇠 2개도 .env에 넣음
• ☐ localhost:3000에서 본인 구글 계정으로 로그인 성공
• ☐ Claude에게 부탁해서 내 계정이 DB에 저장됐는지 확인함
• ☐ git commit 한 줄로 OAuth 완료 시점 세이브