Supabase Apple Login - Allgemeine Einstellungen

Übersicht

Diese Anleitung hilft Ihnen, 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. Ein 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 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 die Client-ID gleich Ihrer App-ID. Für Android und Web ist die Client-ID gleich Ihrer Dienst-ID. Sie verwenden sie im Schritt 7 dieser Anleitung.

Apple OAuth-Anbieter in Supabase aktivieren

1. Gehe zu Ihrem Supabase-Dashboard

2. Klicken Sie auf Ihr Projekt

   

3. Gehe zum Authentication Menü

   

4. Klicken Sie auf die Providers Registerkarte

   

5. Finden Sie den Apple Anbieter

   

6. Aktivieren Sie 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 Schaltfläche

   

   Hinweis

   Sie DU HABEN KEINE PFLICHT Einrichtung Secret key (for OAuth). Wir werden eine benutzerdefinierte Backend-Implementierung durchführen, um die Apple-Anmeldung 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-Sign-In-Flow mit Supabase bearbeitet. Diese Funktion:

• Initialisiert Apple-Sign-In mit plattform-spezifischer Konfiguration
• Bearbeitet 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 der Beispiel-App’s supabaseAuthUtils.ts Datei verfügbar.

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-Anmelden (keine Umleitung der URL erforderlich, verwendet automatisch die Bundle-ID)
• Android: Verwendet OAuth-Umleitungsfluss mit Backend-Edge-Funktion (erfordert Service-ID)
• Web: Verwendet OAuth-Popup-Fluss (erfordert Service-ID und aktuelle Seite-URL als Umleitung)

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

Bleiben Sie bei Supabase Apple Login - Allgemeine Einstellungen

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