Google Migrasi Otentikasi ke @capgo/social-login

Ikhtisar

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

Instalasi

1. Hapus paket lama:

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

2. Instal paket baru:

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

Perubahan Penting pada Google Pengaturan Otentikasi

Persyaratan ID Klien Web

Perubahan Penting: Plugin yang diperbarui memerlukan penggunaan ID Klien Web di semua platform.

Anda harus:

1. Buat ID Klien Web di Google Cloud Console jika Anda belum memilikinya (Cara mendapatkan kredensial)
2. Gunakan ID Klien Web ini di kolom webClientId untuk semua platform
3. Untuk Android, Anda masih perlu membuat ID Klien Android dengan SHA1 Anda, namun ini hanya untuk keperluan verifikasi - token tidak akan digunakan (Android panduan penyiapan)

Perubahan Kode

Impor Perubahan

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

Inisialisasi

Penyiapannya berubah dari panggilan GoogleAuth.initialize() sederhana menjadi SocialLogin.initialize() yang lebih terstruktur dengan konfigurasi Google bertumpuk:

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

Perubahan Khusus Platform

Android

1. Perbarui MainActivity.java Anda (Panduan penyiapan Android lengkap):

 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 diperlukan perubahan besar di AppDelegate.swift (iOS panduan penyiapan)

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 tag meta Masuk Google dari index.html jika Anda menggunakannya:

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

Perubahan Jenis Respons

Respons autentikasi kini menyediakan objek terstruktur 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 responsnya meliputi:

• penyedia: Mengidentifikasi penyedia autentikasi ('google')
• result.accessToken: Mengakses detail token dengan masa berlaku
• result.idToken: Token ID untuk autentikasi
• result.profile: Informasi profil pengguna termasuk email, nama, dan URL gambar

Kemampuan Tambahan

Paket baru ini mendukung beberapa penyedia autentikasi sosial selain Google:

• Apple Masuk
• Facebook Masuk

Pendekatan terpadu ini menyediakan:

• API yang konsisten di semua penyedia
• Peningkatan dukungan TypeScript
• Penanganan kesalahan yang lebih baik
• Pemeliharaan aktif dan dukungan komunitas

Periksa dokumentasi utama untuk mengetahui petunjuk penyiapan mendetail untuk penyedia tambahan ini.