Supabase Apple Login - Allgemeine Einstellungen

Übersicht

Dieses Leitfaden 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)."], 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:

   • 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 Ihr 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 bitte 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-Einstellung:

   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

   

   Anmerkung

   Sie NICHT ZU Einrichten 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 🎉

Mit der Authentifizierungshilfe

Die vollständige Implementierung umfasst eine Hilfsmethode 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 im 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 Apple Login - Allgemeine Einstellungen bei Supabase

Wenn Sie Apple Login - Allgemeine Einstellungen bei Supabase verwenden Wenn Sie Apple Login - Allgemeine Einstellungen bei Supabase 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 Zweifaktor-Authentifizierung Für die Implementierungsdetails in Zweifaktor-Authentifizierung.