Google 로그인 설정

소개

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

• Google 계정

일반 설정

Note

이 단계는 사용하기로 결정한 플랫폼에 관계없이 필요합니다.

이 부분에서는 Google에 의해 표시되는 로그인 화면을 설정합니다.

1. console.cloud.google.com으로 이동하세요.
2. 프로젝트 선택기를 클릭하세요
3. 아직 프로젝트가 없다면 새 프로젝트를 생성해 주세요.
   1. ‘새 프로젝트’를 클릭하세요.
   2. 프로젝트 이름을 지정하고 Create을(를) 클릭하세요.
   3. 올바른 프로젝트를 진행하고 있는지 확인하세요
4. OAuth consent screen 구성을 시작합니다.

   1. 검색창을 클릭하세요

      

   2. OAuth consent screen을 검색하여 클릭하세요.

      

   3. 동의 화면 구성 :::참고 대중에게 공개되는 앱을 개발한다고 가정하여 external 사용자 유형을 사용하겠습니다. 귀하에게 가장 적합한 사용자 유형을 선택하고 create를 클릭하세요. :::

      create을 클릭하세요.

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

   1. ‘앱 정보’부터 시작해 보겠습니다.

      
      • ‘앱 이름’을 입력하세요. :::주의 이 내용은 사용자에게 표시됩니다 :::
      • ‘사용자 지원 이메일’을 입력하세요. :::참고 지원 이메일에 대한 자세한 내용은 여기에서 확인하세요. :::

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

         

         :::참고 이는 필수 사항이 아니므로 이 단계를 건너뛰겠습니다. :::

      3. 앱 도메인을 구성해야 합니다**

         

         :::참고 이것은 게시되지 않을 간단한 데모이기 때문에 그렇게 하지 않겠습니다. 하지만 이 섹션을 작성하는 것이 좋습니다. :::

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

         

      5. ‘저장하고 계속하기’를 클릭하세요.

         
6. 범위 구성

   1. ‘범위 추가 또는 제거’를 클릭하세요.

      

   2. 다음 범위를 선택하고 update을 클릭합니다.

      

   3. ‘저장하고 계속하기’를 클릭하세요.

      
7. 테스트 사용자 추가
   1. ‘사용자 추가’를 클릭하세요.
   2. Google 이메일을 입력하고 Enter를 클릭한 후 add를 클릭하세요.
   3. ‘저장하고 계속하기’를 클릭하세요.
8. ‘대시보드로 돌아가기’를 클릭하세요.
9. 확인을 위해 앱을 제출하세요. :::참고 확인을 위해 앱을 제출하는 것이 좋습니다. 이는 이 튜토리얼의 범위를 벗어납니다. 자세한 내용은 여기에서 확인하세요. 이는 로컬 테스트에는 필요하지 않지만 프로덕션에는 필요합니다. :::

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

Google을(를) 사용하는 방법에는 여러 가지가 있습니다. Capacitor로 로그인하세요. 다음은 둘 사이의 차이점을 요약한 표입니다.

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

Note

오프라인 모드는 사용자가 앱을 적극적으로 사용하지 않는 경우에도(즉, 사용자가 앱의 관점에서 ‘오프라인’인 경우) 백엔드가 Google의 API에 액세스할 수 있음을 의미합니다. 수명이 긴 액세스 토큰을 사용하면 백엔드가 언제든지 사용자를 대신하여 Google API를 호출할 수 있도록 하여 이 기능을 활성화할 수 있습니다.

Caution

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

아직도 어떤 것을 선택해야 할지 모르겠다면 다음 시나리오를 고려해 보세요.

1. 사용자 정의 JWT을 발행한 직후 사용자가 로그인하기를 원합니다. 귀하의 앱은 Google API를 호출하지 않습니다.

   이 경우 온라인 액세스를 선택하십시오.

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

   이 경우 온라인 액세스를 선택하십시오

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

   이 경우 온라인 액세스를 선택하십시오

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

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

온라인 액세스를 위한 백엔드 예시

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

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

• TypeScript

• 호노

• JavaScript Fetch API

이 예제의 코드는 여기에서 찾을 수 있습니다.

보시다시피:

아이디어는 다소 간단합니다. https://www.googleapis.com/oauth2/v3/tokeninfo에 간단한 GET 요청을 보내면 토큰이 유효한지 여부가 반환되고, 유효한 경우 사용자의 이메일이 제공됩니다. 또한 사용자 토큰에 대한 다른 정보도 제공합니다.

거기에서 사용자에게 자신만의 JWT을 발행하거나 일종의 세션 쿠키를 발행할 수 있습니다. 최종 인증 구현의 가능성은 무궁무진합니다.

Google API에 전화하고 싶다면 Google의 OAuth 2.0 플레이그라운드를 살펴보는 것이 좋습니다. 여기에서 어떤 API를 호출할 수 있는지 쉽게 확인할 수 있습니다.

자체 백엔드로 오프라인 액세스 사용

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

• HTTP 서버

이 예에서는 다음 기술을 사용하여 내 앱에 오프라인 액세스를 제공합니다.

• 호노

• Hono Zod 검증인

• 조드

• 호노 JWT

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

이 예시의 코드는 여기에서 확인할 수 있습니다.

클라이언트 코드는 다음과 같습니다.

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