Migrasi Autentikasi Google ke @capgo/social-login

Ringkasan

Panduan ini menyediakan langkah-langkah komprehensif untuk memindahkan 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.

Pemasangan

1. Hapus paket lama:

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

2. Pasang paket baru:

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

Perubahan Penting dalam Pengaturan Autentikasi Google

Kebutuhan ID Klien Web

Perubahan Kritis: Plugin yang diperbarui 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)

Code Perubahan

Import Perubahan

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

Initialisasi

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

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

Mengubah metode login dari GoogleAuth.signIn() ke 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
  }
});

Pertukaran Spesifik Platform

Andoid

1. Perbarui MainActivity.java (Panduan 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 tanggal kedaluwarsa
• result.idToken: Token ID untuk autentikasi
• result.profile: Informasi profil pengguna termasuk email, nama, dan URL gambar

Kemampuan Tambahan

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

• Apple Sign-In
• Facebook Login

Approach yang terintegrasi ini menyediakan:

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

Cek documentasi utama untuk instruksi setup yang 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 aliran autentikasi dan 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.