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 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 context":"HTML text fragment from a longer Capgo UI string (parent key `read_the_style_guide`). Page/area: Capgo marketing website. Role: Website copy sentence. Seen in: page contributing.astro. Message key `read_the_style_guide` (Read The Style Guide)." gelesen haben ("Lesen Sie die Style Guide"). Anleitung zur Einrichtung von Apple OAuth-Zertifikaten

3. Folgen Sie den jeweils plattform-spezifischen Anleitungen, um die Apple OAuth-Zertifikate für Ihre Zielplattform einzurichten:

   • Einstellungen für Android
   • Einstellungen für iOS
   • Einstellungen für Web

   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 Ihr Service-Id.

1. Apple OAuth-Anbieter in Supabase aktivieren Supabase-Dashboard

2. Klicken Sie auf Ihr Projekt

   

3. Gehen Sie zum Authentication Menü

   

4. Klicken Sie auf die Providers Registerkarte

   

5. Finden Sie den Apple Anbieter

   

6. Apple-Anbieter aktivieren Apple Anbieter

   

7. Konfiguriere den Client-ID-Eintrag:

   Hinweis

   Beim Apple-Login für iOS ist die Client-ID gleich deinem App-ID. Beim Apple-Login für Android oder Web ist die Client-ID gleich deiner Service-ID. Beim Einsatz beider benötigst du beide, die App-ID und die Service-ID.

   

8. Klicke auf den Save Schaltfläche

   

   Anmerkung

   Sie KEINE EINRICHTUNG NOTWENDIG Einrichtung Secret key (for OAuth). Wir werden eine benutzerdefinierte Backendimplementierung 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-Anmeldeprozess mit Supabase handhabt. Diese Funktion:

• Initialisiert Apple-Anmeldung mit plattform-spezifischer Konfiguration
• Handhabt die Authentifizierungsablauf (native auf iOS, OAuth-Redirect auf Android/Web)
• Identitäts-Token extrahiert
• Mit dem Identitäts-Token bei Supabase anmeldet

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 Sign-In (kein Redirect-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 liefert ein Identitäts-Token von Apple, 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 verwenden Wenn Sie Supabase Apple Login - Allgemeine Einstellungen verwenden um die Authentifizierung und die Kontenflüsse zu planen, 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-biometric, und Zwei-Faktor-Authentifizierung Für die Implementierungsdetails in Zwei-Faktor-Authentifizierung.