Supabase Apple Login on 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:

• 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 wichtigsten Konzepte und wie Sie es verwenden können.

Mit der Authentifizierungshilfe

Die Funktion verarbeitet den gesamten Authentifizierungsfluss: authenticateWithAppleSupabase Zwischenablage kopieren

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

Abschnitt mit dem Titel “Wie es funktioniert”

Initialisierung

1. : Die Erweiterung wird mit Ihrer Service-ID und der aktuellen Seite-URL als Redirect-URL initialisiertOAuth-Popup
2. : Öffnet ein Popup-Fenster mit der Apple-OAuth-SeiteBenutzerauthentifizierung
3. : Der Benutzer authentifiziert sich bei Apple im Popup__CAPGO_KEEP_0__
4. Identitäts-Token: Apple 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

Umleitungs-URL

• Bei Web-Apps wird die Umleitungs-URL automatisch auf window.location.href (aktuelle Seite-URL)
• Dies muss einer der im Apple-Entwicklerportal konfigurierten Rückkehr-URLs 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 Supabases Client-ID-Feld (getrennt durch Komma) bereitstellen.

Update die Hilfsfunktion

Wenn Sie die authenticateWithAppleSupabase Hilfsfunktion verwenden, müssen Sie die aktualisieren, um clientId Ihrem Apple-Dienst-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' durch Ihre tatsächliche Apple-Dienst-ID (den gleichen Wert, den Sie im Apple Developer Portal konfiguriert haben).

Schulung

Bei Fehlschlag der Authentifizierung:

• Service-ID-Übereinstimmung: Überprüfen Sie, ob Ihre Service-ID in beiden Apple-Entwicklerportal und Ihrem code übereinstimmt
• Rückgabeanzeige nicht konfiguriert: Stellen Sie sicher, dass Ihre 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 korrekt in den Einstellungen des Apple-Anbieters von Supabase konfiguriert ist
• Review the Beispiel-App code zur Referenz

Fortsetzen Sie von Supabase Apple Login on Web

Wenn Sie Supabase Apple Login on Web zur Planung der Authentifizierung und der Kontoflows verwenden, verbinden Sie es mit Mithilfe von @capgo/capacitor-social-login zur nativen Fähigkeit in Mithilfe von @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.