Supabase Apple Login auf Web

Voraussetzungen

Diese Anleitung hilft Ihnen, Apple Sign-In mit Supabase-Authentifizierung auf Web zu integrieren. Es wird angenommen, dass Sie bereits folgende Schritte abgeschlossen haben:

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

Implementierung

Die vollständige Implementierung ist im Beispiel-Apps- supabaseAuthUtils.ts Datei verfügbar. Diese Anleitung erklärt die Schlüsselkonzepte und wie Sie sie verwenden können.

Verwendung der Authentifizierungshilfe

Der authenticateWithAppleSupabase Funktion

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-Anwendungen verwendet Apple Sign-In einen OAuth-Popup-Flow:

1. Initialisierung: Die Erweiterung wird mit Ihrer Service-ID und der aktuellen Seite als Redirect-URL initialisiert
2. OAuth-Popup: Öffnet ein Popup-Fenster mit der Apple OAuth-Seite
3. Benutzerauthentifizierung: Benutzer authentifiziert sich mit 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 mithilfe von signInWithIdToken()

Die Hilfsfunktion erkennt automatisch die Web-Plattform und konfiguriert alles entsprechend.

Wichtige Hinweise

Dienst-ID-Konfiguration

• Web erfordert Ihre Apple-Dienst-ID (gleichbedeutend mit Android)
• Die Dienst-ID muss in Apple Developer Portal mit den richtigen Rückruf-URLs konfiguriert werden
• Stellen Sie sicher, dass Ihr Domain in der Apple Developer Portal in den erlaubten Domains hinzugefügt ist

Zurück-URL

• Bei Web-Apps wird die Zurück-URL automatisch auf window.location.href (aktuelle Seite-URL)
• Dies muss einer der in der Apple Developer Portal konfigurierten Rückkehr-URLs entsprechen
• Stellen Sie sicher, dass sowohl die URL mit als auch ohne Schlusspunkt in der Apple Developer Portal konfiguriert sind

Supabase Client ID

In Supabase konfigurieren Sie Ihren Apple-Anbieter wie folgt:

• Client ID: Ihre Apple-Dienst-ID (z.B. com.example.app.service)

If Sie auch iOS verwenden, müssen Sie beide App-ID und Service-ID in der Client-ID-Feld von Supabase (getrennt durch Kommas) bereitstellen.

Die Hilfsfunktion aktualisieren

Wenn Sie die authenticateWithAppleSupabase Hilfsfunktion verwenden, müssen Sie müssen aktualisieren Sie die clientId um Ihrem Apple-Service-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 Ihrem tatsächlichen Apple-Dienst-ID (demselben Wert, den Sie im Apple-Entwicklerportal konfiguriert haben).

Schulung und Support

Wenn die Authentifizierung fehlschlägt:

• Dienst-ID passt nicht: Überprüfen Sie, ob Ihre Dienst-ID in Apple-Entwicklerportal und in Ihrem code übereinstimmt.
• Rückruf-URL nicht konfiguriert: Stellen Sie sicher, dass die aktuelle Seite-URL (mit und ohne Schlusspunkt) im Apple-Entwicklerportal konfiguriert ist.
• Pop-up-Blocker aktiviert: Ü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 im Apple-Entwicklerportal hinzugefügt ist.
• Supabase-Konfiguration: Überprüfen Sie, ob Ihre Service-ID in den Supabase Apple-Anbieter-Einstellungen korrekt konfiguriert ist
• Review the Beispiel-App code zum Verweis

Fahren Sie mit Supabase Apple Login on Web fort

Wenn Sie Supabase Apple Login on Web verwenden um die Authentifizierung und die Kontenflüsse zu planen, verbinden Sie es mit Mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login für die native Fähigkeit in Mit @capgo/capacitor-social-login, Wenn Sie Supabase Apple Login on Web verwenden, um die Authentifizierung und die Kontenflüsse zu planen, verbinden Sie es mit @capgo/capacitor-social-login für die native Fähigkeit. @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.