Supabase Apple Login - Allgemeine Einstellungen

Übersicht

Diese Anleitung hilft Ihnen, Apple Sign-In mit Supabase-Authentifizierung zu integrieren. Apple Sign-In bietet eine sichere, auf Privatsphäre ausgerichtete Authentifizierungs-Methode, die auf iOS, Android und Web-Plattformen funktioniert.

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:

1. Einen Supabase-Projekt erstellt haben

2. Die Anleitung Apple Login General Setup gelesen haben, um Apple OAuth-Zertifikate einzurichten

3. Die jeweils für Ihre Zielplattform relevanten Anleitungen zu Apple OAuth-Zertifikaten für Ihre Zielplattform befolgt haben

   • Android-Einstellungen
   • iOS-Einrichtung
   • Web-Einrichtung

   Hinweis

   Bevor Sie das Supabase-Tutorial beginnen, müssen Sie die Client-IDs für die Plattformen erstellen, die Sie verwenden möchten.

   Für iOS ist die Client-ID die gleiche wie Ihre App-ID. Für Android und Web ist die Client-ID die gleiche wie Ihre Service-ID. Sie verwenden sie im Schritt 7 dieses Leitfadens.

Ermächtigung des Apple OAuth-Anbieters in Supabase

1. Gehe zu Ihrem Supabase-Dashboard

2. Klicken Sie auf Ihr Projekt

   

3. Gehe zu dem Authentication Menü

   

4. Klicke auf das Providers Menü

   

5. Finde den Apple Anbieter

   

6. Aktiviere den Apple Anbieter

   

7. Füllen Sie die Client-ID-Konfiguration ein:

   Hinweis

   Wenn Sie Apple Login für iOS verwenden, ist die Client-ID gleich Ihrem App-ID. Wenn Sie Apple Login für Android oder Web verwenden, ist die Client-ID gleich Ihrer Service-ID. Wenn Sie beide verwenden, müssen Sie sowohl die App-ID als auch die Service-ID bereitstellen.

   

8. Klicken Sie auf den Save Button

   

   Hinweis

   Sie MANDETT NICHT HINZUFÜGEN Setup Secret key (for OAuth)Wir werden eine benutzerdefinierte Backend-Implementierung erstellen, um das Apple-Login zu handhaben.

Voilà, Sie haben nun Apple Sign-In mit Supabase-Authentifizierung aktiviert 🎉

Mithilfe der Authentifizierungshilfe

Die vollständige Implementierung umfasst eine Hilfsfunktion authenticateWithAppleSupabase() die den gesamten Apple-Login-Flow mit Supabase handhabt. Diese Funktion:

• Initialisiert Apple-Login mit plattform-spezifischer Konfiguration
• Handhabt die Authentifizierungsflow (native auf iOS, OAuth-Redirect auf Android/Web)
• Entnimmt die Identitäts-Token von Apple
• Melde sich bei Supabase mit dem Identitäts-Token an

Vollständige Implementierung

Die vollständige Implementierung ist im Beispiel-Apps supabaseAuthUtils.ts Datei.

Grundlegende Verwendung

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

Die Hilfsfunktion handhabt automatisch Plattform-spezifische Unterschiede:

• iOS: Verwendet native Apple-Sign-In (keine Umleitung-URL erforderlich, verwendet automatisch die Bundle-ID)
• Android: Verwendet OAuth-Redirect-Flow mit Backend-Edge-Funktion (erfordert Service-ID)
• Web: Verwendet OAuth-Popup-Flow (erfordert Service-ID und aktuelle Seite-URL als Redirect)

Die Funktion gibt ein Identitäts-Token von Apple zurück, das dann zur Authentifizierung mit Supabase verwendet wird. supabase.auth.signInWithIdToken().

Weitermachen von Supabase Apple Login - Allgemeine Einstellungen

Wenn Sie " Supabase Apple Login - Allgemeine Einstellungen " zur Planung der Authentifizierung und Account-Flows verwenden, verbinden Sie es mit " Verwenden Sie @capgo/capacitor-social-login für die native Fähigkeit in Verwenden Sie @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.