Migrasi Autentikasi Google ke @capgo/social-login

Pendahuluan

Petunjuk ini menyediakan langkah-langkah komprehensif untuk bermigrasi 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

Pembaharuan Penting dalam Pengaturan Autentikasi Google

Kebutuhan ID Klien Web

Pembaharuan 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 tidak memiliki salah satu (Cara mendapatkan kredensial)
2. Gunakan ID Klien Web ini di webClientId bidang 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 (Petunjuk pengaturan Android)

Code Perubahan

Impor Perubahan

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

Inisialisasi

Pengaturan transformasi 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() 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 yang Spesifik untuk Platform

Android

1. Perbarui MainActivity.java (Petunjuk lengkap 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.json, kami tidak menggunakan itu dalam plugin baru:

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

Bahasa Web

1. Hapus tag meta Google Sign-In dari situs web Anda jika Anda menggunakan mereka: index.html Salin ke clipboard

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

Judul Bagian “Perubahan Tipe Respons”

Salin ke clipboard

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

penyedia

• : Mengidentifikasi penyedia autentikasi (Salin ke clipboard'google')
• Akses Token: Detail akses token dengan masa berlaku
• Akses Token ID: Token ID untuk autentikasi
• Profil Pengguna: Informasi profil pengguna termasuk email, nama, dan URL gambar

Kemampuan Tambahan

Paket baru mendukung penyedia autentikasi sosial berbagai:

• Apple Sign-In
• Facebook Login

Approach yang terintegrasi ini menyediakan:

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

Periksa dokumen utama untuk instruksi setup yang lebih rinci untuk penyedia tambahan. Teruskan dari Migrasi Otorisasi Google ke @__CAPGO_KEEP_0__/social-login

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

Migrasi Otorisasi Google ke @__CAPGO_KEEP_0__/social-login Google Auth Migration to @capgo/social-login ]} Menggunakan @capgo/capacitor-login-sosial untuk kemampuan asli dalam Menggunakan @capgo/capacitor-login-sosial, @capgo/capacitor-login-sosial untuk detail implementasi dalam @capgo/capacitor-login-sosial, @capgo/capacitor-passkey untuk detail implementasi dalam @capgo/capacitor-passkey, @capgo/capacitor-biometrik-asli untuk detail implementasi dalam @capgo/capacitor-biometrik-asli, dan Autentikasi dua faktor untuk detail implementasi dalam Autentikasi dua faktor.