Google Login 설정

소개

이 가이드에서는 Capgo Social Login으로 Google Login을 설정하는 방법을 알아봅니다. Google Login을 설정하려면 다음이 필요합니다:

• Google 계정

일반 설정

참고

어떤 플랫폼을 사용하든 이 단계는 반드시 필요합니다.

이 섹션에서는 Google에서 표시되는 로그인 화면을 설정합니다.

1. 다음 페이지로 이동하세요: console.cloud.google.com
2. 프로젝트 선택기를 클릭하세요
3. 기존 프로젝트가 없다면, 새 프로젝트를 생성하세요.
   1. 클릭하세요 New project
   2. 프로젝트 이름을 입력하고 클릭하세요 Create
   3. 올바른 프로젝트를 선택했는지 확인하세요
4. 설정을 시작하려면 OAuth consent screen

   1. 검색창을 클릭하세요

      

   2. 검색어 입력 OAuth consent screen 클릭하세요

      

   3. 동의 화면 설정하기

      참고

      일반 대중에게 공개되는 앱을 개발 중이라고 가정하고, external 사용자 유형을 기준으로 설명하겠습니다. 본인에게 가장 적합한 사용자 유형을 선택한 후, create

      클릭하세요 create

      
5. 앱 정보 입력

   1. 먼저, App Information

      
      • 다음 내용을 입력해 주세요: App Name

        주의

        사용자에게 표시되는 문구입니다

      • 다음 항목을 입력하세요 user support email

        참고

        지원용 이메일에 대한 자세한 내용은 여기서

      2. 귀하 할 수 있습니다 앱 로고를 추가할 수 있습니다.

         

         참고

         필수는 아니므로 이 단계는 건너뜁니다

      3. 귀하 권장 다음 설정을 완료해야 합니다: App domain

         

         참고

         이것은 실제 배포용이 아닌 단순 데모이므로 하지 않겠지만, 이 섹션을 작성하는 것을 강력히 권장합니다.

      4. 귀하 필수 개발자 이메일 입력

         

      5. 클릭하세요 save and continue

         
6. Scope 설정

   1. 클릭하세요 add or remove scopes

      

   2. 다음 Scope를 선택하고 클릭하세요 update

      

   3. 클릭 save and continue

      
7. 테스트 사용자 추가
   1. 클릭하세요 add users
   2. Google 이메일을 입력하고 Enter를 누른 뒤, 클릭하세요 add
   3. 클릭 save and continue
8. 클릭 back to dashboard
9. 앱 검토 요청 제출하기

   참고

   앱 검토 제출을 강력히 권장합니다. 이 과정은 본 튜토리얼의 범위를 벗어나며, 자세한 내용은 다음에서 확인하실 수 있습니다. 여기서. 로컬 테스트 시에는 필요하지 않지만, 프로덕션 환경에서는 필수입니다.

온라인 액세스와 오프라인 액세스의 차이점

Capacitor에서 Google Login을 사용하는 방법은 여러 가지가 있습니다. 다음은 두 방식의 차이점을 정리한 표입니다:

	온라인 액세스	오프라인 액세스
백엔드 필요	❌	✅
장기 유지 액세스 토큰	❌	✅
간편한 설정	✅	❌

참고

오프라인 모드 는 사용자가 앱을 활발히 사용하지 않는 상태(즉, 앱 관점에서 사용자가 "오프라인"인 상태)에서도 백엔드가 Google API에 접근할 수 있음을 의미합니다. 장기 유지되는 access token을 통해 백엔드는 언제든 사용자를 대신하여 Google API를 호출할 수 있습니다.

주의

오프라인 모드를 사용하려면 백엔드 서버가 반드시 필요합니다. 오프라인 모드를 사용하면 프론트엔드는 최소한의 정보(주로 서버 인증용 code)만 받게 됩니다. 이 code를 토큰 및 사용자 정보로 교환할 백엔드가 없다면, 오프라인 모드는 프론트엔드 애플리케이션에 유용한 데이터를 제공할 수 없습니다.

주의

SocialLogin.refresh({ provider: 'google' }) 는 이 오버라이드는 와(과) 함께 작동 google.mode: 'offline'. 오프라인 모드에서 플러그인은 오직 serverAuthCode, 그리고 백엔드에서 해당 code를 access 및 refresh token으로 교환한 뒤, 백엔드에서 이 토큰들을 갱신해야 합니다.

어떤 방식을 선택해야 할지 모르겠다면, 다음 시나리오를 참고하세요:

