Google 로그인 설정

소개

Capgo Social Login을 위한 Google Login 설정 방법을 배울 것입니다. Google Login을 설정하려면 다음이 필요합니다:

• Google 계정

일반 설정

__CAPGO_KEEP_0__

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

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

1. 아래의 링크를 클릭하세요. console.cloud.google.com
2. Google Console에서 프로젝트 선택자 클릭
3. 프로젝트가 이미 없으시다면, 새로운 프로젝트를 생성하세요. 새로운 프로젝트를 생성하세요..
   1. Google Console에서 New project
   2. 프로젝트 이름을 입력하고 Create
   3. __CAPGO_KEEP_0__
4. __CAPGO_KEEP_2__ OAuth consent screen

   1. __CAPGO_KEEP_3__

      

   2. __CAPGO_KEEP_5__ OAuth consent screen __CAPGO_KEEP_6__

      

   3. __CAPGO_KEEP_8__

      __CAPGO_KEEP_10__

      __CAPGO_KEEP_11__ external __CAPGO_KEEP_0__ 유형을 선택하세요. 가장 적합한 유형을 선택하고 클릭하세요. create

      __CAPGO_KEEP_0__을 클릭하세요. create

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

   1. 앱 정보 섹션에서 시작하세요. 앱 이름과 사용자 지원 이메일 필드가 표시됩니다. App Information

      
      • 주의 App Name

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

        __CAPGO_KEEP_0__을 입력하세요.

      • 참고사항입니다. user support email

        주의

        __CAPGO_KEEP_0__ 여기

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

         

         주의

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

      3. 당신 해야 설정하기 App domain

         

         주의

         이것은 단순한 데모이기 때문에, 이걸 하지는 않지만, 이 섹션을 채우기를 강력히 추천합니다. 당신 해야만

      4. 개발자의 이메일을 개발자 연락처 정보 섹션의 이메일 필드 클릭

         

      5. __CAPGO_KEEP_0__ save and continue

         
6. scopes를 설정하세요

   1. 클릭하세요 add or remove scopes

      

   2. 이 scopes를 선택하고 클릭하세요 update

      

   3. 클릭하세요 save and continue

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

   주의

   이 튜토리얼의 범위 밖이지만 강력히 추천합니다. 더 알아보려면 여기이것은 로컬 테스트에는 필요하지 않지만 프로덕션에는 필수입니다.

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

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

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

주의

오프라인 모드 백엔드가 사용자가 앱을 사용하지 않고도 Google API에 접근할 수 있도록 함으로써 사용자가 앱을 사용하지 않을 때도 백엔드가 사용자의 behalf로 Google API를 호출할 수 있도록 장기 유지 액세스 토큰을 사용합니다.

주의

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

주의

SocialLogin.refresh({ provider: 'google' }) offline 모드 는 백엔드와 google.mode: 'offline'. 백엔드가 __CAPGO_KEEP_0__을 액세스 토큰과 갱신 토큰으로 교환하고, 그 토큰을 백엔드에서 갱신해야 합니다. serverAuthCode, and your backend must exchange that code for access and refresh tokens, then refresh those tokens on the backend.

, 백엔드가 액세스 토큰과 갱신 토큰을 교환하고, 그 토큰을 백엔드에서 갱신해야 합니다.

1. offline 모드가 어떤 상황에 사용해야 하는지 알려주려면, 다음 시나리오를 고려해 보세요:

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

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

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

3. 클라이언트에서 사용자가 앱을 사용하고 있는 동안만 백엔드에서 일부 Google API를 호출합니다.

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

4. 사용자가 앱을 사용하지 않는 동안에도 사용자의 캘린더를 정기적으로 확인하는 앱이 있습니다.

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

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

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

이 예제는 매우 간단하고 다음 기술을 기반으로 하겠습니다.

• 타입스크립트

• Hono

• Javascript의 fetch API

이 예제의 code를 찾을 수 있습니다 여기

보시다시피:

이dea는 매우 간단합니다. 단순한 요청을 보내고, 이 요청은 토큰이 유효한지 여부와, 유효한 경우 사용자의 이메일과 사용자 토큰에 대한 기타 정보를 반환합니다. GET Google OAuth Playground에서 사용자 세부 정보가 포함된 토큰 정보 응답을 보여주고 있습니다 https://www.googleapis.com/oauth2/v3/tokeninfo 그리고 그곳에서 사용자에게 자체 JWT를 발급하거나 세션 쿠키를 발급할 수 있습니다. 최종 인증 구현의 가능성은 끝이 없습니다.

__CAPGO_KEEP_1__

API Google의 OAuth 2.0 플레이그라운드. 그곳에서 쉽게 호출할 수 있는 API를 볼 수 있습니다.

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

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

• HTTP 서버

이 예시에서, 오프라인 접근을 제공하기 위해 다음 기술을 사용할 것입니다.

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

주의하십시오. 여기에는 앱에서 호출하는 코드가 없습니다. 그 이유는 Google 오프라인 모드에서 리프레시가 백엔드에서 리프레시 토큰을 안전하게 저장한 후에 발생하기 때문입니다. SocialLogin.refresh() 페이지 편집 serverAuthCode 이전