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

Ringkasan

Panduan ini menjelaskan transisi dari plugin legacy ke plugin modern. @capacitor-community/apple-sign-in plugin ke dalam versi modern @capgo/capacitor-social-login Paket. Plugin baru ini menyediakan antarmuka yang terintegrasi untuk beberapa penyedia autentikasi sosial dengan dukungan TypeScript yang ditingkatkan dan perawatan aktif.

Installation

1. Tampilan terminal

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

2. Paket lama harus dihapus:

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

Code Perubahan

Import 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 perlu 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
  }
});

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

Tanda Masuk

Proses login memudahkan dari parameter multiple ke 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 menggunakan login() dengan provider: 'apple' dan ruang lingkup opsional bukan mengirimkan nilai konfigurasi individu seperti clientId dan redirectURI.

Perubahan Tipe Respons

Hasil sekarang termasuk sebuah accessToken objek dengan detail kedaluwarsa dan struktur profile Mengganti bagian, menggantikan format respons yang lebih sederhana 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;
    };
  };
}

Bagian berjudul “Fungsi Baru”

Fungsi plugin yang diperbarui ini memperkenalkan fitur yang tidak tersedia di versi sebelumnya:

Mengecek Status Login

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

Metode-metode ini menyediakan

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

Menggunakan Metode ini isLoggedIn() untuk memverifikasi status autentikasi dan logout() functionality.

Bahasa Khusus Platform

Pengaturan iOS

iOS menjaga prosedur pengaturan yang familiar melalui kemampuan Xcode:

1. Pengaturan iOS tetap besarannya sama. Anda masih perlu:
   • Mengaktifkan kemampuan “Masuk dengan Apple” di Xcode
   • Mengonfigurasi aplikasi di Portal Pengembang Apple
   • Tidak ada perubahan tambahan code yang diperlukan untuk iOS

Konfigurasi Android

Android sekarang mendapatkan dukungan asli melalui autentikasi OAuth berbasis web:

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

1. Buat ID Layanan di Portal Pengembang Apple
2. Konfigurasi endpoint autentikasi web
3. Konfigurasi aplikasi Android Anda untuk mengelola aliran OAuth
4. Konfigurasi layanan backend diperlukan

Untuk instruksi konfigurasi Android yang lebih rinci, silakan refer ke Petunjuk Konfigurasi Android.

Kelebihan Utama

Paket yang telah dimodernisasi menyediakan:

1. Fasilitas API Terintegrasi di berbagai penyedia jejaring sosial (Google, Facebook, Apple)
2. Pengembangan Tipe yang Lebih Baik dengan definisi tipe yang lebih baik
3. Pemeliharaan Komunitas Aktif bandingkan dengan versi yang telah ditinggalkan
4. Dukungan Android yang Terintegrasi melalui autentikasi berbasis web
5. Pengelolaan Status Login yang Tahan Lama
6. Penanganan Kesalahan yang Lebih Baik dengan jenis kesalahan yang konsisten

Perubahan Mendasar

1. Inisialisasi eksplisit sekarang diperlukan - tidak ada konfigurasi default
2. Struktur objek respons telah berubah - format hasil yang terstruktur
3. Implementasi Android memerlukan layanan backend untuk OAuth
4. Pengelolaan token telah berbeda - pengelolaan token yang ditingkatkan
5. Pengelolaan kesalahan dan jenis kesalahan telah berubah - error yang lebih rinci

Untuk instruksi pengaturan yang lebih rinci, silakan lihat documentasi resmi.

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

Jika Anda menggunakan Migrasi Sign-In Apple ke @capgo/social-login untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-social-login untuk kemampuan native di Menggunakan @capgo/capacitor-social-login, @capgo/capacitor-login Sosial untuk detail implementasi di @capgo/capacitor-social-login, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, @capgo/capacitor-native-biometrik untuk detail implementasi di @capgo/capacitor-native-biometric, dan Autentikasi Dua Faktor untuk detail implementasi di Autentikasi Dua Faktor.