Google 로그인 연결하기

내 서비스 이용자가 Google 계정으로 가입하게 하려면, Google에 내 서비스를 등록하고 클라이언트 ID와 클라이언트 보안 비밀번호를 받아 와야 합니다.

이 페이지는 클라이언트 ID와 클라이언트 보안 비밀번호를 받는 순서를 안내합니다. 받은 두 값을 WEEGLOO에 넣는 방법은 클라이언트 ID와 클라이언트 보안 비밀번호를 WEEGLOO에 넣기에, 동의 화면에 내 서비스 이름과 로고를 보이게 하는 방법은 동의 화면에 서비스 이름과 로고 보이기에 있습니다.

Google에서 클라이언트 ID와 클라이언트 보안 비밀번호 받기

아래 네 단계는 Google Cloud Console에서 진행합니다. Google 계정으로 로그인한 상태여야 합니다. 여기서 하는 일에는 비용이 들지 않습니다.

Google 계정을 여러 개 사용하고 있다면, 링크를 눌렀을 때 의도하지 않은 계정으로 열릴 수 있습니다. 화면 오른쪽 위의 프로필 사진을 눌러 어느 계정인지 확인하고, 의도한 계정이 아니라면 전환해 주세요.

1

프로젝트 만들기

이미 쓰던 프로젝트가 있다면 새로 만들지 않고 그 프로젝트를 그대로 써도 됩니다. 그때는 이 단계를 건너뛰고 동의 화면 구성하기로 가세요.

  1. 새 프로젝트 화면(https://console.cloud.google.com/projectcreate (새 탭에서 열림))을 여세요.

  2. 프로젝트 이름에 나중에 알아볼 이름을 입력하세요(예: 포근한 옷장).

  3. 만들기를 누르세요.

    새 프로젝트 화면. 프로젝트 이름에 "포근한 옷장"이 입력되어 있고 아래에 만들기 버튼이 있습니다

  4. 콘솔 위쪽의 프로젝트 이름이 방금 만든 것으로 되어 있는지 확인하세요.

3

OAuth 클라이언트 만들기

여기서 만드는 클라이언트에 로그인 결과가 돌아올 주소를 등록합니다.

  1. Google 인증 플랫폼의 클라이언트 화면(https://console.cloud.google.com/auth/clients (새 탭에서 열림))을 여세요.

  2. 클라이언트 만들기를 누르세요.

    클라이언트 화면. OAuth 2.0 클라이언트 ID 목록이 비어 있고 위에 클라이언트 만들기가 보입니다

  3. 애플리케이션 유형에서 웹 애플리케이션을 고르세요.

    애플리케이션 유형 드롭다운이 열려 웹 애플리케이션을 비롯한 여섯 가지 유형이 보입니다

  4. 이름에 이 클라이언트를 알아볼 이름을 입력하세요(예: 포근한 옷장).

  5. 승인된 JavaScript 원본은 비워 두세요.

  6. 승인된 리디렉션 URI의 URI 추가를 누르세요.

  7. 나타난 칸에 아래 주소를 붙여 넣으세요. 내 Space를 고르면 식별자가 채워집니다.

    Space
    https://auth.weegloo.com/v1/spaces/{spaceId}/login/oauth2/code/google

    내 Space가 무엇인지 모르겠고 AI 에이전트에게 연동을 맡겨 두었다면, 에이전트에게 물어보는 방법도 있습니다. 대화창에 "Google 로그인에 등록할 리디렉션 주소 알려 줘"라고 요청하면 완성된 주소를 받습니다.

  8. 만들기를 누르세요.

    승인된 리디렉션 URI에 주소를 채운 폼. 승인된 JavaScript 원본은 비어 있습니다

목록에는 Android나 iOS 같은 유형도 있지만, 모바일 앱에 로그인을 붙이는 경우에도 웹 애플리케이션을 고릅니다. 로그인 결과가 돌아가는 곳이 내 앱이 아니라 WEEGLOO의 웹 주소이기 때문입니다. 이름은 Google 화면에서 클라이언트를 구분하는 용도이고, 이용자에게는 보이지 않습니다.

등록한 주소는 바로 반영되지 않을 수 있습니다

폼 아래에는 "참고: 설정이 적용되는 데 5분에서 몇 시간이 걸릴 수 있습니다"라는 Google의 안내가 있습니다. 등록한 직후에는 아직 반영되지 않아 로그인이 막힐 수 있습니다. 그럴 때는 시간을 두고 다시 시도하세요.

4

클라이언트 ID와 클라이언트 보안 비밀번호 복사하기

만들기를 누르면 OAuth 클라이언트 생성됨 창이 뜹니다. 여기 적힌 클라이언트 ID와 클라이언트 보안 비밀번호를 WEEGLOO에 넣습니다.

창을 닫으면 클라이언트 보안 비밀번호를 다시 볼 수 없습니다

이 창에는 "이 대화상자를 닫으면 더 이상 클라이언트 보안 비밀번호를 보거나 다운로드할 수 없습니다"라는 경고가 있습니다. 창을 닫기 전에 클라이언트 ID와 클라이언트 보안 비밀번호를 복사해 두세요. 값을 파일로 받아 두고 싶다면 JSON 다운로드를 눌러도 됩니다.

  1. 클라이언트 ID 오른쪽의 복사 아이콘을 눌러 값을 복사해 두세요.

  2. 클라이언트 보안 비밀번호 오른쪽의 복사 아이콘을 눌러 값을 복사해 두세요.

  3. 클라이언트 ID와 클라이언트 보안 비밀번호를 모두 옮겨 두었으면 확인을 누르세요.

    OAuth 클라이언트 생성됨 창. 클라이언트 ID와 클라이언트 보안 비밀번호, 다시 볼 수 없다는 경고가 보입니다

클라이언트 ID와 클라이언트 보안 비밀번호가 콘텐츠 스튜디오의 어느 칸에 들어가는지는 이렇습니다.

Google 화면콘텐츠 스튜디오
클라이언트 IDClient ID
클라이언트 보안 비밀번호Client Secret

클라이언트 보안 비밀번호는 이름 그대로 비밀번호입니다. 남에게 알려 주거나 공개된 곳에 적어 두지 마세요.

클라이언트 ID와 클라이언트 보안 비밀번호를 WEEGLOO에 넣기

이제 클라이언트 ID와 클라이언트 보안 비밀번호가 준비됐습니다. 여기서부터는 지금까지 어떻게 작업해 왔는지에 따라 갈립니다.

콘텐츠 스튜디오에서 직접 설정하고 있었다면 이렇게 진행하세요.

  1. 서비스 회원 로그인의 소셜 로그인 켜기로 돌아가세요.
  2. Google을 켜세요.
  3. Step 2의 Client ID 칸에 클라이언트 ID를 넣으세요.
  4. Client Secret 칸에 클라이언트 보안 비밀번호를 넣으세요.
  5. 저장을 누르세요.

AI 에이전트에게 연동을 맡겨 두고 클라이언트 ID와 클라이언트 보안 비밀번호를 받아 오라는 안내를 받았다면, 받아 온 두 값을 대화창에 그대로 붙여 넣고 하던 작업을 이어 가세요. 남은 설정은 에이전트가 이어서 처리합니다.

동의 화면에 서비스 이름과 로고 보이기

이용자가 Google 계정으로 로그인할 때 뜨는 동의 화면에는, 처음에는 내 서비스 이름 대신 WEEGLOO의 도메인이 표시됩니다. 이용자는 어느 서비스에 가입하는지 알아보기 어렵고, 비슷하게 꾸민 가짜 사이트와 구별하기도 어렵습니다. 내 서비스 이름과 로고가 표시되면 이용자가 믿고 가입할 수 있습니다.

로그인은 이 상태로도 동작하므로 필수는 아닙니다. 서비스를 실제로 열기 전에 해 두기를 권합니다. 이름과 로고는 Google의 브랜딩 인증 (새 탭에서 열림)을 받으면 표시됩니다.

1

홈페이지와 개인정보처리방침 준비하기

Google은 동의 화면에 표시할 이름이 실제 서비스의 이름인지 홈페이지로 확인합니다. 내 사이트에 홈페이지와 개인정보처리방침을 준비하세요.

AI 에이전트에게 연동을 맡겼다면 "Google 브랜딩 인증에 필요한 홈페이지와 개인정보처리방침을 만들어 줘"라고 요청하세요.

  • 홈페이지: 로그인 없이 열리고, 서비스를 설명하며, 개인정보처리방침으로 링크하는 페이지. 로그인 버튼은 다른 페이지에 둡니다.
  • 개인정보처리방침: 홈페이지와 같은 주소 아래에서, Google 계정에서 받은 정보를 어떻게 쓰고 보관하는지 밝히는 페이지.

서비스 약관은 선택입니다.

2

Search Console에서 사이트 확인받기

홈페이지가 내 것이라는 사실은 Google Search Console로 증명합니다.

AI 에이전트에게 연동을 맡겼다면, 아래 5번에서 받은 파일을 대화창에 올리고 "이 파일을 사이트에 넣어 다시 배포해 줘"라고 요청하세요. 6번은 에이전트가 처리합니다.

  1. Search Console(https://search.google.com/search-console (새 탭에서 열림))을 여세요. Google Cloud 프로젝트의 소유자나 편집자인 계정이어야 합니다.

  2. 웹사이트 추가를 누르세요. 이미 등록한 사이트가 있다면, 왼쪽 위의 속성 선택 메뉴에서 속성 추가를 누른 뒤 웹사이트 추가를 누르세요.

  3. 속성 유형 선택 창의 URL 접두어 칸에 홈페이지 주소를 입력하세요(예: https://pogeun-otjang.weegloo.app/).

  4. URL 접두어 쪽의 계속을 누르세요.

  5. 소유권 확인 창의 HTML 파일에서, 파일 이름이 적힌 버튼을 눌러 파일을 내려받으세요. 이 창은 닫지 말고 두세요.

    Search Console의 소유권 확인 창. 권장 확인 방법인 HTML 파일이 펼쳐져 있고, 내려받을 파일 이름 버튼과 파일을 올릴 홈페이지 주소, 아래에 확인 버튼이 보입니다

  6. 받은 파일을 이름 그대로 사이트 맨 위 폴더에 넣어 다시 배포하세요(사이트를 고친 뒤 다시 올리기).

  7. 소유권 확인 창으로 돌아가 확인을 누르세요.

소유권이 확인됨이 표시되면 이 단계가 끝납니다.

확인 파일은 지우지 마세요

Search Console은 이 파일이 남아 있는지 주기적으로 다시 확인합니다. 사이트를 다시 올릴 때도 함께 넣으세요.

3

브랜딩 정보 채우기

준비한 페이지와 표시할 이름, 로고를 Google에 알립니다.

  1. Google 인증 플랫폼의 브랜딩 화면(https://console.cloud.google.com/auth/branding (새 탭에서 열림))을 여세요.

  2. 앱 이름에 홈페이지에 적은 서비스 이름을 똑같이 입력하세요. Google 제품의 이름은 넣을 수 없습니다.

  3. 앱 로고에 내 서비스 고유의 로고를 올리세요. 다른 브랜드의 로고를 쓰면 인증되지 않습니다. 파일은 1MB 이하의 JPG, PNG, BMP이고, 120×120px 정사각형이 가장 잘 보입니다.

  4. 애플리케이션 홈페이지와 애플리케이션 개인정보처리방침 링크에 홈페이지와 개인정보처리방침의 주소를 넣으세요. 약관이 있으면 애플리케이션 서비스 약관 링크에도 넣습니다.

  5. 승인된 도메인에 weegloo.app을 넣으세요.

    • 항목이 없으면 도메인 추가를 누르고 입력합니다.
    • 기존 항목이 있으면 그 칸의 값을 weegloo.app으로 고칩니다. 기존 항목은 삭제가 되지 않을 수 있습니다. 그러한 경우 값을 고치면 됩니다.

    브랜딩 화면의 승인된 도메인 절. 승인된 도메인 1 칸의 값이 WebHosting 도메인으로 고쳐져 있고, 아래에 도메인 추가 버튼이 보입니다

  6. 저장을 누르세요.

4

인증 요청하고 게시하기

브랜딩 인증은 앱을 게시한 뒤에 요청할 수 있습니다. 테스트 상태에서는 인증 버튼이 표시되지 않습니다.

  1. 대상 화면에서 앱 게시를 누르세요.
  2. 프로덕션으로 푸시하시겠어요? 창에서 확인을 누르세요.
  3. 브랜딩 화면의 인증 상태에서 브랜딩 확인을 누르세요. 인증에는 최대 5분 정도 걸립니다.
  4. 보완할 점이 있으면 문제 보기로 내용을 확인하세요. 고친 뒤 문제를 해결함을 골라 다시 요청합니다.
  5. 통과하면 7일 안에 브랜딩 게시를 누르세요.

게시하면 동의 화면에 내 서비스 이름과 로고가 표시됩니다.

다음으로 할 일

  • 서비스 회원 로그인: 받아 온 값을 콘텐츠 스튜디오에 넣고, 회원 로그인의 나머지 설정을 마칩니다.
  • 회원 역할과 권한: 가입한 회원이 무엇을 보고 쓸 수 있는지 정하는 ServiceUserRole을 만듭니다.
  • Auth API: 로그인을 내 사이트 코드에 붙일 때 필요한 요청 형식 같은 기술 명세를 다룹니다.