Supabase Apple-Login auf Web

Voraussetzungen

Diese Anleitung hilft Ihnen, Apple Sign-In mit Supabase Authentication 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-App-Datei supabaseAuthUtils.ts verfügbar. Diese Anleitung erklärt die wichtigsten Konzepte und wie man sie verwendet.

Mit der Authentifizierungshilfe

Die authenticateWithAppleSupabase Funktion handhabt den gesamten Authentifizierungsfluss:

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

Auf Web verwendet Apple Sign-In einen OAuth-Popup-Flow:

1. Initialisierung: Die Erweiterung wird mit Ihrer Service-ID und der aktuellen Seite-URL als Redirect-URL initialisiert
2. OAuth-Popup: Öffnet ein Popup-Fenster mit der Apple OAuth-Seite
3. Benutzerauthentifizierung: Der Benutzer authentifiziert sich bei Apple im Popup
4. Identitäts-Token: Apple gibt ein Identitäts-Token (JWT) mit Benutzerinformationen zurück
5. Supabase-Authentifizierung: Der Identitäts-Token wird an Supabase übermittelt 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 den zulässigen Domains in Apple Developer Portal hinzugefügt ist

Zurückleitungs-URL

• Auf der Web-Oberfläche wird die Umleitungs-URL automatisch auf window.location.href (aktuelle Seite-URL)
• Dies muss einer der im Apple-Entwicklerportal konfigurierten Rückgabeanzeigen entsprechen
• Stellen Sie sicher, dass sowohl die URL mit als auch ohne Schlusspunkt in Apple-Entwicklerportal konfiguriert sind

Supabase-Kunden-ID

In Supabase konfigurieren Sie Ihren Apple-Anbieter wie folgt:

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

Wenn Sie auch iOS verwenden, müssen Sie sowohl die App-ID als auch die Dienst-ID in der Client-ID-Feld von Supabase (komma-getrennt) bereitstellen.

Aktualisieren Sie die Hilfsfunktion

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

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

Wichtig

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

Fehlersuche

Wenn die Authentifizierung fehlschlägt:

• Dienst-ID passt nicht: Überprüfen Sie, ob Ihre Dienst-ID in beiden Apple-Entwicklerportal und Ihrem code übereinstimmt
• Rückruf-URL nicht konfiguriert: Stellen Sie sicher, dass die aktuelle Seite-URL (mit und ohne Schlusspunkt) in Apple-Entwicklerportal konfiguriert ist
• Pop-up blockiert: Ü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 in Apple-Entwicklerportal hinzugefügt ist
• Supabase-Konfiguration: Überprüfen Sie, ob Ihre Dienst-ID in den Supabase Apple-Anbieter-Einstellungen korrekt konfiguriert ist
• Überprüfen Sie Beispiel-App code Zur Referenz