Supabase Apple-Login auf Web

Voraussetzungen

Dieses Leitfaden hilft Ihnen, Apple Sign-In mit Supabase Authentication auf Web zu integrieren. Es wird angenommen, dass Sie bereits folgende Schritte abgeschlossen haben:

• den Apple Login Web-Einrichtung
• den 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.

Mithilfe der Authentifizierungs-Hilfe

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: Das Identitäts-Token wird an Supabase gesendet signInWithIdToken()

Die Hilfsfunktion erkennt automatisch die Webplattform und konfiguriert alles entsprechend.

Wichtige Hinweise

Dienst-ID-Konfiguration

• Bei Web-Anwendungen ist Ihre Apple-Dienst-ID (gleichbedeutend mit Android) erforderlich.
• 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.

Umleitungs-URL

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

Supabase Client ID

In Supabase konfigurieren Sie Ihren Apple-Anbieter mit:

• Client 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 Service-ID in Supabases Client-ID-Feld (komma-getrennt) bereitstellen.

Aktualisieren Sie die Hilfsfunktion

Wenn Sie die authenticateWithAppleSupabase Hilfsfunktion verwenden muss aktualisiert werden um Ihrem Apple Service ID zu entsprechen: clientId Zur Vorschau in die 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

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

Abschnitt mit dem Titel „Fehlersuche“

Falscher Service ID

• Service ID-Mismatch: Überprüfen Sie, ob Ihr Service-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 Ihr Service-ID korrekt in den Supabase Apple-Anbieter-Einstellungen konfiguriert ist.
• Überprüfen Sie das Beispiel-App code zur Referenz