Allgemeine Einstellungen für Supabase Apple Login

Ü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 Apple Login Allgemeine Einrichtung Anleitung zur Einrichtung von Apple OAuth-Zugriffsberechtigungen gelesen haben

3. Die jeweils plattform-spezifischen Anleitungen zur Einrichtung von Apple OAuth-Zugriffsberechtigungen für Ihre Zielplattform befolgt haben:

   • Android-Einrichtung
   • 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 der Client-ID der gleiche wie Ihr App-ID. Für Android und Web ist der Client-ID der gleiche wie Ihr Service-ID. Sie werden sie in Schritt 7 dieses Leitfadens verwenden.

Aktivieren von Apple OAuth-Anbieter in Supabase

1. Gehe zu Ihrem Supabase-Dashboard

2. Klicken Sie auf Ihr Projekt

   

3. Geht es zu dem Authentication Menü

   

4. Klicken Sie auf die Providers Registerkarte

   

5. Finden Sie den Apple Anbieter

   

6. Aktivieren Sie den Apple Anbieter

   

7. Konfiguration des Client-IDs einfüllen:

   Hinweis

   Wenn Sie Apple Login für iOS verwenden, ist die Client-ID gleich Ihrer 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 DU HABEN KEINE Setup Secret key (for OAuth)erforderlich. Wir werden eine benutzerdefinierte Backend-Implementierung durchführen, um die Apple-Anmeldung zu handhaben.

Hier haben Sie nun Apple Sign-In mit Supabase-Authentifizierung aktiviert 🎉

Mit der Authentifizierungshilfe

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

• Initialisiert Apple Sign-In mit plattformspezifischer Konfiguration
• Behandelt den Authentifizierungsflow (native auf iOS, OAuth-Redirect auf Android/Web)
• Entnimmt den Identitäts-Token von Apple
• Meldet sich bei Supabase mit dem Identitäts-Token an

Vollständige Implementierung

Die vollständige Implementierung ist in den Beispiel-Anwendung supabaseAuthUtils.ts Datei.

Grundlegender Einsatz

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-Anmeldung (keine Umleitung der URL erforderlich, verwendet automatisch die Bundle-ID)
• Android: Verwendet OAuth-Umleitung 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 zum Authentifizieren mit Supabase verwendet wird supabase.auth.signInWithIdToken().