1. 사용자가 로그인하자마자 커스텀 JWT를 발급해야 하는 경우입니다. 앱에서 Google API를 호출하지는 않습니다.

   이 경우에는 online access를 선택하세요.

2. 앱이 클라이언트에서 Google API를 호출하지만, 백엔드에서는 호출하지 않는 경우입니다.

   이 경우에는 online access를 선택하세요.

3. 사용자가 앱을 활발히 사용하는 동안에만 백엔드에서 Google API를 호출하는 경우입니다.

   이 경우에는 online access를 선택하세요.

4. 사용자가 앱을 사용 중이지 않을 때도 주기적으로 사용자의 캘린더를 확인해야 하는 경우입니다.

   이 경우에는 offline access를 선택하세요.

online access를 위한 백엔드 예시

이번 튜토리얼에서는 백엔드에서 사용자를 검증하는 방법을 알아봅니다.

이 예제는 매우 간단하며 다음 기술들을 기반으로 합니다:

• Typescript

• Hono

• Javascript의 fetch API

이 예제의 code는 여기서 확인할 수 있습니다 여기서

다음과 같습니다:

원리는 매우 간단합니다. 간단한 GET 요청을 https://www.googleapis.com/oauth2/v3/tokeninfo 로 보내면 토큰의 유효 여부를 반환하며, 유효할 경우 사용자의 이메일을 제공합니다. 또한 사용자 토큰에 대한 기타 정보도 함께 제공합니다.

이를 통해 사용자에게 자체 JWT를 발급하거나 세션 쿠키를 생성할 수 있습니다. 최종 인증 구현 방식은 무궁무진합니다.

Google API를 호출하고 싶다면 다음을 확인해 보시길 강력히 권장합니다. Google OAuth 2.0 Playground. 여기서 호출 가능한 API를 쉽게 확인할 수 있습니다.

자체 백엔드에서 offline access 사용하기

offline access를 사용하려면 다음 항목이 필요합니다:

• HTTP 서버

이 예제에서는 앱에 offline access를 제공하기 위해 다음 기술들을 사용합니다:

• Hono

• Hono Zod validator

• Zod

• Hono JWT

• LowDb (간단한 데이터베이스)

이 예제의 code는 다음에서 확인할 수 있습니다. 여기서

클라이언트 code는 다음과 같습니다:

import { Capacitor } from '@capacitor/core';
import { GoogleLoginOfflineResponse, SocialLogin } from '@capgo/capacitor-social-login';
import { usePopoutStore } from '@/popoutStore'; // <-- specific to my app

const baseURL = "[redacted]";

async function fullLogin() {
  await SocialLogin.initialize({
    google: {
      webClientId: '[redacted]',
      iOSClientId: '[redacted]',
      iOSServerClientId: 'The same value as webClientId',
      mode: 'offline' // <-- important
    }
  })
  const response = await SocialLogin.login({
    provider: 'google',
    options: {
      forceRefreshToken: true // <-- important
    }
  })

  if (response.provider === 'google') {
    const result = response.result as GoogleLoginOfflineResponse
    const res = await fetch(`${baseURL}/auth/google_offline`, {
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        serverAuthCode: result.serverAuthCode,
        platform: Capacitor.getPlatform()
      }),
      method: "POST"
    })

    if (res.status !== 200) {
      popoutStore.popout("Full google login failed", "check console");
      return
    }

    const { jwt } = await res.json();
    const userinfo = await fetch(`${baseURL}/auth/get_google_user`, {
      headers: {
        Authorization: `Bearer ${jwt}`
      }
    })
    if (userinfo.status !== 200) {
      popoutStore.popout("Full google (userinfo) login failed", "check console");
      return
    }
    popoutStore.popout("userinfo res", await userinfo.text());
  }
}

여기서 빠진 부분을 확인하세요. 없는 것은 SocialLogin.refresh() 앱 내 호출입니다. 이는 의도된 동작입니다. Google 오프라인 모드에서 refresh는 백엔드가 다음을 교환하고 serverAuthCode refresh token을 안전하게 저장한 뒤 발생합니다.

Google Login Setup부터 계속 진행하세요

사용 중인 경우 Google Login 설정 인증 및 계정 흐름을 계획하려면, 이를 다음 항목과 연결하세요 @capgo/capacitor-social-login 사용하기 @capgo/capacitor-social-login의 네이티브 기능 활용 시, @capgo/capacitor-social-login @capgo/capacitor-social-login의 구현 세부 사항, @capgo/capacitor-passkey @capgo/capacitor-passkey의 구현 세부 사항, @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric의 구현 세부 사항, 그리고 2단계 인증 2단계 인증의 구현 세부 사항.