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:

• __CAPGO_KEEP_0__

일반 설정

주의

이 단계는 사용할 플랫폼에 관계없이 필수입니다.

이 부분에서, 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. 당신 SHOULD 설정해야 할 App domain

         

         주의사항

         나는 이것이 단순한 데모이며, 이는 공개되지 않을 것이기 때문에 그렇게 할 것입니다. 그러나 나는 이 섹션을 완료하는 것을 강력히 추천합니다. NOT 이것을 하지 않습니다.

      4. 당신 필수 개발자의 이메일을 제공해야 합니다.

         

      5. 클릭하여 save and continue

         
6. 스코프를 구성하세요.

   1. 클릭하여 add or remove scopes

      

   2. 다음 스코프를 선택하고 클릭하세요. update

      

   3. 클릭하여 save and continue

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

   주의

   제가 강력히 추천하는 것은 앱을 인증하기 위해 제출하는 것입니다. 이 튜토리얼의 범위 밖입니다. 더 많은 것을 배울 수 있습니다 여기. 이는 로컬 테스트에는 필요하지 않지만, 프로덕션에는 필요합니다.

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

Google 로그인과 Capacitor을 사용하는 여러 가지 방법이 있습니다. 두 가지의 차이점을 요약한 표가 있습니다.

	온라인 접근	오프라인 접근
백엔드가 필요합니다	❌	✅
장기적인 접근 토큰	❌	✅
쉬운 설정	✅	❌

주의사항

오프라인 모드 오프라인 모드란, 사용자가 앱을 사용하지 않는 상태에서도 사용자의 백엔드가 Google API에 접근할 수 있는 것을 의미합니다. (즉, 사용자가 앱의 관점에서 '오프라인' 상태일 때). 장기적인 접근 토큰은 이 기능을 가능하게 하며, 사용자의 백엔드가 사용자의 behalf로 Google API를 호출할 수 있도록 합니다.

주의

오프라인 모드는 백엔드 서버가 필요합니다. When using offline mode, the frontend receives minimal information (primarily just a server auth code). Without a backend to exchange this code for tokens and user information, offline mode provides no useful data to your frontend application.

주의

SocialLogin.refresh({ provider: 'google' }) 한다 하지 않는다 작동하지 않는다 google.mode: 'offline'. 오프라인 모드에서 플러그인은 serverAuthCode, 그리고 백엔드에서는 그 code을 접근 및 갱신 토큰으로 교환하고, 백엔드에서 토큰을 갱신해야 합니다.

아직도 어떤 것을 선택해야 할지 모르는 경우, 다음 시나리오를 고려해 보세요:

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

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

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

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

3. 앱이 백엔드에서 Google API를 호출하지만 사용자가 앱을 사용하고 있는 경우에만 호출하는 경우

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

4. 앱이 사용자가 앱을 사용하지 않는 경우에도 사용자의 캘린더를 주기적으로 확인하는 경우

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

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

이 튜토리얼의 이 부분에서, 나는 사용자의 인증을 백엔드에서 검증하는 방법을 보여줄 것이다.

이 예시는 매우 단순하고, 다음과 같은 기술을 기반으로 할 것이다:

• 타입스크립트

• 호노

• 자바스크립트의 fetch API

이 예시의 code를 찾을 수 있다 여기

보시다시피:

아이디어는 매우 단순하다. 단순한 __CAPGO_KEEP_2__를 GET __CAPGO_KEEP_2__는 https://www.googleapis.com/oauth2/v3/tokeninfo 그것은 유효한 토큰인지 여부를 반환하고, 유효한 경우 사용자의 이메일을 반환하며, 사용자의 토큰에 대한 추가 정보도 제공합니다.

그리고 사용자에게 자체 JWT를 발급하거나 세션 쿠키를 발급하는 등의 인증 구현을 끝내는 데 여러 가지 방법이 있습니다.

Google API의 경우 Google API를 호출하고 싶다면, 강력히 추천하는 대안으로는 구글 OAuth 2.0 Playground. 그곳에서 쉽게 어떤 API를 호출할 수 있는지 확인할 수 있습니다.

사용자에게 오프라인 접근 권한을 제공하는 방법

HTTP 서버

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

Hono

• Hono

• Google Social Login 플러그인

• 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());
  }
}

Google 로그인 플러그인은 Google 계정으로 로그인하는 기능을 제공합니다. SocialLogin.refresh() Hono Zod validator serverAuthCode Zod

구글 로그인 설정에서 계속하기

Google Login Setup을 사용 중이라면 구글 로그인 설정 인증 및 계정 흐름을 계획하고 싶다면 @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-passkey Using @capgo/capacitor-passkey Using @capgo/capacitor-native-biometric Using @capgo/capacitor-social-login 구글 로그인 구현 세부 사항에 대한 @capgo/capacitor-native-biometric 두 단계 인증 구글 로그인 구현 세부 사항에 대한 두 단계 인증