Google 로그인 설정

소개

In this guide, you will learn how to setup Google Login with Capgo Social Login. You will need the following in order to setup 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. OAuth 동의 화면 옵션을 클릭하세요.

      주의

      공개 앱을 개발하고 있다고 가정하겠습니다. 따라서 external 유형을 선택하세요. 그리고 create

      클릭하여 create

      
5. 앱에 대한 정보를 입력하세요.

   1. 앱 정보 섹션을 시작하여 앱 이름과 사용자 지원 이메일 필드를 표시합니다. App Information

      
      • 주의 App Name

        주의

        이 사용자에게 표시됩니다.

      • __CAPGO_KEEP_0__을 입력하세요. user support email

        주의

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

      2. __CAPGO_KEEP_1__ __CAPGO_KEEP_2__ __CAPGO_KEEP_3__

         

         주의

         이 단계는 필수는 아니며, 나는 이 단계를 건너 뛰겠습니다.

      3. 당신 SHOULD 권한 있는 도메인 필드가 있는 App 도메인 구성 섹션을 App domain

         

         주의

         이것은 단순한 데모이며, 이것이 실제로 배포되지 않기 때문에, 나는 이것을 할 것입니다. 하지만, 나는 권한 있는 도메인 필드를 채우기를 강력히 추천합니다. 당신 HAVE TO

      4. 설정해야 합니다. 주의 개발자의 이메일을 제공하세요

         

      5. 클릭하세요 save and continue

         
6. 범위 구성

   1. 클릭하세요 add or remove scopes

      

   2. 이메일 및 프로필 범위를 선택하고 클릭하세요 update

      

   3. 클릭하세요 save and continue

      
7. 테스트 사용자를 추가하세요
   1. Click on add users
   2. Google 이메일을 입력하고 Enter를 클릭한 후 add
   3. Click save and continue
8. Click back to dashboard
9. 인증을 위해 앱을 제출하세요.

   주의

   강력히 추천합니다. 앱을 인증하기 위해 제출하세요. 이 튜토리얼의 범위 외입니다. 더 많은 정보를 알아보세요. 이곳. 이 설정은 로컬 테스트에 필요하지 않지만, 실제 배포 시에는 필수입니다.

온라인 접근과 오프라인 접근의 차이점

Google 로그인과 Capacitor을 사용하는 방법은 여러 가지입니다. 아래 표는 두 가지 방법 간의 차이점을 요약합니다.

	온라인 접근	오프라인 접근
백엔드가 필요합니다	❌	✅
장기적인 접근 토큰	❌	✅
쉽게 설정할 수 있습니다	✅	❌

주의

오프라인 모드 사용자가 앱을 사용하지 않을 때(즉, 사용자가 앱의 관점에서 '오프라인'일 때)에도 사용자의 백엔드가 Google의 API에 접근할 수 있습니다. 장기적인 접근 토큰이 이 기능성을 허용하는 것은 사용자가 언제든지 백엔드가 사용자의 대신 Google API를 호출할 수 있도록 허용하기 때문입니다.

주의

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

주의

SocialLogin.refresh({ provider: 'google' }) does not 작동하지 google.mode: 'offline'않습니다. 오프라인 모드에서 플러그인은 사용자에게 제공하는 정보가 최소화되며, 주로 서버 인증 __CAPGO_KEEP_0__만 제공합니다. 백엔드가 이 __CAPGO_KEEP_1__을 토큰 및 사용자 정보로 교환하지 않으면 오프라인 모드는 프론트엔드 애플리케이션에 유용한 데이터를 제공하지 않습니다. serverAuthCodecode을 백엔드에서 접근 및 갱신 토큰으로 교환하고, 그 토큰을 백엔드에서 갱신해야 합니다.

다음 시나리오를 고려해 보세요:

1. 사용자가 로그인하면 즉시 사용자에게 커스텀 JWT를 발급하고 싶다면, 앱은 Google API를 호출하지 않습니다.

   이 경우 온라인 접근을 선택하세요.

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

   이 경우 온라인 접근을 선택하세요.

3. 사용자가 앱을 사용하지 않을 때도 백엔드에서 Google API를 호출하지만 사용자가 앱을 사용할 때만 호출하는 경우

   이 경우 온라인 접근을 선택하세요.

4. 사용자가 앱을 사용하지 않을 때도 백엔드에서 사용자의 캘린더를 주기적으로 확인하고 싶다면

   이 경우 오프라인 접근을 선택하세요.

온라인 접근을 위한 예제 백엔드

이 튜토리얼의 이 부분에서, 나는 사용자의 인증을 backend에서 어떻게 확인하는지 보여줄 것이다.

이 예제는 매우 단순하고, 다음 기술에 기반할 것이다.

• Typescript

• Hono

• Javascript의 fetch API

이 예제의 code를 여기서 찾을 수 있다. 여기서 보는 것과 같이:

VS __CAPGO_KEEP_0__에서 Google 인증 __CAPGO_KEEP_1__을 보여주고, 토큰을 검증하는 것을 볼 수 있다.

요청을 보내고, GET 이것은 토큰이 유효한지 여부와 사용자의 이메일, 사용자의 토큰에 대한 추가 정보를 반환한다. https://www.googleapis.com/oauth2/v3/tokeninfo 이것은 사용자가 로그인한 후, 사용자가 로그인한 후에 사용할 수 있는 정보를 제공한다.

그곳에서 사용자에게 자체 JWT를 발급하거나 세션 쿠키를 발급하는 등의 다양한 방법이 가능합니다.

만약 Google API를 호출하고 싶다면, 최종 인증 구현을 위해선 강력히 추천하는 것이 있습니다. Google의 OAuth 2.0 Playground그곳에서 쉽게 어떤 API를 호출할 수 있는지 확인할 수 있습니다.

자체 백엔드와 함께 오프라인 접근 사용

오프라인 접근을 사용하려면 다음이 필요합니다.

• HTTP 서버

이 예제에서는 다음 기술을 사용하여 앱 내에서 오프라인 접근을 제공하겠습니다.

• Hono

• Hono Zod validator

• Zod

• Hono JWT

• LowDb (a simple database)

이 예제의 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());
  }
}

주의하십시오. 여기에는 앱에서 호출하는 코드가 없습니다. 그 이유는 Google 오프라인 모드에서는 백엔드가 SocialLogin.refresh() refresh 토큰을 안전하게 저장한 후에 refresh가 발생하기 때문입니다. serverAuthCode Google Login Setup에서 계속 진행해 주세요.

Copy to clipboard

__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login __CAPGO_KEEP_0__/__CAPGO_KEEP_1__를 사용하는 경우 Google Login 설정 Using @capgo/capacitor-social-login capgo/capacitor-social-login capgo/capacitor-social-login capgo/capacitor-social-login 구현 세부 사항 capgo/capacitor-passkey 구현 세부 사항 capgo/capacitor-native-biometric 구현 세부 사항 capgo/capacitor-native-biometric 구현 세부 사항과 함께 사용합니다. capgo/capacitor-passkey 구현 세부 사항과 함께 사용합니다. 두 단계 인증 두 단계 인증 구현 세부 사항에 대한 설명