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. 귀하 CAN 앱 로고를 추가할 수 있습니다.

         

         참고

         이것은 필수 사항이 아니므로 이 단계를 건너뛰겠습니다

      3. 귀하 SHOULD 을(를) 구성해야 합니다 App domain

         

         참고

         이것은 단순히 공개되지 않을 데모이므로 NOT 이 섹션을 채우는 것을 강력히 권장합니다.

      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에 접근할 수 있음을 의미합니다. 장기 유효 액세스 토큰을 사용하면 백엔드가 언제든지 사용자를 대신해 Google API를 호출할 수 있어 이 기능이 가능합니다.

주의

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

주의

SocialLogin.refresh({ provider: 'google' }) 실제로 하지 마세요 와 함께 작동합니다 google.mode: 'offline'. 오프라인 모드에서는 플러그인이 사용자에게 다음 항목만 제공합니다 serverAuthCode, 그리고 백엔드에서 해당 code를 access token과 refresh token으로 교환한 뒤, 백엔드에서 해당 토큰을 갱신해야 합니다.

어떤 옵션을 선택해야 할지 아직 결정하지 못했다면, 다음 시나리오를 고려해 보세요:

1. 사용자가 로그인한 직후 커스텀 JWT를 발급할 계획입니다. 앱은 Google API를 호출하지 않습니다

   이 경우, 온라인 액세스를 선택하세요.

2. 앱은 클라이언트에서 일부 Google API를 호출하지만, 백엔드에서는 절대 호출하지 않습니다

   이 경우, 온라인 액세스를 선택하세요

3. 앱은 백엔드에서 일부 Google API를 호출하지만, 사용자가 앱을 적극적으로 사용하는 동안에만 호출합니다

   이 경우, 온라인 액세스를 선택하세요

4. 앱은 사용자가 앱을 적극적으로 사용하지 않을 때도 주기적으로 사용자의 캘린더를 확인합니다

   이 경우, 오프라인 액세스를 선택하세요

온라인 액세스용 백엔드 예시

이 튜토리얼에서는 백엔드에서 사용자를 검증하는 방법을 보여드립니다.

이 예시는 매우 간단하며, 다음 기술 기반으로 구성됩니다:

• 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 검증기

• 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 오프라인 모드에서는 백엔드에서 교환하고 serverAuthCode refresh token을 안전하게 저장한 후 새로고침이 이루어집니다.

Google Login 설정에서 계속하기

사용 중이라면 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단계 인증의 구현 세부 사항에 대해서는