Apple Migrasi Masuk ke @capgo/social-login

Ikhtisar

Panduan ini menguraikan transisi dari plugin @capacitor-community/apple-sign-in lama ke paket @capgo/capacitor-social-login modern. Plugin baru ini menyediakan antarmuka terpadu untuk beberapa penyedia autentikasi sosial dengan dukungan TypeScript yang ditingkatkan dan pemeliharaan aktif.

Instalasi

1. Hapus paket lama:

   npm uninstall @capacitor-community/apple-sign-in

2. Instal paket baru:

   npm install @capgo/capacitor-social-login
   npx cap sync

Perubahan Kode

Impor Perubahan

import { SignInWithApple } from '@capacitor-community/apple-sign-in';
import { SocialLogin } from '@capgo/capacitor-social-login';

Inisialisasi

Perubahan Kunci: Plugin baru memerlukan langkah inisialisasi yang tidak diperlukan sebelumnya.

// No initialization needed in old package
// For iOS: Basic configuration
await SocialLogin.initialize({
  apple: {} // Basic iOS configuration
});

// For Android: Additional configuration required
await SocialLogin.initialize({
  apple: {
    clientId: 'YOUR_SERVICE_ID', // Service ID from Apple Developer Portal
    redirectUrl: 'https://your-backend.com/callback' // Your backend callback URL
  }
});

Catatan Penting: Untuk iOS, Anda menyediakan konfigurasi dasar, sedangkan Android memerlukan detail tambahan termasuk ID Layanan dan URL panggilan balik backend untuk autentikasi OAuth berbasis web.

Masuk

Proses login disederhanakan dari beberapa parameter menjadi API yang lebih bersih:

const result = await SignInWithApple.authorize({
  clientId: 'com.your.app',
  redirectURI: 'https://your-app.com/callback',
  scopes: 'email name',
  state: '12345',
  nonce: 'nonce'
});

const result = await SocialLogin.login({
  provider: 'apple',
  options: {
    // Optional: Add scopes if needed
    scopes: ['email', 'name'],
    nonce: 'nonce'
  }
});

Plugin baru ini menggunakan login() dengan provider: 'apple' dan cakupan opsional daripada meneruskan nilai konfigurasi individual seperti clientId dan redirectURI.

Perubahan Jenis Respons

Hasilnya sekarang mencakup objek accessToken dengan detail masa berlaku dan bagian profile terstruktur, menggantikan format respons yang lebih datar dari paket asli:

// Old response type
interface AppleSignInResponse {
  response: {
    user: string;
    email: string | null;
    givenName: string | null;
    familyName: string | null;
    identityToken: string | null;
    authorizationCode: string | null;
  };
}

// New response type
interface SocialLoginResponse {
  provider: 'apple';
  result: {
    accessToken: {
      token: string;
      expiresIn?: number;
      refreshToken?: string;
    } | null;
    idToken: string | null;
    profile: {
      user: string;
      email: string | null;
      givenName: string | null;
      familyName: string | null;
    };
  };
}

Kemampuan Baru

Plugin yang diperbarui memperkenalkan fungsionalitas yang tidak tersedia di pendahulunya:

Memeriksa Status Masuk

// Not available in old package
const status = await SocialLogin.isLoggedIn({
  provider: 'apple'
});

Fungsi Keluar

// Not available in old package
await SocialLogin.logout({
  provider: 'apple'
});

Metode ini menyediakan isLoggedIn() untuk memverifikasi status autentikasi dan fungsionalitas logout().

Perubahan Khusus Platform

iOS Penyiapan

iOS mempertahankan prosedur pengaturan yang sudah dikenal melalui kemampuan Xcode:

1. Penyiapan iOS sebagian besar tetap sama. Anda masih perlu:
   • Aktifkan kemampuan “Masuk dengan Apple” di Xcode
   • Konfigurasikan aplikasi Anda di Portal Pengembang Apple
   • Tidak diperlukan perubahan kode tambahan untuk iOS

Android Penyiapan

Android kini menerima dukungan asli melalui autentikasi OAuth berbasis web:

Plugin baru ini langsung menyediakan dukungan Android, namun memerlukan pengaturan tambahan:

1. Buat ID Layanan di Portal Pengembang Apple
2. Konfigurasikan titik akhir autentikasi web
3. Siapkan aplikasi Android Anda untuk menangani aliran OAuth
4. Konfigurasi layanan backend diperlukan

Untuk petunjuk penyiapan Android selengkapnya, lihat Android Panduan Penyiapan.

Keuntungan Utama

Paket yang dimodernisasi menyediakan:

1. API Terpadu di beberapa penyedia sosial (Google, Facebook, Apple)
2. Pengetikan TypeScript yang ditingkatkan dengan definisi tipe yang lebih baik
3. Pemeliharaan komunitas aktif dibandingkan dengan versi yang tidak digunakan lagi
4. Dukungan Android bawaan melalui autentikasi berbasis web
5. Manajemen status login persisten
6. Penanganan kesalahan yang lebih baik dengan jenis kesalahan yang konsisten

Perubahan yang Mengganggu1. Inisialisasi eksplisit kini diperlukan - tidak ada konfigurasi default

2. Struktur objek respons telah berubah - format hasil bertingkat
3. implementasi Android memerlukan layanan backend untuk OAuth
4. Penanganan penyegaran token berbeda - manajemen token yang ditingkatkan
5. Penanganan kesalahan dan jenis kesalahan telah berubah - kesalahan yang lebih detail

Untuk petunjuk pengaturan lebih detail, lihat dokumentasi resmi.