Supabase Apple Login - Allgemeine Einstellungen

Übersicht

Diese Anleitung hilft Ihnen dabei, Apple Sign-In mit Supabase Authentication 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 zum Einrichten von Apple OAuth-Zertifikaten für Ihre Zielplattform befolgt haben

   • Android Setup
   • iOS-Einrichtung
   • Webeinrichtung

   Hinweis

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

   Für iOS ist der Client-IDs gleich Ihrem App-ID. Für Android und Web ist der Client-IDs gleich Ihrem Service-ID. Sie werden sie in Schritt 7 dieser Anleitung verwenden.

Apple OAuth-Anbieter in Supabase aktivieren

1. Gehen Sie zu Ihrem Supabase-Dashboard

2. Klicken Sie auf Ihr Projekt

   

3. Gehe zum Menü Authentication menu

   

4. Klicke auf die Providers tab

   

5. Finde den Apple provider

   

6. Aktiviere den Apple provider

   

7. Die Client-ID-Konfiguration ausfüllen:

   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 Knopf

   

   Hinweis

   Sie DU HABEN KEINE PFLICHT Setup Secret key (for OAuth)Wir werden eine benutzerdefinierte Backend-Implementierung durchführen, um das Apple-Login zu handhaben.

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

Mithilfe der Authentifizierungs-Hilfe

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 den Identitäts-Token von Apple
• Melde sich bei Supabase mit dem Identitäts-Token an

Vollständige Implementierung

Die vollständige Implementierung ist in der Beispiel-App’s 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 der URL erforderlich, verwendet automatisch die Bundle-ID)
• Android: Verwendet den OAuth-Redirect-Flow mit Backend-Edge-Funktion (erfordert Service-ID)
• Web: Verwendet den 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 zum Authentifizieren mit Supabase verwendet wird supabase.auth.signInWithIdToken().

Weitermachen von Supabase Apple Login - Allgemeine Einstellungen

zum Planen der Authentifizierung und Kontoflows verwenden, verbinden Sie es mit Mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login für die native Fähigkeit in Mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login Using @capgo/capacitor-social-login for the native capability in Using @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.