Migrasi Otorisasi Google ke @capgo/social-login

Ringkasan

Petunjuk ini menyediakan langkah-langkah komprehensif untuk memindahkan dari @codetrix-studio/capacitor-google-auth ke @capgo/capacitor-social-login, memastikan transisi yang lancar dan pengalaman autentikasi yang ditingkatkan. Plugin baru ini menyatukan penyedia autentikasi sosial yang berbeda di bawah satu, konsisten API.

Pemasangan

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 dalam Pengaturan Autentikasi Google

Kebutuhan ID Klien Web

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

Anda perlu melakukan hal-hal berikut:

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

Code Perubahan

Impor Perubahan

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

Inisialisasi

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

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() sederhana menjadi lebih terstruktur 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 Spesifik Platform

Android

1. Perbarui MainActivity.java (Petunjuk 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 ada perubahan besar yang diperlukan di AppDelegate.swift (Petunjuk Pengaturan iOS)

2. Perbarui pengaturan Anda di capacitor.config.jsonKami 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 situs web Anda: index.html 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 termasuk:

• provider: Mengidentifikasi penyedia autentikasi ('google')
• result.accessToken: Detail token akses dengan batas waktu kedaluwarsa
• result.idToken: Token ID untuk autentikasi
• result.profile: Informasi profil pengguna termasuk email, nama, dan URL URL gambar

Fasilitas Tambahan

Paket baru mendukung beberapa penyedia autentikasi sosial di luar Google:

• Pengenalan Sign-In Apple
• Facebook Login

Penggunaan Akun Facebook ini menyediakan:

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

Periksa dokumen utama untuk instruksi pengaturan rinci untuk penyedia tambahan ini. Teruskan dari Migrasi Autentikasi Google ke @__CAPGO_KEEP_0__/social-login

Bagian berjudul “Teruskan dari Migrasi Autentikasi Google ke @capgo/social-login”

Penggunaan Akun Google ini menyediakan: Migrasi Autentikasi Google ke @capgo/social-login untuk merencanakan autentikasi dan alur 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 Dua-Faktor Autentikasi untuk detail implementasi dalam Dua-Faktor Autentikasi.