Apple Sign-In-Migration zu @capgo/social-login

Übersicht

Diese Anleitung beschreibt die Übergang vom alten Plugin zum modernen @capacitor-community/apple-sign-in Erweiterung zur modernen @capgo/capacitor-social-login Paket. Das neue Plugin bietet eine einheitliche Schnittstelle für mehrere soziale Authentifizierungsanbieter mit verbessertem TypeScript-Unterstützung und aktiver Wartung.

Installation

1. Entfernen Sie das alte Paket: __CAPGO_KEEP_0__

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

2. Installieren Sie das neue Paket:

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

Code Änderungen

Importieren Sie Änderungen

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

Initialisierung

Key Änderung: Die neue Erweiterung erfordert einen Initialisierungsprozess, der vorher nicht erforderlich war.

// 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
  }
});

Wichtiger Hinweis: Für iOS müssen Sie grundlegende Konfigurationen bereitstellen, während Android zusätzliche Details erfordert, einschließlich einer Service-ID und einem Backend-Callback-URL für webbasierte OAuth-Authentifizierung.

Anmelden

Der Anmeldevorgang vereinfacht sich von mehreren Parametern zu einem sauberen API:

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

Die neue Erweiterung verwendet login() mit provider: 'apple' und optionalen Berechtigungen anstatt einzelne Konfigurationswerte wie clientId und redirectURI.

Änderungen im Antworttyp

Ergebnisse werden nun einen accessToken Abschnitt, der die flachere Antwortformat des Originalpaketes ersetzt: profile Abschnitt, durch den Austausch der flacheren Antwortformat des Originalpaketes:

// 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;
    };
  };
}

Neue Funktionen

Die aktualisierte Erweiterung bietet Funktionen, die in der Vorgängerversion nicht verfügbar waren:

Status der Anmeldung überprüfen

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

Abmelden-Funktion

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

Diese Methoden bieten isLoggedIn() um die Authentifizierungsstatus zu überprüfen und logout() Funktionen.

Plattformspezifische Änderungen

iOS-Einrichtung

iOS behält die bekannten Einrichtungsverfahren durch Xcode-Funktionen bei:

1. Die iOS-Einrichtung bleibt größtenteils gleich. Sie müssen immer noch:
   • Aktivieren Sie die „Mit Apple anmelden“-Fähigkeit in Xcode
   • Konfigurieren Sie Ihre App im Apple-Entwicklerportal
   • No additional code changes required for iOS

Android-Einrichtung

Android erhält nun native Unterstützung über webbasierte OAuth-Authentifizierung:

Das neue Plugin bietet Android-Unterstützung direkt aus der Box, erfordert jedoch zusätzliche Einrichtungen:

1. Erstellen Sie eine Services-ID im Apple-Entwicklerportal
2. Eine Web-Authentifizierungs-Endpunkt konfigurieren
3. Konfigurieren Sie Ihre Android-App zum Umgang mit dem OAuth-Flow
4. Die Konfiguration des Backend-Dienstes ist erforderlich

Für detaillierte Anweisungen zur Android-Konfiguration, zögern Sie bitte zu den Android-Konfigurationsanleitung.

Hauptvorteile

Das modernisierte Paket bietet:

1. Einheitliche APIs über mehrere soziale Anbieter (Google, Facebook, Apple)
2. Verbesserte TypeScript-Typisierung mit besseren Typdefinitionen
3. Aktive Wartung durch die Community im Vergleich zur veralteten Version
4. Integrierte Android-Unterstützung durch Web-basierte Authentifizierung
5. Verwaltung des persistierenden Loginzustands
6. Bessere Fehlerbehandlung mit konsistenten Fehlerarten

Änderungen mit Auswirkungen auf die Kompatibilität

1. Eine explizite Initialisierung ist jetzt erforderlich - keine Standardkonfiguration
2. Die Struktur des Antwortobjekts wurde geändert - formatierte Ergebnisse in der NESTED-Struktur
3. Die Android-Implementierung erfordert einen Backend-Dienst für OAuth
4. Token refresh handling ist anders - Verbesserte Token-Verwaltung
5. Fehlerbehandlung und Fehlerarten haben sich geändert - Detailliertere Fehlermeldungen

Für detailliertere Anweisungen zur Einrichtung, zögern Sie bitte zu den offiziellen Dokumentationen.

Weitergehen Sie von der Migration Apple Sign-In zu @capgo/social-login

Wenn Sie Live Update verwenden Apple Sign-In-Migration zu @capgo/social-login Um Authentifizierung und Account-Flüsse zu planen, verbinden Sie es mit Verwendung von @capgo/capacitor-social-login für die native Fähigkeit in Verwendung von @capgo/capacitor-social-login, @capgo/capacitor-Social-Login für die Implementierungsdetails in @capgo/capacitor-social-login, @capgo/capacitor-Passwort für die Implementierungsdetails in @capgo/capacitor-passkey, @capgo/capacitor-native-biometrisch für die Implementierungsdetails in @capgo/capacitor-native-biometric und Zwei-Faktor-Authentifizierung für die Implementierungsdetails in Zwei-Faktor-Authentifizierung.