구글 로그인(소셜 로그인) 설정하기

Question

구글 로그인(소셜 로그인) 설정하기

Accepted Answer

이 도움말에서는 방문자가 Google 계정을 이용해 내 스토어에 가입하거나 로그인할 수 있도록 구글 로그인을 설정하는 방법을 안내합니다.

전체 흐름은 ① Google Cloud Console에서 프로젝트 준비 및 OAuth 동의 화면 구성 → ② OAuth 클라이언트 ID 생성(승인된 JavaScript 원본·리디렉션 URI 등록) → ③ 발급받은 클라이언트 ID를 luvduck 관리자에 입력 순서입니다.

💡 luvduck 구글 로그인은 클라이언트 ID 하나만 있으면 됩니다. 클라이언트 보안 비밀(Client Secret)은 사용하지 않습니다. 그리고 승인된 JavaScript 원본에 내 스토어 주소를 반드시 등록해야 로그인 창이 열립니다.

1단계: Google Cloud Console 접속 및 프로젝트 준비

Google Cloud Console에 접속해 Google 계정으로 로그인합니다.
상단의 프로젝트 선택을 클릭한 뒤, 오른쪽 위 새 프로젝트로 프로젝트를 만듭니다. (이미 사용할 프로젝트가 있다면 선택만 합니다.)

Google Cloud 프로젝트 선택 창 — 오른쪽 위 새 프로젝트 버튼

2단계: 사용자 인증 정보 → OAuth 동의 화면 구성 진입

왼쪽 메뉴에서 API 및 서비스 > 사용자 인증 정보로 이동합니다.
상단에 “OAuth 동의 화면을 구성해야 합니다” 안내가 보이면 오른쪽의 동의 화면 구성을 클릭합니다.

API 및 서비스 사용자 인증 정보 화면 — 오른쪽 동의 화면 구성 버튼

3단계: OAuth 동의 화면 구성

동의 화면 구성 화면에서 아래 정보를 입력하고 저장합니다. (이 화면은 Google Cloud Console 안에서 안내하는 순서대로 진행하면 됩니다.)

앱 이름: 스토어 이름(예: Luvduck)을 입력합니다. Google 로그인 시 사용자에게 표시되는 이름입니다.
사용자 지원 이메일: 본인 Google 계정 이메일을 선택합니다.
대상(User Type): 외부를 선택합니다. (모든 Google 계정 사용자가 로그인할 수 있게 하려면 ‘외부’여야 합니다.)
연락처 이메일 등 나머지 필수 항목을 입력하고 저장합니다.

ℹ️ 이 단계는 Google이 요구하는 기본 정보 입력 과정입니다. 화면이 여러 탭(브랜딩·대상 등)으로 나뉘어 있어도, 앱 이름·지원 이메일·대상(외부)만 채우면 다음 단계로 넘어갈 수 있습니다.

4단계: OAuth 클라이언트 ID 만들기

사용자 인증 정보 만들기 > OAuth 클라이언트 ID를 선택한 뒤, 아래 정보를 입력합니다.

애플리케이션 유형: 웹 애플리케이션을 선택합니다.
이름: 클라이언트를 구분할 이름(예: Luvduck)을 입력합니다.
승인된 JavaScript 원본에 내 스토어 주소를 입력합니다. (예: https://myshop.luvduck.app)
- 여기에 등록한 주소에서만 구글 로그인 창이 열립니다. 반드시 입력하세요.
- 경로(/auth/...) 없이 도메인까지만 입력합니다.
승인된 리디렉션 URI에 luvduck 관리자에서 안내하는 리다이렉트 URI를 그대로 입력합니다. (예: https://myshop.luvduck.app/auth/callback/google)
- 이 주소는 5단계의 luvduck 관리자 > 소셜 로그인 설정 화면에서 복사할 수 있습니다.
만들기를 클릭하면 클라이언트 ID가 발급됩니다. 표시되는 클라이언트 ID를 복사해 둡니다. (이후 OAuth 2.0 클라이언트 ID 목록에서도 다시 확인할 수 있습니다.)

⚠️ myshop.luvduck.app 는 예시입니다. 반드시 내 스토어의 실제 주소로 입력하세요. 주소는 https:// 로 시작해야 하며, 등록한 주소와 다른 곳에서는 구글 로그인이 동작하지 않습니다.

OAuth 클라이언트 ID 만들기 — 웹 애플리케이션, 이름, 승인된 JavaScript 원본과 승인된 리디렉션 URI 입력 화면

5단계: luvduck 관리자에 구글 로그인 연결

luvduck 스토어 관리자에서 소셜 로그인 설정 화면을 엽니다.

Google 항목의 토글을 켭니다.
표시된 리다이렉트 URI를 복사해, Google Cloud Console의 승인된 리디렉션 URI(4단계)에 동일하게 등록되어 있는지 확인합니다.
Client ID에 구글 클라이언트 ID를 입력합니다.
Client Secret은 비워 둡니다. 구글 로그인은 클라이언트 보안 비밀을 사용하지 않습니다.
Scopes에는 email, profile 을 쉼표로 구분해 입력합니다.
연결 저장을 누릅니다.

⚠️ Client Secret 칸은 비워 두세요. 구글 로그인은 클라이언트 ID만으로 동작합니다.

설정 완료 — 구글 로그인 사용 시작

연결을 저장하면 내 스토어의 로그인·회원가입 화면에 Google 로그인 버튼이 노출됩니다. 이제 방문자가 Google 계정으로 가입하고 로그인할 수 있습니다.

🎉 이것으로 구글 소셜 로그인 설정이 모두 완료되었습니다. 로그인 화면에서 Google 버튼이 정상 동작하는지 직접 한 번 확인해 보세요.