Supabase Apple Login auf Web

Voraussetzungen

Diese Anleitung hilft Ihnen, Apple Sign-In mit Supabase-Authentifizierung auf Web zu integrieren. Es wird davon ausgegangen, dass Sie bereits folgende Schritte abgeschlossen haben:

• die Apple Login Web-Einrichtung
• die Supabase Apple Login - Allgemeine Einrichtung.

Implementierung

Die vollständige Implementierung ist im Beispiel-Apps- supabaseAuthUtils.ts Datei verfügbar. Diese Anleitung erklärt die wichtigsten Konzepte und wie Sie sie verwenden können.

Verwendung der Authentifizierungshilfe

Der authenticateWithAppleSupabase Funktion

import { authenticateWithAppleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithAppleSupabase();
if (result.success) {
  console.log('Signed in:', result.user);
  // Navigate to your authenticated area
} else {
  console.error('Error:', result.error);
}

Wie es funktioniert

Bei Web-Anwendungen verwendet Apple Sign-In einen OAuth-Popup-Flow:

1. Initialisierung: Die Erweiterung wird mit Ihrer Service-ID und der aktuellen Seite als Redirect-URL initialisiert
2. OAuth-Popup: Öffnet ein Popup-Fenster mit der Apple-OAuth-Seite
3. Benutzerauthentifizierung: Benutzer authentifiziert sich mit Apple in dem Pop-up
4. Identitäts-Token: Apple gibt ein Identitäts-Token (JWT) mit Benutzerinformationen zurück
5. Supabase-Authentifizierung: Das Identitäts-Token wird an Supabase mit signInWithIdToken()

Die Hilfsfunktion erkennt automatisch die Web-Plattform und konfiguriert alles entsprechend.

Wichtige Hinweise

Dienst-ID-Konfiguration

• Web erfordert Ihre Apple-Dienst-ID (gleichbedeutend mit Android)
• Die Dienst-ID muss in Apple Developer Portal mit den richtigen Rückruf-URLs konfiguriert werden
• Stellen Sie sicher, dass Ihr Domain in der Apple Developer Portal in den zulässigen Domains aufgeführt ist

Zurück-URL

• Bei Web-Apps wird die Zurück-URL automatisch auf window.location.href (aktuelle Seite-URL)
• Dies muss einer der in der Apple Developer Portal konfigurierten Rück-URLs entsprechen
• Stellen Sie sicher, dass sowohl die URL mit als auch ohne Schlusspunkt konfiguriert sind in der Apple Developer Portal

Supabase Client ID

In Supabase konfigurieren Sie Ihren Apple-Anbieter wie folgt:

• Client ID: Ihre Apple-Dienst-ID (z.B. com.example.app.service)

If Sie auch iOS verwenden, müssen Sie sowohl den App ID als auch den Service ID in der Client ID-Eingabe von Supabase (komma-getrennt) bereitstellen.

Die Hilfsfunktion aktualisieren

Wenn Sie die authenticateWithAppleSupabase Hilfsfunktion verwenden, müssen Sie müssen aktualisieren, um Ihrem Apple Service ID zu entsprechen: clientId Zwischenablage kopieren

await SocialLogin.initialize({
  apple: {
    clientId: isIOS
      ? undefined // iOS uses bundle ID automatically
      : 'your.service.id.here', // Your Apple Service ID for Web and Android
    redirectUrl: redirectUrl,
  },
});

Ersetzen

Ersetzen 'your.service.id.here' mit Ihrem tatsächlichen Apple-Dienst-ID (demselben Wert, den Sie im Apple-Entwicklerportal konfiguriert haben).

Schulung und Fehlerbehebung

Wenn die Authentifizierung fehlschlägt:

• ID des Dienstes passt nichtÜberprüfen Sie, ob Ihre Service-ID in beiden Apple-Entwicklerportal und Ihrem code übereinstimmt.
• Rückruf-URL nicht konfiguriertStellen Sie sicher, dass Ihre aktuelle Seite-URL (mit und ohne Schlusspunkt) im Apple-Entwicklerportal konfiguriert ist.
• Pop-up-Blocker aktiviertÜberprüfen Sie die Browser-Einstellungen - einige Browser blockieren Pop-ups standardmäßig.
• Domain nicht zugelassenÜberprüfen Sie, ob Ihre Domain in den zulässigen Domains im Apple-Entwicklerportal hinzugefügt ist.
• Supabase-Konfiguration: Überprüfen Sie, ob Ihre Service-ID in den Supabase Apple-Anbieter-Einstellungen korrekt konfiguriert ist
• Review the Beispiel-App code zum Verweis

Fahren Sie mit der Supabase Apple-Login-Anwendung auf Web fort

Wenn Sie Supabase Apple-Login auf Web verwenden, um die Authentifizierung und die Kontenflüsse zu planen, verbinden Sie es mit Verwenden Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login für die native Fähigkeit in Verwenden Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login, Using @capgo/capacitor-social-login for the native capability in Using @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-biometric für die Implementierungsdetails in @capgo/capacitor-native-biometric und Zwei-Faktor-Authentifizierung für die Implementierungsdetails in Zwei-Faktor-Authentifizierung