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-Einrichtung
• the Supabase Apple Login - Allgemeine Einrichtung.

Implementation

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 Authentifizierungshilfe

Abschnitt mit dem Titel “Mit der Authentifizierungshilfe”

The 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-Fluss:

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: Benutzer authentifiziert sich bei Apple im Popup
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 passt alles entsprechend an.

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

Richtlinien-URL

• Bei Web wird die Umleitungs-URL automatisch auf window.location.href (aktuelle Seite-URL)
• Dies muss einer der in Apple Developer Portal konfigurierten Rückgabeanzeigen entsprechen
• 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 wie folgt:

• 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 Kommas) bereitstellen.

Aktualisieren Sie die Hilfsfunktion

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

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).

Problembehandlung

Authentifizierung fehlgeschlagen:

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

Fortsetzen Sie von Supabase Apple Login on Web

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