구글로그인

문서 목적

이 문서는 https://in.passv.co.kr 운영 기준으로 Google 로그인을 구현하는 매뉴얼이다.

대상은 초보 운영개발자다. 따라서 아래 3가지만 끝내면 된다.

Google Cloud Console에서 Google 로그인 앱을 만든다.
PASSV가 실제로 쓰는 값을 가져온다.
PASSV 운영 설정에 같은 값을 넣는다.

먼저 알아둘 값

항목	값
운영 주소	`https://in.passv.co.kr`
로그인 화면	`https://in.passv.co.kr/login`
Authorized JavaScript origins	`https://in.passv.co.kr`
Authorized redirect URIs	`https://in.passv.co.kr/api/auth/google/redirect`
PASSV에 실제로 넣는 값	`Client ID`
이번 구현에서 쓰지 않는 값	`Client Secret`

중요한 점은 아래 2개다.

Authorized JavaScript origins와 Authorized redirect URIs는 글자 하나까지 정확히 같아야 한다.
현재 PASSV 운영 구현은 Client Secret이 아니라 Client ID를 사용한다.

캡처 파일 위치

실제 작업 캡처는 아래 폴더에 저장했다.

notion/ssot/assets/manual/google-login-in-passv-co-kr/

보안상 위험한 값은 캡처에서 마스킹했다.

전체 순서

Google Cloud 첫 동의 화면 통과하기
Google Cloud 프로젝트 만들기
Google 인증 플랫폼 시작하기
앱 정보 입력하기
대상 설정하기
연락처 정보 입력하기
OAuth 클라이언트 만들기
앱 게시하기
PASSV 운영 값에 반영하기
운영 로그인 화면에서 마지막 확인하기

1. Google Cloud 첫 동의 화면 통과하기

작업 순서

https://console.cloud.google.com/에 접속한다.
국가와 약관 동의 항목을 선택한다.
동의 및 계속하기를 누른다.

설명

이 화면은 계정마다 처음 한 번만 보일 수 있다.
이 단계를 통과해야 프로젝트 생성과 Google 인증 플랫폼 메뉴로 이동할 수 있다.

캡처

Google Cloud 첫 동의 완료

2. Google Cloud 프로젝트 만들기

작업 순서

상단 프로젝트 선택 영역을 누른다.
새 프로젝트를 누른다.
프로젝트 이름을 PASSV Google Login Prod로 입력한다.
만들기를 누른다.
생성이 끝나면 방금 만든 프로젝트를 선택한다.

설명

프로젝트 ID는 자동으로 생성된다.
초보자는 Google 로그인 전용 프로젝트를 따로 만드는 편이 관리하기 쉽다.

캡처

Google Cloud 프로젝트 이름 입력 완료

Google Cloud 프로젝트 생성 완료

3. Google 인증 플랫폼 시작하기

작업 순서

왼쪽 메뉴에서 Google 인증 플랫폼으로 이동한다.
시작하기를 누른다.

설명

여기서부터 Google 로그인용 기본 설정 마법사가 시작된다.
이후 순서는 앱 정보 -> 대상 -> 연락처 정보 -> 완료 순서다.

캡처

Google 인증 플랫폼 개요 화면

Google 인증 플랫폼 시작하기 버튼 화면

4. 앱 정보 입력하기

작업 순서

앱 이름에 PASSV를 입력한다.
사용자 지원 이메일에는 운영용 Google 계정을 선택한다.
다음을 누른다.

설명

앱 이름은 사용자가 Google 로그인 화면에서 보게 되는 서비스 이름이다.
지원 이메일은 운영자가 관리할 수 있는 계정을 사용하면 된다.

캡처

앱 정보 입력 완료

5. 대상 설정하기

작업 순서

대상 화면에서 외부를 선택한다.
다음을 누른다.

설명

PASSV는 일반 사용자가 사용하는 서비스이므로 외부가 맞다.
내부 전용 서비스가 아니면 내부를 선택하지 않는다.

