Google 로그인 설정

소개

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

• Google 계정

일반 설정

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

이러한 단계를 따라주세요.

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

1. 이 부분에서 Google이 표시하는 로그인 화면을 설정하겠습니다. __CAPGO_KEEP_0__
2. 프로젝트 선택기 클릭
3. 프로젝트가 이미 없다면, 새로운 프로젝트 만들기.
   1. 클릭 New project
   2. 프로젝트 이름을 입력하고 클릭 Create
   3. 올바른 프로젝트가 선택되었는지 확인
4. 설정 시작 OAuth consent screen

   1. __CAPGO_KEEP_0__을 클릭하세요.

      

   2. __CAPGO_KEEP_1__을 입력하세요. OAuth consent screen __CAPGO_KEEP_2__을 클릭하세요.

      

   3. 동의 화면 구성

      주의

      공개용 앱을 개발하고 있다고 가정하겠습니다. 따라서 __CAPGO_KEEP_0__ 유형을 사용하겠습니다. __CAPGO_KEEP_1__ 유형을 선택하세요. 그리고 __CAPGO_KEEP_2__을 클릭하세요. external __CAPGO_KEEP_2__을 클릭하세요. create

      OAuth 동의 화면 유형 선택 창에 External 및 Internal 옵션을 보여줍니다. create

      
5. 앱 정보를 입력하세요

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

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

        주의

        사용자에게 표시될 내용입니다

      • 사용자 지원 이메일을 입력하세요 user support email

        참고

        사용자 지원 이메일에 대한 자세한 내용은 여기를 클릭하세요 __CAPGO_KEEP_0__

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

         

         주의

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

      3. 당신은 SHOULD 인증된 도메인 필드가 있는 앱 도메인 구성 섹션을 구성해야 합니다. App domain

         

         주의

         이것은 단순한 데모로, 실제로 게시되지 않을 것입니다. 그러나 이 섹션을 채우기를 강력히 권장합니다. NOT 개발자의 이메일을 제공해야 합니다.

      4. 개발자 연락처 정보 섹션에 이메일 필드 아래 폼의 "저장하고 계속" 버튼을 클릭하세요. 권한 범위 구성

         

      5. You HAVE TO provide the developer’s email save and continue

         
6. Click on Save and Continue button at bottom of form

   1. Configure the scopes add or remove scopes

      

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

      

   3. 클릭 save and continue

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

   주의

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

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

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

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

주의

오프라인 모드 __CAPGO_KEEP_0__의 백엔드가 Google의 API에 접근할 수 있으므로 사용자가 앱을 사용하지 않을 때도 (즉, 사용자가 앱의 관점에서 "오프라인"일 때) 사용자와의 대화가 가능합니다. 장기 유지 액세스 토큰은 이 기능을 가능하게 하며 사용자가 백엔드가 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.

액세스하고

1. 리프레시 토큰을

   그리고

2. 백엔드에서

   리프레시하는 것을 위해 __CAPGO_KEEP_0__을 교환해야 합니다.

3. 앱이 백엔드에서 구글 API를 호출할 것입니다. 그러나 사용자가 앱을 적극적으로 사용할 때만.

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

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

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

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

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

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

• 타입스크립트

• 호노

• 자바스크립트의 fetch API

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

보시다 보니:

아이디어는 매우 간단합니다. 단순한 요청을 보내고, 이 요청은 토큰이 유효한지 여부를 반환하고, 유효한 경우 사용자의 이메일과 사용자 토큰에 대한 기타 정보를 제공합니다. 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 자체 백엔드와 함께 오프라인 접근을 사용합니다.__CAPGO_KEEP_0__

__CAPGO_KEEP_1__

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

• 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 오프라인 모드에서 refresh가 백엔드가 리프레시 토큰을 안전하게 저장한 후에 발생하기 때문입니다. SocialLogin.refresh() 페이지 편집 serverAuthCode 이전