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 Dieses Handbuch erklärt die wichtigsten Konzepte und zeigt, wie es verwendet werden kann.

Mit der Authentifizierungshilfe

The authenticateWithAppleSupabase Die Funktion verarbeitet den gesamten Authentifizierungsprozess.

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 Plugin wird mit Ihrem 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 übermittelt mit signInWithIdToken()

Die Hilfsfunktion erkennt automatisch die Web-Plattform 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 erlaubten 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 im Apple Developer Portal konfigurierten Rückruf-URLs entsprechen.
• Stellen Sie sicher, dass sowohl die URL mit als auch ohne Schlusspunkt 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 Supabase-Kunden-ID-Eingabe (getrennt durch Kommas) bereitstellen.

Die Hilfsfunktion aktualisieren

Wenn Sie die authenticateWithAppleSupabase Hilfsfunktion verwenden, müssen Sie müssen aktualisieren Sie clientId um Ihrem Apple-Dienst-ID 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,
  },
});

Kritisch

Ersatz 'your.service.id.here' mit Ihrer tatsächlichen Apple-Dienst-ID (demselben Wert, den Sie im Apple-Entwicklerportal konfiguriert haben)

Fehlerbehebung

Wenn die Authentifizierung fehlschlägt:

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

Fortsetzen Sie von Supabase Apple Login auf Web

Wenn Sie Live Update verwenden Apple-Login mit Supabase auf Web Mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login Mit @capgo/capacitor-Social-Login für die native Fähigkeit in Verwendung 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-Biometrik Für die Implementierungsdetails in @capgo/capacitor-Native-Biometrik und Zwei-Faktor-Authentifizierung Für die Implementierungsdetails in Zwei-Faktor-Authentifizierung.