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:

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

Implementierung

Die vollständige Implementierung ist im Beispiel-Apps- supabaseAuthUtils.ts Datei verfügbar. Diese Anleitung erklärt die Schlüsselkonzepte 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 Ihrem Service-ID und der aktuellen Seite als Redirect-URL initialisiert
2. OAuth-Popup: Öffnet ein Popup-Fenster mit der Apple OAuth-Seite
3. Benutzerauthentifizierung: Der Benutzer authentifiziert sich mit Apple im 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 übermittelt, indem 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

Umleitungs-URL

• Bei Web-Apps wird die Umleitungs-URL automatisch auf window.location.href (aktuelle Seite-URL)
• Dies muss einer der Rückgabeanfragen entsprechen, die in der Apple Developer Portal konfiguriert sind
• 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 die App-ID als auch die Service-ID in der Client-ID-Feld von Supabase (komma-getrennt) bereitstellen.

Die Hilfsfunktion aktualisieren

Wenn Sie die authenticateWithAppleSupabase Hilfsfunktion verwenden, müssen Sie müssen aktualisieren Sie sich an Ihre Apple-Service-ID anpassen: 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:

• Service-ID-MismatchÜberprüfen Sie, ob die Service-ID in beiden Apple-Entwicklerportalen und Ihrem code übereinstimmt.
• Rückruf-URL nicht konfiguriertStellen Sie sicher, dass die aktuelle Seite-URL (mit und ohne Schlusspunkt) im Apple-Entwicklerportal konfiguriert ist.
• Pop-up-BlockierungÜ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 zur Referenz

Fortsetzen Sie mit Supabase Apple Login on Web

Wenn Sie Supabase Apple Login on Web zum Planen der Authentifizierung und der Kontenflüsse verwenden Verbinden Sie es mit Mithilfe von @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login für die native Fähigkeit in Mithilfe von @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