Google @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 인증 설정의 중요한 변경 사항

웹 클라이언트 ID 요구 사항

중요한 변경: 업데이트된 플러그인을 사용하려면 모든 플랫폼에서 웹 클라이언트 ID를 사용해야 합니다.

다음을 수행해야 합니다.

1. 웹 클라이언트 ID가 없는 경우 Google Cloud Console에서 웹 클라이언트 ID를 만듭니다. (자격 증명을 얻는 방법)
2. 모든 플랫폼에 대해 webClientId 필드에 이 웹 클라이언트 ID를 사용하십시오.
3. Android의 경우 SHA1을 사용하여 Android 클라이언트 ID를 생성해야 하지만 이는 확인 목적으로만 사용됩니다. 토큰은 사용되지 않습니다. (Android 설정 가이드)

코드 변경

변경사항 가져오기

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

초기화

설정은 간단한 GoogleAuth.initialize() 호출에서 중첩된 Google 구성을 포함하는 보다 구조화된 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()에서 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 로그인 메타 태그를 사용하고 있는 경우 index.html에서 제거합니다.

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

응답 유형 변경

이제 인증 응답은 공급자 정보, 액세스 토큰, ID 토큰 및 사용자 프로필 데이터가 포함된 구조화된 객체를 제공합니다.

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

응답 구조에는 다음이 포함됩니다.

• 공급자: 인증 공급자('google')를 식별합니다.
• result.accessToken: 만료가 포함된 액세스 토큰 세부정보
• result.idToken: 인증을 위한 ID 토큰
• result.profile: 이메일, 이름, 이미지 URL을 포함한 사용자 프로필 정보

추가 기능

새 패키지는 Google 이외의 여러 소셜 인증 공급자를 지원합니다.

• Apple 로그인
• Facebook 로그인

이 통합 접근 방식은 다음을 제공합니다.

• 모든 제공업체에서 일관된 API
• 향상된 TypeScript 지원
• 더 나은 오류 처리
• 적극적인 유지 관리 및 커뮤니티 지원

이러한 추가 공급자에 대한 자세한 설정 지침은 기본 문서를 확인하세요.