구글 로그인 설정

소개

이 가이드에서 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. 앱 정보를 입력하세요

   1. 앱 정보를 입력하기 시작하세요 App Information

      
      • 앱 이름과 사용자 지원 이메일을 입력하세요 App Name

        주의

        사용자에게 표시됩니다

      • 앱 이름을 입력하세요 user support email

        참고

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

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

         

         주의

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

      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. 인증을 위해 앱을 제출하세요

   주의

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

이것은 로컬 테스트에는 필요하지 않지만, 실제 배포에는 필수입니다.

There are multiple ways to use Google Login with Capacitor. Here is a table that summarizes the differences between the two:

	구글 로그인과 __CAPGO_KEEP_0__을 사용하는 방법은 여러 가지입니다. 두 가지의 차이점을 비교한 표를 아래에示합니다.	오프라인 접근
백엔드가 필요합니다	❌	✅
장기 유지 토큰	❌	✅
쉬운 설정	✅	❌

주의

오프라인 모드 오프라인 모드는 사용자가 앱을 사용하지 않을 때도 백엔드가 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.

__CAPGO_KEEP_0__

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를 확인하세요.

If you do want to call Google API’s, I would strongly recommend looking at 백엔드에서 사용자에게 오프라인 접근을 사용합니다.. From there you can easily see what APIs you can call.

Using offline access with your own backend

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

• HTTP 서버

이 예시에서, 다음 기술을 사용하여 앱에서 오프라인 접근을 제공하겠습니다:

• 호노

• 호노 Zod 검증기

• Zod

• 호노 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() Google 로그인 설정에서 계속하기 serverAuthCode 제목: Google 로그인 설정에서 계속하기

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

@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login을 사용하여 네이티브 기능을 연결합니다. @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login을 사용하여 네이티브 기능을 연결합니다. Copy to clipboard 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, 그리고 두 단계 인증 구현 세부 정보는 두 단계 인증에서 확인할 수 있습니다.