__CAPGO_KEEP_1__

소개

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 로그인을 설정하는 방법을 배울 것입니다. __CAPGO_KEEP_0__ Social Login을 사용하기 위해 다음이 필요합니다:

Google 계정

주의

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

이 부분에서 Google이 표시하는 로그인 화면을 설정하겠습니다.

1. 다음으로 이동하세요 __CAPGO_KEEP_0__
2. __CAPGO_KEEP_1__
3. __CAPGO_KEEP_3__ __CAPGO_KEEP_4__.
   1. __CAPGO_KEEP_5__ New project
   2. __CAPGO_KEEP_7__ Create
   3. __CAPGO_KEEP_9__
4. __CAPGO_KEEP_11__ OAuth consent screen

   1. __CAPGO_KEEP_0__을 클릭하세요.

      

   2. __CAPGO_KEEP_1__을(를) 입력하세요. OAuth consent screen __CAPGO_KEEP_2__을(를) 클릭하세요.

      

   3. 동의 화면을 구성하세요.

      주의

      공개용 앱을 개발하고 있다고 가정하겠습니다. 따라서 __CAPGO_KEEP_0__ 유형을 사용하겠습니다. __CAPGO_KEEP_0__ 유형을 선택하세요. 그리고 __CAPGO_KEEP_2__을(를) 클릭하세요. external __CAPGO_KEEP_2__을(를) 클릭하세요. create

      외부 및 내부 옵션을 포함하는 OAuth 동의 화면 __CAPGO_KEEP_0__ 유형 선택 화면. create

      
5. 앱 정보를 입력하세요

   1. 먼저 App Information

      
      • 이메일 주소를 입력하세요 App Name

        주의

        사용자에게 표시될 것입니다

      • 입력하세요 user support email

        주의

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

      2. 당신은 CAN 앱 로고를 추가할 수 있습니다.

         

         주의

         이 단계는 필수는 아니며 skip할 수 있습니다.

      3. 당신은 SHOULD 인증된 도메인 필드가 있는 앱 도메인 구성 섹션을 구성해야 합니다. App domain

         

         Note

         I will not do that because this is just a simple demonstration that will NOT get published, but I strongly recommend filling this section.

      4. You HAVE TO provide the developer’s email

         

      5. Configure the scopes save and continue

         
6. Configure the scopes

   1. Click on add or remove scopes

      

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

      

   3. 클릭 save and continue

      
7. 테스트 사용자 추가
   1. 테스트 사용자 섹션의 추가 사용자 버튼 클릭 add users
   2. 테스트 사용자 입력란과 추가 버튼 add
   3. 테스트 사용자 화면의 저장 및 계속 버튼 save and continue
8. Click back to dashboard
9. 제출을 위해 앱을 확인하세요

   주의

   제품을 완성한 후에 앱을 제출하는 것을 강력히 추천합니다. 이 튜토리얼의 범위 밖의 내용입니다. 더 자세히 알아보세요 여기. 앱을 제출하는 것은 로컬 테스트에 필요하지 않지만, 프로덕션에 필요합니다.

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

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

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

주의

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

주의

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

주의

SocialLogin.refresh({ provider: 'google' }) 는 offline 모드에서 와 google.mode: 'offline'백엔드가 serverAuthCode, and your backend must exchange that code for access and refresh tokens, then refresh those tokens on the backend.

액세스하고

1. 리프레시 토큰을

   백엔드에서

2. 리프레시하는

   방법을

3. __CAPGO_KEEP_0__

   __CAPGO_KEEP_0__

4. __CAPGO_KEEP_0__

   __CAPGO_KEEP_0__

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

이 부분의 튜토리얼에서, 사용자의 백엔드에서 인증을 확인하는 방법을 보여드리겠습니다.

이 예시는 매우 단순하고, 다음 기술을 기반으로 하겠습니다:

• 타입스크립트

• 호노

• 자바스크립트의 fetch API

이 예시의 code를 찾을 수 있습니다. __CAPGO_KEEP_0__

__CAPGO_KEEP_1__

__CAPGO_KEEP_0__ GET __CAPGO_KEEP_0__ https://www.googleapis.com/oauth2/v3/tokeninfo __CAPGO_KEEP_0__

__CAPGO_KEEP_0__

API __CAPGO_KEEP_0____CAPGO_KEEP_0__

__CAPGO_KEEP_0__

offline 액세스를 사용하려면 다음이 필요합니다.

• HTTP 서버

이 예제에서 offline 액세스를 제공하기 위해 사용하는 기술은 다음과 같습니다.

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

__CAPGO_KEEP_0__에서 호출되지 않는다는 것을 주목하십시오: 앱에서 호출되지 않는다는 것입니다. 그 이유는 Google 오프라인 모드에서, 백엔드가 SocialLogin.refresh() refresh token을 안전하게 저장하기 때문입니다. serverAuthCode Google 로그인 설정에서 계속하기

__CAPGO_KEEP_0__에서 __CAPGO_KEEP_1__-social-login을 사용하는 경우

__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login을 사용하여 네이티브 기능을 연결합니다. __CAPGO_KEEP_0__는 __CAPGO_KEEP_1__-social-login을 사용하는 네이티브 기능입니다. __CAPGO_KEEP_0__는 __CAPGO_KEEP_1__-social-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, 두 단계 인증 구현 세부 사항에 대한 두 단계 인증