Migrasi Otorisasi Google ke @capgo/social-login

Ringkasan

Panduan ini menyediakan langkah-langkah komprehensif untuk mengimpor dari @codetrix-studio/capacitor-google-auth ke @capgo/capacitor-social-login, memastikan transisi yang lancar dan pengalaman autentikasi yang ditingkatkan. Plugin baru menyatukan penyedia autentikasi sosial yang berbeda 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

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:

1. Buat ID Klien Web di Google Cloud Console jika Anda tidak memiliki 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 berubah dari sederhana menjadi lebih terstruktur GoogleAuth.initialize() dengan konfigurasi Google yang terikat: 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
  }
});

Bagian berjudul “Masuk”

menjadi GoogleAuth.signIn() dengan spesifikasi penyedia eksplisit: SocialLogin.login() Salin ke clipboard

const user = await GoogleAuth.signIn();
const res = await SocialLogin.login({
  provider: 'google',
  options: {
    scopes: ['email', 'profile'],
    forceRefreshToken: true // if you need refresh token
  }
});

Pengaturan berubah dari sederhana menjadi lebih terstruktur dengan konfigurasi Google yang terikat:__CAPGO_KEEP_0__

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 dalam 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 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

• Salin ke clipboardMengidentifikasi penyedia autentikasi ('google')
• result.accessTokenDetil akses token dengan masa berlaku
• result.idTokenToken ID untuk autentikasi
• result.profileInfo profil pengguna termasuk email, nama, dan URL URL gambar

Kemampuan Tambahan

Paket baru mendukung penyedia autentikasi sosial berbagai:

• Pengenalan Tanda Tangan Apple
• Pengenalan Facebook

Dengan pendekatan yang terintegrasi ini, Anda akan mendapatkan:

• Konsistensi 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 detail untuk penyedia tambahan ini. Lanjutkan dari migrasi Autentikasi Google ke @__CAPGO_KEEP_0__/social-login

Bagian berjudul “Lanjutkan dari migrasi Autentikasi Google ke @capgo/social-login”

Autentikasi Google ke @__CAPGO_KEEP_0__/social-login Google Auth Migration to @capgo/social-login untuk merencanakan autentikasi dan alur akun, hubungkannya dengan 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.