웹사이트 공개 10편: Google 로그인 연결하기
웹사이트 공개 실습 10/14 · 가상 프로젝트 작은 작업실 기준입니다.
example.com은 설명용 예약 도메인이며 실제 연결에는 본인 소유 도메인을 사용합니다.
이번 편의 목표
로그인 버튼을 누르면 Google 인증 후 본인 확인 화면으로 돌아오게 합니다. 예제의 로그인 파일은 이미 포함되어 있습니다. 별도 회원 DB·게시판·관리자 권한을 만드는 실습은 아닙니다. 사용 라이브러리는 ZIP에 고정한 Auth.js 5 베타 버전 기준입니다.
먼저 개발 환경에 연결하기
- Google Cloud Console에서 개발용 프로젝트를 선택하거나 만듭니다. Google Auth Platform의 Branding·Audience·Data Access·Clients 설정을 확인합니다. 이전 UI에서는 API 및 서비스의 OAuth 동의 화면·사용자 인증 정보로 표시될 수 있습니다.
- 앱 이름·지원 이메일·개발자 연락처는 본인의 정보로 입력합니다. 외부 사용자용 테스트 상태라면 시험할 Google 계정을 테스트 사용자에 추가합니다.
- 클라이언트 만들기에서 웹 애플리케이션을 선택합니다. 승인된 리디렉션 URI에 아래 주소를 정확히 넣습니다.
http://localhost:4101/api/auth/callback/google
- 발급된 클라이언트 ID와 비밀번호를
.env.dev의AUTH_GOOGLE_ID,AUTH_GOOGLE_SECRET에 넣습니다.AUTH_URL=http://localhost:4101도 확인합니다. 식별자·비밀번호·콜백 주소는 서로 다른 항목입니다. - 프로젝트 터미널에서 다음 명령으로 인증 비밀값을 생성하고 출력값을
.env.dev의AUTH_SECRET에 넣습니다. 이 출력과 설정 파일은 공유하지 않습니다.
node -e "console.log(require('node:crypto').randomBytes(32).toString('hex'))"
docker compose -f compose.dev.yaml up -d --build후http://localhost:4101/login을 엽니다. Google 로그인 후/account에서 본인 이름이 보이는지 확인하고 로그아웃도 확인합니다.
운영 주소에 적용하기
개발에서 확인했다면 운영용 OAuth 클라이언트를 별도로 준비하고 리디렉션에 https://example.com/api/auth/callback/google의 본인 도메인 버전을 등록합니다. 운영 .env에는 운영 클라이언트 값·별도 AUTH_SECRET·대표 HTTPS AUTH_URL을 저장합니다. Tunnel과 함께 두 Compose 파일로 반영하고 운영 주소에서 다시 확인합니다. 공개 대상과 테스트 사용자 제한도 실제 운영에 맞게 검토합니다. 개인정보 안내는 예제 초안을 실제 처리 방식으로 교체합니다.
자주 막히는 지점
사이트로 돌아오지만 다시 로그인 화면이에요. 현재 접속 주소, 콜백 URI, AUTH_URL, 적용한 환경변수와 쿠키 설정을 함께 확인합니다. 로컬 값과 운영 값을 섞거나 www와 대표 도메인을 섞지 않습니다. 설정을 바꾼 뒤 컨테이너에 반영했는지도 봅니다.
서비스 계정이 필요한가요? 이 로그인은 웹 OAuth 클라이언트를 사용합니다. 관리자 대시보드의 통계 API용 서비스 계정은 다른 용도입니다.
Google 로그인 계정이면 관리자도 되나요? 이 예제는 본인 로그인 확인만 제공합니다. 실제 서비스의 회원 저장·등급·관리자 인증은 별도로 설계해야 합니다.
완료 기준과 검증
개발과 운영에서 로그인·계정 화면·로그아웃을 각각 확인해야 합니다. 샘플의 미인증 계정 화면 접근 차단은 검증했습니다. 가상 도메인과 실제 Google 계정의 인증 완료는 재현하지 않았으므로 독자 클라이언트로 확인합니다.
공식 자료 확인: 2026-11-15. Auth.js Google 설정(공식·영문), Google 웹 서버 OAuth 문서(영문).