Google Auth 마이그레이션을 @capgo/social-login으로 진행하세요

개요

이 가이드는 @codetrix-studio/capacitor-google-auth 에서 @capgo/capacitor-social-login로의 마이그레이션을 위한 포괄적인 단계를 제공하여 smooth한 전환과 향상된 인증 경험을 보장합니다. 새로운 플러그인은 여러 개의 소셜 인증 제공자를 단일하고 일관된 API 하에 통합합니다.

설치

1. 기존 패키지를 제거하십시오.

   npm uninstall @codetrix-studio/capacitor-google-auth

2. 새로운 패키지를 설치하십시오.

   npm install @capgo/capacitor-social-login
   npx cap sync

구글 인증 설정의 중요한 변경 사항

웹 클라이언트 ID 요구 사항

Critical Change: The updated plugin requires using a Web Client ID across all platforms.

You’ll need to:

1. Google Cloud Console에서 Web Client ID를 생성해야 합니다. 만약 이미 생성한 경우에는 다음 단계로 진행해 주세요.Web Client ID를 생성하는 방법)
2. Web Client ID를 사용하는 방법 webClientId Android의 경우, SHA1과 함께 Android Client ID를 생성해야 합니다. 하지만 이 토큰은 사용되지 않습니다.
3. Android 설정 방법__CAPGO_KEEP_0__ Changes)

제목: Code Changes

Section titled “__CAPGO_KEEP_0__ Changes”

import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
import { SocialLogin } from '@capgo/capacitor-social-login';

초기화

설정은 단순한 GoogleAuth.initialize() 호출에서 구조화된 SocialLogin.initialize() 구글 구성이 중첩된:

GoogleAuth.initialize({
  clientId: 'CLIENT_ID.apps.googleusercontent.com',
  scopes: ['profile', 'email'],
  grantOfflineAccess: true,
});

await SocialLogin.initialize({
  google: {
    webClientId: 'WEB_CLIENT_ID.apps.googleusercontent.com', // Use Web Client ID for all platforms
    iOSClientId: 'IOS_CLIENT_ID', // for iOS
    mode: 'offline' // replaces grantOfflineAccess
  }
});

로그인

로그인 메서드는 GoogleAuth.signIn() to SocialLogin.login() __CAPGO_KEEP_0__:

const user = await GoogleAuth.signIn();
const res = await SocialLogin.login({
  provider: 'google',
  options: {
    scopes: ['email', 'profile'],
    forceRefreshToken: true // if you need refresh token
  }
});

플랫폼에 따른 변경 사항

안드로이드

1. 업데이트를 하세요 MainActivity.java (안드로이드 전체 설정 가이드):

 import ee.forgr.capacitor.social.login.GoogleProvider;
 import ee.forgr.capacitor.social.login.SocialLoginPlugin;
 import ee.forgr.capacitor.social.login.ModifiedMainActivityForSocialLoginPlugin;
 import com.getcapacitor.PluginHandle;
 import com.getcapacitor.Plugin;
 import android.content.Intent;
 import android.util.Log;

 public class MainActivity extends BridgeActivity {
 public class MainActivity extends BridgeActivity implements ModifiedMainActivityForSocialLoginPlugin {

   @Override
   public void onActivityResult(int requestCode, int resultCode, Intent data) {
     super.onActivityResult(requestCode, resultCode, data);

     if (requestCode >= GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MIN && requestCode < GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MAX) {
       PluginHandle pluginHandle = getBridge().getPlugin("SocialLogin");
       if (pluginHandle == null) {
         Log.i("Google Activity Result", "SocialLogin login handle is null");
         return;
       }
       Plugin plugin = pluginHandle.getInstance();
       if (!(plugin instanceof SocialLoginPlugin)) {
         Log.i("Google Activity Result", "SocialLogin plugin instance is not SocialLoginPlugin");
         return;
       }
       ((SocialLoginPlugin) plugin).handleGoogleLoginIntent(requestCode, data);
     }
   }

   public void IHaveModifiedTheMainActivityForTheUseWithSocialLoginPlugin() {}
}

iOS

1. AppDelegate.swift에서 큰 변경이 필요하지 않습니다 (iOS 설정 가이드)

2. 설정을 업데이트 하세요. capacitor.config.json, 새로운 플러그인에서 사용하지 않습니다:

{
  "plugins": {
   "GoogleAuth": {
     "scopes": ["profile", "email"],
     "serverClientId": "xxxxxx-xxxxxxxxxxxxxxxxxx.apps.googleusercontent.com",
     "forceCodeForRefreshToken": true
   }
}

웹

1. Google Sign-In 메타 태그를 제거하세요. 그 전에 사용하셨다면. index.html 클립보드에 복사

<meta name="google-signin-client_id" content="{your client id here}" />
<meta name="google-signin-scope" content="profile email" />

제목이 '응답 형식 변경'인 섹션

iOS 설정 가이드

interface GoogleLoginResponse {
  provider: 'google';
  result: {
    accessToken: {
      token: string;
      expires: string;
      // ... other token fields
    } | null;
    idToken: string | null;
    profile: {
      email: string | null;
      familyName: string | null;
      givenName: string | null;
      id: string | null;
      name: string | null;
      imageUrl: string | null;
    };
  };
}

응답 구조는 다음과 같습니다.

• provider: 인증 제공자 식별 ('google')
• result.accessToken: 만료 일자와 함께 액세스 토큰 세부 정보
• result.idToken: 인증을 위한 ID 토큰
• result.profile: 이메일, 이름 및 이미지 URL 포함한 사용자 프로필 정보

추가 기능

새로운 패키지는 Google 이외의 여러 가지 소셜 인증 제공자도 지원합니다.

• Apple Sign-In
• Facebook Login

이 통합된 접근 방식은 다음과 같은 이점을 제공합니다.

• 모든 제공자에서 일관적인 API
• TypeScript 지원이 향상되었습니다.
• 오류 처리가 개선되었습니다.
• 활발한 유지 보수 및 커뮤니티 지원

메인 문서를 확인하여 이 추가 제공자에 대한 자세한 설정 지침을 참조하세요. Google Auth Migration에서 계속 진행하세요 @__CAPGO_KEEP_0__/social-login으로.

@capgo/social-login

이미 사용 중인 경우 구글 인증 마이그레이션을 @capgo/social-login으로 사용하여 인증 및 계정 흐름을 계획하고 @__CAPGO_KEEP_0__/social-login과 연결하세요. @capgo/capacitor-social-login을 사용하여 native capability을 @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의 구현 세부 정보 두 단계 인증 __CAPGO_KEEP_0__의 두 단계 인증 구현 세부 사항에 대한 설명입니다.