Migrasi Otorisasi Google ke @capgo/social-login

Ringkasan

Panduan ini menyediakan langkah-langkah komprehensif untuk migrasi 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-beda di bawah satu, konsisten 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

Pertambahan Penting dalam Pengaturan Autentikasi Google

Kebutuhan ID Klien Web

Pertambahan 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 kunci autentikasi)
2. Menggunakan ID Klien Web ini di webClientId bidang untuk semua platform
3. Untuk Android, Anda masih perlu membuat ID Klien Android dengan SHA1 Anda, 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 panggilan sederhana GoogleAuth.initialize() ke struktur yang 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

Metode login berubah 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
  }
});

Perubahan yang Spesifik untuk Setiap Platform

Android

1. Perbarui aplikasi Anda 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 konfigurasi Anda di capacitor.config.json, kami tidak menggunakan fitur ini 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 jika Anda menggunakan mereka: 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" />

Pengubahan Tipe Respons

Sekarang respons autentikasi 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 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 URL gambar

Kemampuan Tambahan

Paket baru ini mendukung penyedia autentikasi sosial berbagai:

• Tanda Tangan Masuk Apple
• Masuk Facebook

Pendekatan ini menyediakan:

• Konsistensi API di semua penyedia
• Dukungan TypeScript yang ditingkatkan
• Pengaturan Error yang Lebih Baik
• Pemeliharaan Aktif dan Dukungan Masyarakat

Periksa dokumen main documentation untuk instruksi pengaturan rinci untuk penyedia tambahan ini.

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 Gunakan @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login untuk kemampuan asli di Gunakan @capgo/capacitor-social-login, Jika Anda menggunakan Migrasi Otorisasi Google ke @capgo/social-login untuk merencanakan autentikasi dan aliran akun, hubungkannya dengan Gunakan @capgo/capacitor-social-login untuk kemampuan asli di Gunakan @capgo/capacitor-social-login, @capgo/capacitor-login-sosial untuk detail implementasi di @capgo/capacitor-login-sosial, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, @capgo/capacitor-biometrik-natif untuk detail implementasi di @capgo/capacitor-biometrik-natif, dan Autentikasi Dua Faktor untuk detail implementasi di Autentikasi Dua Faktor.