Migrasi Autentikasi Google ke @capgo/social-login

Ringkasan

Panduan ini menyediakan langkah-langkah komprehensif untuk memigrasikan dari @codetrix-studio/capacitor-google-auth ke @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.

Instalasi

1. Hapus paket lama:

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

2. Instalasi paket baru:

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

Perubahan Penting dalam Pengaturan Autentikasi Google

Kebutuhan ID Klien Web

Perubahan Kritis: Perubahan plugin ini memerlukan penggunaan ID Klien Web di semua platform.

Anda perlu:

1. Membuat ID Klien Web di Google Cloud Console jika Anda belum memiliki satu (Cara mendapatkan kredensial)
2. Menggunakan ID Klien Web ini di webClientId untuk semua platform
3. Untuk Android, Anda masih perlu membuat ID Klien Android dengan SHA1, tetapi ini hanya untuk keperluan verifikasi - token tidak akan digunakan (Panduan pengaturan Android)

Perubahan Code

Import Perubahan

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

Initialisasi

Konfigurasi setup berubah dari yang sederhana GoogleAuth.initialize() menjadi yang lebih terstruktur SocialLogin.initialize() dengan konfigurasi Google yang terikat:

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 __CAPGO_KEEP_0__ SocialLogin.login() dengan spesifikasi penyedia eksplisit:

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

Pertimbangan Khusus Platform

Andoid

1. Perbarui MainActivity.java (Petunjuk penuh pengaturan Andoid):

 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 perlu perubahan besar dalam AppDelegate.swift (Petunjuk pengaturan iOS)

2. Perbarui konfigurasi Anda di capacitor.config.json, kami tidak menggunakan itu dalam plugin baru:

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

Web

1. Hapus tag meta Google Sign-In dari halaman Anda: index.html Hapus tag meta Google Sign-In dari halaman Anda jika Anda menggunakan mereka:

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

Perubahan Tipe Respons

Respons autentikasi sekarang menyediakan objek struktur yang berisi informasi penyedia, token akses, token ID, 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 penyedia autentikasi ('google')
• result.accessToken: Detail token akses dengan batas waktu
• result.idToken: Token ID untuk autentikasi
• result.profile: Informasi profil pengguna termasuk email, nama, dan URL gambar

Kemampuan Tambahan

Paket baru ini mendukung penyedia autentikasi sosial yang lebih dari Google:

• Apple Sign-In
• Facebook Login

Metode ini menyediakan:

• Konsistensi API di semua penyedia
• Peningkatan dukungan TypeScript
• Pengelolaan kesalahan yang lebih baik
• Bantuan pemeliharaan dan dukungan komunitas yang aktif

Cek documentasi utama untuk instruksi pengaturan rinci untuk penyedia tambahan ini.

Teruskan dari Migrasi Autentikasi Google ke @capgo/social-login

Jika Anda menggunakan Migrasi Google Auth ke @capgo/social-login untuk merencanakan autentikasi dan aliran akun, hubungkannya dengan Menggunakan @capgo/capacitor-social-login untuk kemampuan asli 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.