Migrasi Apple Sign-In ke @capgo/social-login

Ikhtisar

Panduan ini menjelaskan transisi dari @capacitor-community/apple-sign-in plugin lama ke @capgo/capacitor-social-login package modern. Plugin baru ini menyediakan interface terpadu untuk berbagai provider autentikasi sosial dengan dukungan TypeScript yang lebih baik dan pemeliharaan aktif.

Instalasi

1. Hapus package lama:

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

2. Install package baru:

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

Perubahan Code

Perubahan Import

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

Inisialisasi

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

// 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 cukup memberikan konfigurasi dasar, sedangkan Android memerlukan detail tambahan termasuk Service ID dan backend callback URL untuk autentikasi OAuth berbasis web.

Masuk

Proses login kini lebih simpel, dari banyak 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 scope opsional, alih-alih mengirimkan nilai konfigurasi satu per satu seperti clientId dan redirectURI.

Perubahan Response Type

Hasilnya kini mencakup accessToken objek dengan detail masa berlaku dan bagian profile terstruktur, menggantikan format respons 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;
    };
  };
}

Kapabilitas Baru

Plugin terbaru ini menghadirkan fungsionalitas yang tidak ada di versi sebelumnya:

Cek Status Login

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

Fungsionalitas Logout

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

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

Perubahan Khusus Platform

Setup iOS

iOS tetap menggunakan prosedur setup yang familiar melalui fitur Xcode:

1. Setup iOS sebagian besar tetap sama. Anda tetap perlu:
   • Aktifkan capability “Sign In with Apple” di Xcode
   • Konfigurasi aplikasi Anda di Apple Developer Portal
   • Tidak perlu perubahan code tambahan untuk iOS

Setup Android

Android sekarang mendapatkan dukungan native via autentikasi OAuth berbasis web:

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

1. Buat Services ID di Apple Developer Portal
2. Konfigurasi endpoint autentikasi web
3. Siapkan aplikasi Android Anda untuk menangani flow OAuth
4. Memerlukan konfigurasi backend service

Untuk instruksi setup Android yang detail, silakan lihat Panduan Setup Android.

Keunggulan Utama

Package modern ini menyediakan:

1. API Terpadu untuk berbagai provider sosial (Google, Facebook, Apple)
2. TypeScript typing yang lebih baik dengan definisi tipe yang lebih baik
3. Pemeliharaan komunitas yang aktif dibandingkan versi yang sudah deprecated
4. Dukungan Android bawaan melalui autentikasi berbasis web
5. Manajemen state login yang persisten
6. Error handling yang lebih baik dengan tipe error yang konsisten

Perubahan Penting

1. Inisialisasi eksplisit kini wajib dilakukan - tidak ada konfigurasi default
2. Struktur objek response telah berubah - format result bersarang (nested)
3. Implementasi Android memerlukan layanan backend untuk OAuth
4. Penanganan refresh token kini berbeda - manajemen token yang lebih baik
5. Penanganan dan tipe error telah berubah - error yang lebih detail

Untuk instruksi setup yang lebih detail, silakan lihat dokumentasi resmi.

Lanjutkan dari Migrasi Apple Sign-In ke @capgo/social-login

Jika Anda menggunakan Migrasi Apple Sign-In ke @capgo/social-login untuk merencanakan alur autentikasi dan akun, hubungkan dengan Menggunakan @capgo/capacitor-social-login untuk kapabilitas native di Menggunakan @capgo/capacitor-social-login, @capgo/capacitor-social-login untuk detail implementasi di @capgo/capacitor-social-login, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, @capgo/capacitor-native-biometric untuk detail implementasi di @capgo/capacitor-native-biometric, dan Autentikasi dua faktor untuk detail implementasi di autentikasi dua faktor.