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:

• the Apple Login Web-Einstellung
• the Supabase Apple Login - Allgemeine Einstellung.

Implementierung

Die vollständige Implementierung ist in der Beispiel-App-Datei verfügbar. Diese Anleitung erklärt die wichtigsten Konzepte und wie man sie verwendet. supabaseAuthUtils.ts Mit der Authentifizierungs-Hilfe

Abschnitt mit dem Titel “Mit der Authentifizierungs-Hilfe”

The authenticateWithAppleSupabase fungiert die gesamte Authentifizierungsablauf:

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, 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 Apple’s OAuth-Seite
3. Benutzerauthentifizierung: Der Benutzer authentifiziert sich bei Apple im Popup
4. Identitäts-Token: Der Apple-Server gibt ein Identitäts-Token (JWT) zurück, das Benutzerinformationen enthält
5. Supabase-Authentifizierung: Das Identitäts-Token wird an Supabase gesendet signInWithIdToken()

Der Hilfsfunktion wird automatisch die Web-Plattform erkannt und konfiguriert alles entsprechend.

Wichtige Hinweise

Dienst-ID-Konfiguration

• Web erfordert Ihre Apple-Dienst-ID (gleich wie 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

Richtlinien-URL

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

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 Supabase's Client-ID-Feld (getrennt durch Kommas) bereitstellen.

Aktualisieren Sie die Hilfsfunktion

Wenn Sie die authenticateWithAppleSupabase Hilfsfunktion verwenden, müssen Sie aktualisieren um Ihren Apple Service ID zu entsprechen: clientId Auf 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

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

protectedTokens

Bei Fehlschlagen der Authentifizierung:

• Service-ID-MismatchÜberprüfen Sie, ob Ihre Service-ID in beiden Apple-Entwicklerportal und Ihrem code übereinstimmt
• Rückkehr-URL nicht konfiguriertStellen 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 Service-ID in den Supabase Apple-Anbieter-Einstellungen korrekt konfiguriert ist
• Überprüfen Sie das Beispiel-App code als Referenz

Fortsetzen Sie von Supabase Apple Login on Web

Wenn Sie Supabase Apple Login on Web für die Planung der Authentifizierung und der Kontoflows verwenden, verbinden Sie es mit Mit @capgo/capacitor-social-login für die native Fähigkeit in Mit @capgo/capacitor-social-login, @capgo/capacitor-social-login für die Implementierungsdetail 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.