캡처

대상 외부 선택 완료

6. 연락처 정보 입력하기

작업 순서

이메일 주소에 운영용 Google 계정을 입력한다.
사용자 데이터 정책 동의 체크를 선택한다.
만들기를 누른다.

설명

이 이메일은 Google이 프로젝트 변경사항을 알릴 때 사용하는 주소다.
실제 문서용 캡처에서는 이메일 값을 마스킹했다.

캡처

연락처 정보 입력 완료

7. OAuth 클라이언트 만들기

작업 순서

왼쪽 메뉴 클라이언트로 이동한다.
OAuth 클라이언트 만들기를 누른다.
애플리케이션 유형은 웹 애플리케이션을 선택한다.
이름은 passv-in-prod-web로 입력한다.
승인된 JavaScript 원본에는 아래 값을 넣는다.

https://in.passv.co.kr

승인된 리디렉션 URI에는 아래 값을 넣는다.

https://in.passv.co.kr/api/auth/google/redirect

만들기를 누른다.
생성 완료 팝업에서 Client ID를 확인한다.

설명

이 단계가 가장 중요하다.
PASSV 운영 기준으로 원본 주소와 리디렉션 주소는 위 값 그대로 사용하면 된다.
생성 완료 팝업의 Client ID는 문서용 캡처에서 마스킹했다.

캡처

OAuth 클라이언트 입력 완료

OAuth 클라이언트 생성 완료 팝업

8. 앱 게시하기

작업 순서

왼쪽 메뉴 대상으로 다시 이동한다.
앱 게시를 누른다.
확인 팝업에서 확인을 누른다.
화면에 프로덕션 단계가 표시되는지 확인한다.

설명

운영 서비스 기준 문서이므로 마지막 상태는 프로덕션 단계다.
테스트만 할 때는 게시하지 않고 테스트 상태로 둘 수도 있지만, in.passv.co.kr 운영 기준 문서에서는 프로덕션 전환까지 포함한다.

캡처

앱 게시 확인 팝업

프로덕션 단계 전환 완료

9. PASSV 운영 값에 반영하기

이 단계에서 기억할 규칙

Google Console에서 가져온 Client ID 1개를 아래 두 위치에 같은 값으로 넣으면 된다.

위치	변수명	넣는 값
프론트 운영 변수	`PASSV_PROD_GOOGLE_CLIENT_ID`	Google Console에서 복사한 `Client ID`
백엔드 운영 변수	`GOOGLE_CLIENT_ID`	같은 `Client ID`

작업 순서

Google Console에서 복사한 Client ID를 준비한다.
PASSV 운영 프론트 변수에 PASSV_PROD_GOOGLE_CLIENT_ID로 등록한다.
PASSV 운영 백엔드 런타임 변수에 GOOGLE_CLIENT_ID로 등록한다.
운영 배포를 다시 진행한다.

PASSV 코드 기준으로 보면

구분	파일	의미
프론트 예시 변수	`client/mobile/.env.example`	`VITE_GOOGLE_CLIENT_ID` 자리
백엔드 예시 변수	`server/.env.example`	`GOOGLE_CLIENT_ID` 자리
운영 배포 참조	`.github/workflows/deploy.yml`	`PASSV_PROD_GOOGLE_CLIENT_ID`를 읽어 `GOOGLE_CLIENT_ID`로 전달

설명

운영 프론트는 GitHub Actions 변수 PASSV_PROD_GOOGLE_CLIENT_ID를 사용한다.
운영 백엔드는 같은 값을 GOOGLE_CLIENT_ID로 사용한다.
VITE_GOOGLE_REDIRECT_URI는 현재 구현상 필수가 아니다. 기본값으로 https://in.passv.co.kr/api/auth/google/redirect를 사용한다.
이번 구현에서는 Client Secret을 넣지 않는다.