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:

• die Apple Login Web-Einrichtung
• die Supabase Apple Login - Allgemeine Einrichtung.

Implementierung

Die vollständige Implementierung ist in der Beispielanwendung supabaseAuthUtils.ts Datei 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: Der Identitäts-Token wird an Supabase übermittelt 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 zulässigen Domains in Apple Developer Portal hinzugefügt ist

Richtlinien-URL

• Auf der Web-Oberfläche wird die Umleitungs-URL automatisch auf window.location.href (aktuelle Seite-URL)
• Dies muss einer der im Apple-Entwicklerportal konfigurierten Rückgabeanzeigen 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 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 der Client-ID-Feld von Supabase (komma-getrennt) bereitstellen.

Aktualisieren Sie die Hilfsfunktion

Wenn Sie die authenticateWithAppleSupabase Hilfsmethode verwenden, müssen Sie müssen aktualisieren, um clientId Ihren 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' mit Ihrer tatsächlichen Apple-Dienst-ID (demselben Wert, den Sie im Apple Developer Portal konfiguriert haben).

Fehlersuche

Wenn die Authentifizierung fehlschlägt:

• Falsche Service-ID: Überprüfen Sie, ob Ihre Service-ID in beiden Apple-Entwicklerportal und Ihrem code übereinstimmt
• Rückgabeanzeige 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 Ihre Service-ID in den Supabase Apple-Anbieter-Einstellungen korrekt konfiguriert ist
• Überprüfen Sie die Beispiel-App code zur Referenz

Fortsetzen Sie von Supabase Apple Login auf Web

Wenn Sie Supabase Apple Login auf Web zur 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-Biometrie für die Implementierungsdetails in @capgo/capacitor-native-Biometrie, und Zweifaktor-Authentifizierung für die Implementierungsdetails in Zweifaktor-Authentifizierung.