Google 로그인 설정

소개

이 안내서에서 Google 로그인을 Capgo Social Login과 함께 설정하는 방법을 배웁니다. Google 로그인을 설정하려면 다음이 필요합니다:

• 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. 동의 화면을 설정하세요.

      주의

      나는 앱을 일반적으로 개발하는 것으로 가정하겠습니다. 따라서 나는 사용자 유형을 사용할 것입니다. 가장 적합한 사용자 유형을 선택하세요. 그리고 클릭하세요. external 클릭하세요. create

      외부 및 내부 옵션을 포함한 OAuth 동의 화면 사용자 유형 선택 create

      
5. __CAPGO_KEEP_0__

   1. __CAPGO_KEEP_0__ App Information

      
      • __CAPGO_KEEP_0__ App Name

        __CAPGO_KEEP_0__

        __CAPGO_KEEP_0__

      • __CAPGO_KEEP_0__ user support email

        __CAPGO_KEEP_0__

        __CAPGO_KEEP_0__ 지원자에 대한 정보를 입력하세요

      2. 당신 CAN 앱 로고를 추가하세요.

         

         주의

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

      3. 당신 SHOULD 설정해야 할 App domain

         

         주의 사항

         이것은 단순한 데모이기 때문에 이 기능을 사용하지 않습니다. 하지만 이 섹션을 채우기를 강력히 권장합니다. NOT 개발자의 이메일을 제공해야 합니다.

      4. 개발자 연락처 정보 섹션에 이메일 필드를 입력하세요. 저장하고 계속하기 권한 범위 구성

         

      5. You save and continue

         
6. HAVE TO

   1. 이메일을 입력하세요. add or remove scopes

      

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

      

   3. 클릭 save and continue

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

   주의

   강력히 추천합니다. 인증을 위해 앱을 제출하세요. 이 튜토리얼의 범위 밖입니다. 더 알아보세요 여기.

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

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

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

주의

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

주의

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

주의

SocialLogin.refresh({ provider: 'google' }) 는 이 와 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. 앱이 백엔드에서 구글 API를 호출하지만, 사용자가 앱을 사용하는 중일 때만

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

4. 앱이 사용자의 캘린더를 주기적으로 확인하지만, 사용자가 앱을 사용하지 않을 때도

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

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

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

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

• 타입스크립트

• 호노

• javascript의 fetch API

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

보시다 보니:

이dea는 매우 단순합니다. 사용자에게 간단한 요청을 보내고, 이 요청이 성공적으로 완료되면 토큰의 유효성을 검사하고, 유효한 토큰이면 사용자의 이메일 주소와 사용자 토큰에 대한 추가 정보를 제공합니다. GET Google OAuth Playground에서 토큰 정보 응답과 사용자 세부 정보를 보여주고 있습니다. https://www.googleapis.com/oauth2/v3/tokeninfo 그리고 그곳에서 사용자에게 JWT를 발급하거나 세션 쿠키를 발급할 수 있습니다. 최종 인증 구현의 가능성은 끝이 없습니다.

Google의 OAuth 2.0 Playground에서 사용할 수 있는 API를 쉽게 확인할 수 있습니다.

If you do want to call Google API’s, I would strongly recommend looking at 사용자에게 토큰을 발급하고 사용자에게 토큰을 발급하는 것을 제외한 모든 것을 처리할 수 있습니다.사용자에게 토큰을 발급하고 사용자에게 토큰을 발급하는 것을 제외한 모든 것을 처리할 수 있습니다.

사용자에게 토큰을 발급하고 사용자에게 토큰을 발급하는 것을 제외한 모든 것을 처리할 수 있습니다.

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

• HTTP 서버

이 예제에서 오프라인 접근을 제공하기 위해 사용하는 기술은 다음과 같습니다:

• Hono

• Hono Zod validator

• Zod

• Hono JWT

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

이 예제의 code는 여기서 찾을 수 있습니다 here

클라이언트 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 오프라인 모드에서 refresh가 백엔드가 refresh 토큰을 안전하게 저장한 후에 발생하기 때문입니다. SocialLogin.refresh() Google 로그인 설정에서 계속 serverAuthCode 제목: Google 로그인 설정에서 계속

Google 로그인 설정을 사용하여 인증 및 계정 흐름을 계획하고 있다면

@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login을 사용하여 native capability인 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login을 사용하여 __CAPGO_KEEP_0__ Using @capgo/capacitor-social-login for the native capability in Using @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, 그리고 두 단계 인증 구현 세부 사항에 대한 두 단계 인증