Migrasi Google Auth ke @capgo/social-login

Ikhtisar

Panduan ini memberikan langkah-langkah lengkap untuk migrasi dari @codetrix-studio/capacitor-google-auth ke @capgo/capacitor-social-login, sehingga transisi berjalan lancar dan pengalaman autentikasi lebih baik. Plugin baru ini menyatukan beberapa penyedia autentikasi sosial ke dalam satu API yang konsisten.

Instalasi

1. Hapus package lama:

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

2. Install package baru:

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

Perubahan Penting dalam Setup Google Auth

Persyaratan Web Client ID

Perubahan Kritis: Plugin terbaru mewajibkan penggunaan Web Client ID di semua platform.

Anda perlu:

1. Membuat Web Client ID di Google Cloud Console jika belum punya (Cara mendapatkan kredensial)
2. Gunakan Web Client ID ini di webClientId kolom untuk semua platform
3. Untuk Android, Anda tetap perlu membuat Android Client ID dengan SHA1 Anda, tapi ini hanya untuk verifikasi - token tidak akan digunakan (panduan setup Android)

Perubahan Code

Perubahan Import

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

Inisialisasi

Setup berubah dari yang sederhana GoogleAuth.initialize() memanggil struktur yang lebih rapi SocialLogin.initialize() dengan konfigurasi Google bersarang:

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

Masuk

Metode login berubah dari GoogleAuth.signIn() ke SocialLogin.login() dengan spesifikasi provider yang eksplisit:

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

Perubahan Khusus Platform

Android

1. Perbarui file MainActivity.java (Panduan lengkap setup 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. Tidak ada perubahan besar di AppDelegate.swift (Panduan setup iOS)

2. Perbarui konfigurasi Anda di capacitor.config.json, kami tidak menggunakannya di plugin baru:

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

Web

1. Hapus meta tag Google Sign-In dari index.html jika sebelumnya Anda menggunakannya:

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

Perubahan Response Type

Respons autentikasi sekarang mengembalikan objek terstruktur yang berisi informasi provider, access token, ID token, dan data profil pengguna:

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

Struktur respons mencakup:

• provider: Mengidentifikasi provider autentikasi ('google')
• result.accessToken: Detail access token beserta masa berlakunya
• result.idToken: ID token untuk autentikasi
• result.profile: Informasi profil pengguna termasuk email, nama, dan URL gambar

Kemampuan Tambahan

Package baru ini mendukung berbagai provider autentikasi sosial selain Google:

• Apple Sign-In
• Facebook Login

Pendekatan terpadu ini memberikan:

• API yang konsisten di semua provider
• Dukungan TypeScript yang lebih baik
• Penanganan error yang lebih baik
• Pemeliharaan aktif dan dukungan komunitas

Cek dokumentasi utama untuk instruksi setup mendalam bagi provider tambahan ini.

Lanjutkan dari Migrasi Google Auth ke @capgo/social-login

Jika Anda menggunakan Migrasi Google Auth ke @capgo/social-login untuk merencanakan alur autentikasi dan akun, hubungkan dengan Menggunakan @capgo/capacitor-social-login untuk kapabilitas native di Menggunakan @capgo/capacitor-social-login, @capgo/capacitor-social-login untuk detail implementasi di @capgo/capacitor-social-login, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, @capgo/capacitor-native-biometric untuk detail implementasi di @capgo/capacitor-native-biometric, dan Autentikasi dua faktor untuk detail implementasi di autentikasi dua faktor.