Apple-Login bei Supabase - 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 Authentifizierungsmethode, die auf iOS, Android und Web-Plattformen funktioniert.

Voraussetzungen

Stellen Sie sicher, dass Sie folgende haben:

1. Einen Supabase-Projekt erstellt haben

2. Die Apple Login Allgemeine Einstellungen Anleitung zur Einrichtung von Apple OAuth-Zugriffscodes

3. Die jeweils plattformspezifischen Anleitungen haben Sie befolgt, um die Apple OAuth-Zertifikate für Ihre Zielplattform einzurichten:

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

   Hinweis

   Bevor Sie mit der 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-Id der gleiche wie Ihr App-ID. Für Android und Web ist der Client-Id der gleiche wie Ihre Service-ID. Sie werden sie in Schritt 7 dieser Anleitung verwenden.

Apple OAuth-Anbieter in Supabase aktivieren

1. Gehe zu Ihrem Supabase-Dashboard

2. Klicken Sie auf Ihr Projekt

   

3. Gehe zu dem Authentication Menü

   

4. Klicken Sie auf die Providers tab

   

5. Finde den Apple Anbieter

   

6. Aktiviere den Apple Anbieter

   

7. Füllen Sie die Client-ID-Konfiguration aus.

   Hinweis

   Wenn Sie Apple-Login für iOS verwenden, ist die Kunden-ID die gleiche wie Ihre App-ID. Wenn Sie Apple-Login für Android oder Web verwenden, ist die Kunden-ID die gleiche wie Ihre 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 KEINE EINRICHTUNGEN erfordern Secret key (for OAuth). Wir werden eine benutzerdefinierte Backend-Implementierung durchführen, um den Apple-Login zu handhaben.

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

Mit der Authentifizierungshilfe

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

• Apple Sign-In mit plattform-spezifischer Konfiguration initialisiert
• Die Authentifizierungsablaufhandlung (native auf iOS, OAuth-Redirect auf Android/Web) handhabt
• Das Identitäts-Token von Apple extrahiert
• Anmeldet sich bei Supabase mit dem Identitäts-Token

Vollständige Implementierung

Die vollständige Implementierung ist in der Beispiel-App’s supabaseAuthUtils.ts file.

Basic Usage

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)
• AndroidVerwendet OAuth-Redirect-Flow mit Backend-Edge-Funktion (erfordert Service-ID)
• WebVerwendet 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 verwendet wird, um mit Supabase zu authentifizieren, indem man supabase.auth.signInWithIdToken().

Fortsetzen von Supabase Apple Login - Allgemeine Einstellungen

Wenn Sie Capgo verwenden Supabase Apple Login - Allgemeine Einstellungen zur Planung der Authentifizierung und Account-Flows verwenden, verbinden Sie es mit Mit @capgo/capacitor-social-login zur nativen Fähigkeit in Mit @capgo/capacitor-social-login, @capgo/capacitor-Social-Login zur Implementierungsdetail in @capgo/capacitor-social-login, @capgo/capacitor-Passkey zur Implementierungsdetail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometrisch zur Implementierungsdetail in @capgo/capacitor-native-biometric, und Zwei-Faktor-Authentifizierung zur Implementierungsdetail in Zwei-Faktor-Authentifizierung.