Google 로그인 설정

GitHub

__CAPGO_KEEP_4__

__CAPGO_KEEP_11__

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

Google 계정

일반 설정

Google Cloud 콘솔로 이동하세요.

console.cloud.google.com 프로젝트 선택자 클릭
Cloudflare
프로젝트가 없으시면 새로운 프로젝트를 생성하세요.
1. Google Console에서 New project
2. 프로젝트 이름을 입력하고 "만들기" 버튼을 클릭하세요 Create
3. 올바른 프로젝트가 선택되었는지 확인하세요
설정을 시작하세요 OAuth consent screen
1. 검색 바를 클릭하세요
2. __CAPGO_KEEP_0__ 검색하기 OAuth consent screen __CAPGO_KEEP_1__을 클릭하세요
3. 동의 화면 구성
  
  공개용 앱을 개발 중이라고 가정하겠습니다. 따라서 __CAPGO_KEEP_2__ 유형을 사용하겠습니다. __CAPGO_KEEP_2__ 유형 중 가장 적합한 것을 선택하세요. 그리고 클릭하세요. external __CAPGO_KEEP_3__을 클릭하세요 create
  
  외부 및 내부 옵션을 포함하는 OAuth 동의 화면 __CAPGO_KEEP_2__ 유형 create
앱 개발을 시작해 보겠습니다.
1. __CAPGO_KEEP_2__ : __CAPGO_KEEP_2__ 유형은 앱이 누구에게 공개되는지에 따라 결정됩니다. 외부 앱은 누구나 앱을 사용할 수 있습니다. 내부 앱은 특정 조직이나 회사만 앱을 사용할 수 있습니다. App Information
  - __CAPGO_KEEP_0__을 입력하세요. App Name
    사용자에게 표시될 것입니다.
  - __CAPGO_KEEP_1__을 입력하세요. user support email
    지원 이메일에 대한 자세한 내용은 여기서
  1. __CAPGO_KEEP_2__ CAN 앱 로고를 추가하세요.
    
    이 단계는 필수는 아니며, 나는 이 단계를 건너 뛰겠습니다.
  2. 당신 SHOULD 구성해야 하는 App domain
    
    나는 이것이 단순한 데모이기 때문에 그렇게 할 것입니다. NOT 이 섹션을 작성하지 않아도 되지만, 강력히 추천합니다.
  3. You 개발자의 이메일을 반드시 제공해야 합니다. 개발자 연락처 정보 섹션에 이메일 필드를 제공해야 합니다.
  4. 폼 하단의 Save and Continue 버튼을 클릭하세요. save and continue
scopes configuration 화면의 Add or remove scopes 버튼을 클릭하세요.
1. Select the following scopes and click add or remove scopes
2. Select the following scopes and click on the Add or remove scopes button to configure the scopes. update
3. 클릭 save and continue
테스트 사용자 추가
1. 테스트 사용자 섹션의 '사용자 추가' 버튼 클릭 add users
2. 테스트 사용자 이메일 입력란과 '사용자 추가' 버튼 add
3. 테스트 사용자 화면의 '저장 및 계속' 버튼 save and continue
완료 페이지 하단의 '대시보드로 돌아가기' 버튼 back to dashboard
__CAPGO_KEEP_0__ 인증을 위해 앱을 제출하세요.
제가 강력히 추천하는 것은 __CAPGO_KEEP_0__ 인증을 위해 앱을 제출하는 것입니다. 이 튜토리얼의 범위 밖입니다. 더 많은 것을 알아보세요. 여기.이것은 로컬 테스트에 필요하지 않지만, 생산에 필요합니다.

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

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

	온라인 접근	오프라인 접근
백엔드가 필요합니다.	❌	✅
Long-lived access token	❌	✅
Easy setup	✅	❌

이러한 상황을 고려해 보세요:

사용자가 로그인할 때, 사용자에게 커스텀 JWT를 즉시 발급합니다. 앱은 Google API를 호출하지 않습니다.

이 경우 온라인 접근을 선택하세요.
앱이 클라이언트에서 Google API를 호출하지만 백엔드에서 호출하지 않습니다.

이 경우 온라인 접근을 선택하세요.
앱이 백엔드에서 Google API를 호출하지만 사용자가 앱을 사용하는 동안만 호출합니다.

이 경우 온라인 접근을 선택하세요.
사용자의 캘린더를 확인하기 위해 앱은 일정 기간에 걸쳐 사용자가 앱을 사용하지 않아도 자동으로 확인합니다.

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

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

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

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

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

아래와 같이

Code에서 Google 인증을 보여주는 code입니다. 이 인증은 토큰을 검증합니다.

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

Google __CAPGO_KEEP_0__를 호출하고 싶다면, 강력히 추천합니다.

Google의 OAuth 2.0 Playground

If you do want to call Google API’s, I would strongly recommend looking at __CAPGO_KEEP_0__에서 오프라인 접근을 사용하려면 다음이 필요합니다.__CAPGO_KEEP_0__에서 오프라인 접근을 사용하려면 다음이 필요합니다.

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

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

이곳에 누락된 것은 앱 내에 "refresh"가 없다는 것입니다. 그 이유는 Google 오프라인 모드에서, 백엔드가 "refresh token"을 안전하게 저장하기까지 "refresh"가 발생하기 때문입니다. SocialLogin.refresh() Google 로그인 설정에서 계속 serverAuthCode Google 로그인 설정을 사용하여 인증 및 계정 흐름을 계획하고 있는 경우,

Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login @capgo/capacitor-passkey implementation 세부 사항을 위한 @capgo/capacitor-passkey @capgo/capacitor-native-biometric implementation 세부 사항을 위한 @capgo/capacitor-native-biometric, 그리고 두 단계 인증 두 단계 인증의 implementation 세부 사항을 위한