Google Auth 마이그레이션을 capgo/social-login으로

개요

에서 @codetrix-studio/capacitor-google-auth 으로의 마이그레이션을 위한 전반적인 단계를 제공합니다. 이로써 전환 과정이 smoother하고 인증 경험도 향상됩니다. 새로운 플러그인은 여러 가지 소셜 인증 제공자를 단일하고 일관된 __CAPGO_KEEP_0__ 아래로 통합합니다. @capgo/capacitor-social-login, ensuring a smooth transition and improved authentication experience. The new plugin unifies multiple social authentication providers under a single, consistent API.

설치

1. __CAPGO_KEEP_0__ 제거:

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

2. __CAPGO_KEEP_0__ 설치:

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

__CAPGO_KEEP_3__

__CAPGO_KEEP_5__ 필요성

__CAPGO_KEEP_6____CAPGO_KEEP_7__: Capgo 플러그인은 모든 플랫폼에서 Web Client ID를 사용해야 합니다.

다음과 같은 작업이 필요합니다:

1. Google Cloud Console에서 Web Client ID를 만듭니다. 만약 없다면 (인증서버를 얻는 방법)
2. __CAPGO_KEEP_0__ 변경 사항 webClientId 모든 플랫폼에 대해 이 Web Client ID를 사용합니다.
3. Android의 경우, SHA1과 함께 Android Client ID를 만드는 것이 필요합니다. 그러나 이 토큰은 사용되지 않습니다 (Android 설정 가이드)

Code 변경 사항

__CAPGO_KEEP_0__ 변경 사항

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() 로그인 방법이 명시적인 제공자 지정으로 변환됩니다. 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. iOS 설정 가이드AppDelegate.swift ()

2. 업데이트 하세요. iOS 구성 설정 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" />

인증 응답은 제공자 정보, 액세스 토큰, 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;
    };
  };
}

The response structure includes:__CAPGO_KEEP_1__

• 제공자: 인증 제공자 식별'google')
• __CAPGO_KEEP_0__: 만료 일자와 함께 액세스 토큰 세부 정보
• : 인증을 위한 ID 토큰: 이메일, 이름 및 이미지 URL 포함한 사용자 프로필 정보
• 추가 기능추가 기능

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

추가 기능

• 새로운 패키지는 Google 이외의 여러 가지 소셜 인증 제공자를 지원합니다:
• Facebook Login

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

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

Check the main documentation 이 추가 제공자에 대한 자세한 설정 지침을 위해.

Google Auth 마이그레이션에서 계속하기 @capgo/social-login

제목이있는 섹션 “Google Auth 마이그레이션에서 계속하기 @__CAPGO_KEEP_0__/social-login”입니다.이 경우에 사용하고 있습니다. Google Auth Migration to @capgo/social-login 인증 및 계정 흐름을 계획하고 연결하세요. Using @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 Two-factor authentication 두 단계 인증