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

Ringkasan

Petunjuk ini menjelaskan transisi dari plugin legasi ke paket modern. @capacitor-community/apple-sign-in Plugin baru menyediakan antarmuka yang terintegrasi untuk penyedia autentikasi sosial yang berbeda dengan dukungan TypeScript yang diperbarui dan perawatan aktif. @capgo/capacitor-social-login Pemasangan

Bab berjudul “Pemasangan”

1. Membersihkan paket lama:

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

2. Instal paket baru:

   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';

Initialisasi

Ganti Kunci: Plugin baru memerlukan langkah pengaturan awal 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
  }
});

Pesan 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 parameter banyak 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 opsi skop opsional daripada mengirimkan nilai konfigurasi individu seperti clientId dan redirectURI.

Pengubahan Tipe Respon

Hasil sekarang termasuk accessToken objek dengan detail kedaluwarsa dan struktur profile bagian, menggantikan format respon yang lebih tipis 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 fungsi yang tidak tersedia di pendahulunya:

Pengecekan Status Login

// 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-metode ini menyediakan isLoggedIn() untuk memverifikasi status autentikasi dan logout() fungsionalitas.

Perubahan Khusus Platform

Pengaturan iOS

iOS menjaga prosedur pengaturan yang familiar melalui kemampuan Xcode:

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

Pengaturan Android

Android sekarang mendapatkan dukungan asli melalui autentikasi OAuth berbasis web:

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

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

Untuk instruksi pengaturan Android yang lebih rinci, silakan lihat Petunjuk Pengaturan Android.

Kelebihan Utama

Paket modern yang disediakan:

1. API yang terintegrasi across beberapa penyedia jejaring sosial (Google, Facebook, Apple)
2. Pengembangan tipe yang lebih baik dengan definisi tipe yang lebih baik
3. Pemeliharaan komunitas yang aktif bandingkan dengan versi yang sudah ditinggalkan
4. Dukungan Android bawaan melalui autentikasi berbasis web
5. Pengelolaan status login yang berlangsung
6. Pengolahan kesalahan yang lebih baik dengan jenis kesalahan yang konsisten

Perubahan yang Mengganggu

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

Untuk instruksi setup yang lebih rinci, silakan lihat dokumentasi 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 aliran akun, hubungkannya dengan Menggunakan @capgo/capacitor-login-media sosial untuk kemampuan asli dalam Menggunakan @capgo/capacitor-login-media sosial @capgo/capacitor-login-media sosial untuk detail implementasi dalam @capgo/capacitor-login-media 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.