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

Übersicht

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

Abschnitt mit dem Titel „Installation“

1. Entfernen Sie das alte Paket:

   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

Schlüsseländerung: Die neue Erweiterung erfordert einen Initialisierungsschritt, 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 optional Berechtigungen anstatt einzelne Konfigurationswerte wie clientId und redirectURI.

Änderungen im Antworttyp

Die Ergebnisse umfassen nun ein Objekt mit Ablaufdaten und einem strukturierten accessToken Abschnitt, der die flachere Antwortformat des Originalpaketes ersetzt: profile Zwischenablage

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

Abschnitt mit dem Titel „Neue Funktionen“

Anmeldung überprüfen

Copy to clipboard

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

Abmeldefunktion

// 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 pflegt bekannte Einrichtungsverfahren durch Xcode-Fähigkeiten:

1. Die iOS-Einstellungen bleiben größtenteils gleich. Sie benötigen immer noch:
   • Aktivieren Sie die Funktion „Mit Apple anmelden“ in Xcode
   • Konfigurieren Sie Ihre App im Apple-Entwicklerportal
   • Keine zusätzlichen code Änderungen erforderlich für iOS

Android-Einrichtung

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

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

1. Erstellen Sie einen Services-ID im Apple-Entwicklerportal
2. Konfigurieren Sie einen Web-Authentifizierungs-Endpunkt
3. Konfigurieren Sie Ihre Android-App, um den OAuth-Flow zu handhaben
4. Konfiguration des Backend-Dienstes ist erforderlich

Zur detaillierten Anleitung für die Android-Einrichtung, wenden Sie sich bitte an die Anleitung für die Android-Einrichtung.

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. persistente Verwaltung des Anmeldezustands
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. Die Token-Refresh-Verwaltung ist anders - Verbesserte Token-Verwaltung
5. Die Fehlerbehandlung und die Fehlerarten haben sich geändert - Feinere Fehlermeldungen

Für detailliertere Anweisungen zur Einrichtung, zögern Sie bitte zur offiziellen Dokumentation.

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

Wenn Sie Apple Sign-In Migration zu @__CAPGO_KEEP_0__/social-login Apple Sign-In Migration to @capgo/social-login Apple Sign-In Migration zu @__CAPGO_KEEP_0__/social-login Mithilfe von @capgo/capacitor-social-login für die native Fähigkeit in Mithilfe von @capgo/capacitor-social-login @capgo/capacitor-social-login für die Implementierungsdetails in @capgo/capacitor-social-login @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-passkey @capgo/capacitor-native-biometrisch für die Implementierungsdetails in @capgo/capacitor-native-biometrisch, und Zwei-Faktor-Authentifizierung für die Implementierungsdetails in Zwei-Faktor-Authentifizierung.