Google Auth를 @capgo/social-login로 마이그레이션

개요

이 가이드는 다음 단계에 따른 마이그레이션 방법을 상세히 안내합니다. @codetrix-studio/capacitor-google-auth 로 @capgo/capacitor-social-login이를 통해 원활한 전환과 개선된 인증 경험을 보장할 수 있습니다. 새 플러그인은 여러 소셜 인증 제공업체를 하나의 일관된 API로 통합합니다.

설치

1. 기존 패키지 삭제:

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

2. 새 패키지 설치:

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

Google Auth 설정의 주요 변경 사항

Web Client ID 요구 사항

중요 변경 사항: 업데이트된 플러그인에서는 모든 플랫폼에서 Web Client ID를 사용해야 합니다.

다음 작업을 수행해야 합니다:

1. Web Client ID가 없다면 Google Cloud Console에서 생성하세요 (credentials 가져오는 방법)
2. 이 Web Client ID를 다음 위치에 사용하세요: webClientId 모든 플랫폼 공통 필드
3. Android의 경우 SHA1을 사용하여 Android Client ID를 생성해야 하지만, 이는 검증용일 뿐 실제 토큰 사용에는 영향을 주지 않습니다(Android 설정 가이드)

Code 변경 사항

변경 사항 가져오기

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

초기화

설정 방식이 단순한 GoogleAuth.initialize() 호출 방식에서 더 구조화된 방식으로 변경됩니다 SocialLogin.initialize() Google 설정이 중첩된 경우:

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() 로 SocialLogin.login() 프로바이더를 명시적으로 지정한 경우:

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

플랫폼별 변경 사항

Android

1. 다음 항목을 업데이트하세요: MainActivity.java (Android 전체 설정 가이드):

 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 meta 태그를 제거하세요: index.html 기존에 사용 중이었다면:

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

Response Type 변경 사항

이제 인증 응답은 제공자 정보, access token, ID token 및 사용자 프로필 데이터를 포함하는 구조화된 객체를 반환합니다:

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: 만료 정보가 포함된 access token 상세 정보
• result.idToken: 인증용 ID token
• result.profile: 이메일, 이름, 이미지 URL을 포함한 사용자 프로필 정보

추가 기능

새 패키지는 Google 외에도 다양한 소셜 인증 제공업체를 지원합니다:

• Apple로 로그인
• Facebook 로그인

이 통합 방식의 장점은 다음과 같습니다:

• 모든 제공업체에서 일관된 API 제공
• 개선된 TypeScript 지원
• 더 나은 에러 핸들링
• 활발한 유지보수 및 커뮤니티 지원

해당 행을 확인하세요. 메인 문서 추가 프로바이더의 상세 설정 방법은 문서를 참조하세요.

Google Auth Migration에서 @capgo/social-login로 이동

사용 중인 경우 Google Auth를 @capgo/social-login로 마이그레이션 인증 및 계정 흐름을 계획하려면, 이를 다음 항목과 연결하세요 @capgo/capacitor-social-login 사용하기 @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의 구현 세부 사항, 그리고 2단계 인증 2단계 인증의 구현 세부 사항.