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.

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: 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 kunci akses)
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 menjadi lebih terstruktur GoogleAuth.initialize() dengan konfigurasi Google yang terintegrasi: SocialLogin.initialize() Salin ke clipboard

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

Judul Bagian berjudul “Masuk”

ke GoogleAuth.signIn() context 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 (Panduan penuh pengaturan 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 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 masa berlaku
• result.idToken: Token ID untuk autentikasi
• result.profile: Informasi profil pengguna termasuk email, nama, dan URL gambar

Fungsi Tambahan

Paket baru ini mendukung beberapa penyedia autentikasi sosial di luar Google:

• Apple Sign-In
• Penggunaan Facebook

Metode ini menyediakan:

• Konsistensi API di semua penyedia
• Pengembangan TypeScript yang lebih baik
• Pengelolaan kesalahan yang lebih baik
• Bantuan pemeliharaan 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 untuk @capgo/social-login untuk merencanakan aliran autentikasi dan akun, hubungkannya dengan Menggunakan @capgo/capacitor-social-login untuk kemampuan asli dalam Menggunakan @capgo/capacitor-social-login, @capgo/capacitor-social-login untuk detail implementasi dalam @capgo/capacitor-social-login, @capgo/capacitor-passkey untuk detail implementasi dalam @capgo/capacitor-passkey, @capgo/capacitor-native-biometric untuk detail implementasi dalam @capgo/capacitor-native-biometric, dan Autoritas Dua Faktor untuk detail implementasi di Autoritas Dua Faktor.