구글 로그인은 어떻게 설정하나요?
손님이 Google 계정으로 내 스토어에 가입하고 로그인할 수 있도록 구글 로그인을 연결하는 방법이에요.
전체 흐름은 ① luvduck 에서 스토어 주소 복사 → ② Google Cloud Console 에서 프로젝트·동의 화면 준비 → ③ OAuth 클라이언트 ID 만들기 → ④ 클라이언트 ID 를 luvduck 에 입력 순서예요.
💡 luvduck 에 넣는 값은 클라이언트 ID 하나예요. 구글 로그인은 팝업으로 열려서 리디렉션 URI 가 없고, 클라이언트 보안 비밀(Client Secret)도 쓰지 않아요. 대신 승인된 JavaScript 원본에 스토어 주소를 꼭 등록해야 로그인 창이 열려요.
⚠️ 스토어를 먼저 발행해 주세요. 등록할 주소가 스토어 주소이기 때문에, 발행 전에는 등록할 주소가 없어요.
1단계: luvduck 에서 스토어 주소 복사하기
- luvduck 스토어 관리자에서 설정 › 소셜 로그인으로 가요.
- Google 카드의 설정열기를 눌러요.
- 승인된 JavaScript 원본 옆의 복사를 눌러 주소를 복사해 둬요. 경로 없이
https://내스토어주소모양이에요.
2단계: Google Cloud 프로젝트 준비하기
- Google Cloud Console에 Google 계정으로 로그인해요.
- 상단의 프로젝트 선택을 누른 뒤 오른쪽 위 새 프로젝트로 프로젝트를 만들어요. 쓰던 프로젝트가 있으면 고르기만 하면 돼요.
3단계: OAuth 동의 화면 구성하기
- 왼쪽 메뉴 API 및 서비스 › 사용자 인증 정보로 가요.
- “OAuth 동의 화면을 구성해야 합니다” 안내가 보이면 오른쪽 동의 화면 구성을 눌러요.
동의 화면 구성에서 아래를 입력하고 저장해요.
- 앱 이름: 스토어 이름을 넣어요. 손님이 구글 로그인할 때 보는 이름이에요.
- 사용자 지원 이메일: 본인 Google 계정 이메일을 골라요.
- 대상: 외부를 골라요. 모든 Google 계정이 로그인할 수 있게 하려면 외부여야 해요.
- 연락처 이메일 등 나머지 필수 항목을 채워요.
⚠️ 대상의 게시 상태가 테스트이면 테스트 사용자로 등록한 계정만 로그인할 수 있어요. 손님 누구나 쓰게 하려면 앱 게시로 프로덕션 상태로 바꿔 주세요.
4단계: OAuth 클라이언트 ID 만들기
클라이언트 › 클라이언트 만들기(또는 사용자 인증 정보 만들기 › OAuth 클라이언트 ID)에서 아래를 입력해요.
- 애플리케이션 유형: 웹 애플리케이션
- 이름: 구분할 이름(예: 스토어 이름). 손님에게는 보이지 않아요.
- 승인된 JavaScript 원본: URI 추가를 누르고 1단계에서 복사한 스토어 주소를 붙여 넣어요.
- 승인된 리디렉션 URI: 비워 둬도 돼요. luvduck 구글 로그인은 쓰지 않아요.
만들기를 누르면 클라이언트 ID 가 나와요. 복사해 두세요. 나중에 클라이언트 목록에서도 다시 볼 수 있어요.
⚠️ myshop.luvduck.app 은 예시예요. 내 스토어의 실제 주소를https://부터, 끝에/나 경로 없이 넣으세요.
ℹ️ 커스텀 도메인을 연결해 손님이 그 주소로도 들어온다면, 그 주소(https://커스텀도메인)도 승인된 JavaScript 원본에 함께 추가하세요. 손님이 들어온 주소에서 로그인 창이 열리기 때문이에요.
5단계: luvduck 에 클라이언트 ID 를 넣고 연결하기
- luvduck 의 Google 설정 화면으로 돌아와요.
- Client ID 칸에 4단계에서 복사한 클라이언트 ID 를 넣어요.
….apps.googleusercontent.com으로 끝나는 값이에요. - 오른쪽 위의 연결을 눌러요.
설정 완료 — 로그인 화면에서 확인하기
연결되면 오른쪽 연결 상태가 연결됨으로 바뀌고, 스토어 로그인 화면에 Google 로그인 버튼이 나타나요.
소셜 로그인 화면 오른쪽 위의 로그인 화면 열기로 스토어 로그인 화면을 열어, Google 버튼으로 직접 한 번 로그인해 보세요.
- 연결 해제를 누르면 저장된 클라이언트 ID 가 지워져요. 다시 쓰려면 새로 넣어야 해요.