¶ 구글로그인
¶ 문서 목적
이 문서는 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 인증 플랫폼 메뉴로 이동할 수 있다.
¶ 캡처
¶ 2. Google Cloud 프로젝트 만들기
¶ 작업 순서
- 상단 프로젝트 선택 영역을 누른다.
새 프로젝트를 누른다.- 프로젝트 이름을
PASSV Google Login Prod로 입력한다. 만들기를 누른다.- 생성이 끝나면 방금 만든 프로젝트를 선택한다.
¶ 설명
- 프로젝트 ID는 자동으로 생성된다.
- 초보자는 Google 로그인 전용 프로젝트를 따로 만드는 편이 관리하기 쉽다.
¶ 캡처
¶ 3. 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는 문서용 캡처에서 마스킹했다.
¶ 캡처
¶ 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을 넣지 않는다.
¶ 캡처
¶ 10. 운영 로그인 화면에서 마지막 확인하기
¶ 작업 순서
https://in.passv.co.kr/login으로 이동한다.구글로 시작하기버튼이 보이는지 확인한다.- 버튼을 눌렀을 때 Google 로그인 흐름이 시작되는지 확인한다.
¶ 설명
- 운영 화면에서 버튼이 보이면 프론트 설정은 정상 반영된 것이다.
- 이후 실제 로그인 성공 여부는 운영 배포와 백엔드 설정까지 반영된 뒤 확인하면 된다.
¶ 캡처
¶ 초보 운영개발자용 최종 체크리스트
- Google Cloud 프로젝트를 만들었다.
- Google 인증 플랫폼에서
PASSV앱 정보를 입력했다. - 대상은
외부로 설정했다. - 연락처 정보와 정책 동의를 완료했다.
웹 애플리케이션OAuth 클라이언트를 만들었다.https://in.passv.co.kr를 JavaScript 원본으로 등록했다.https://in.passv.co.kr/api/auth/google/redirect를 리디렉션 URI로 등록했다.Client ID를 복사했다.PASSV_PROD_GOOGLE_CLIENT_ID에 같은 값을 넣었다.- 백엔드
GOOGLE_CLIENT_ID에도 같은 값을 넣었다. - 운영 로그인 화면에서
구글로 시작하기버튼을 확인했다.