Supabase-Integration-Einführung

Übersicht

Diese Anleitung führt Sie durch die Einrichtung der Supabase-Authentifizierung mit dem Capacitor-Social-Login-Plugin. Diese Integration ermöglicht es Ihnen, native soziale Anmeldeanbieter (Google, Apple, Facebook, Twitter) auf mobilen Plattformen zu verwenden, während Sie gleichzeitig Supabase-Auth für die Backend-Authentifizierung und PostgreSQL für die Datenspeicherung nutzen.

Was Sie lernen werden

• Konfiguration der Supabase-Authentifizierung
• Integrieren Sie den Capacitor-Social-Login-Plugin mit Supabase Auth
• Plattform-spezifische Einrichtung für Android, iOS und Web
• Sichere Verarbeitung von Nonces für Supabase

Was Sie benötigen

Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:

1. Ein Supabase-Projekt

   • Erstellen Sie ein Projekt bei Supabase-Dashboard
   • Google OAuth-Anbieter aktivieren
   • Ermitteln Sie die URL und den Anon-Key Ihres Supabase-Projekts

2. Supabase JS SDK

   • Installieren Sie Supabase in Ihrem Projekt:

     npm install @supabase/supabase-js

3. Ein Capacitor-Projekt

   • Ein bestehendes Capacitor-Anwendungsprojekt
   • Capacitor-Social-Login-Plugin installiert:

     npm install @capgo/capacitor-social-login
     npx cap sync

4. Plattform-spezifische Google-Einrichtung

   • Complete the Google Sign-In-Einrichtung für Ihre Zielplattformen:
     • Google-Login-Android-Einrichtung
     • Google-Login-iOS-Einrichtung
     • Google-Login-Web-Einrichtung

Beispielanwendung

Ein vollständiges funktionierendes Beispiel ist im Repository verfügbar:

Code Repository: Sie können das code Repository hier finden

Das Beispiel-App demonstriert:

• E-Mail-/Passwort-Authentifizierung mit Supabase
• Google-Sign-In-Integration (Android, iOS und Web)
• Aus einem einfachen Schlüssel-Wert-Speicher mit Supabase PostgreSQL Tabellen
• Benutzer-spezifische Daten-Speicherung mit Row Level Security (RLS)

Implementierungs Details

Nonce-Handling

Supabase erfordert eine besondere Nonce-Handling für die Sicherheit. Die Implementierung folgt der React Native Google Sign In Dokumentation:

• Einen rawNonce (URL-sicheren zufälligen String)
• Mit SHA-256 hashen, um nonceDigest
• Passen nonceDigest zu Google Sign-In
• Passwort rawNonce zu Supabase (Supabase hash es es intern für die Vergleichbarkeit)

JWT-Validierung

Die Beispielimplementierung enthält eine JWT-Validierung, um sicherzustellen, dass:

• Der Token-Zielgruppe entspricht Ihren konfigurierten Google-Kunden-IDs
• Der Nonce entspricht dem erwarteten Digest
• Automatische Wiederholung bei Validierungsfehlern (insbesondere wichtig für iOS)

Plattform-spezifische Überlegungen

• iOS: Token caching kann zu Nonce-Problemen führen - die Implementierung handhabt dies automatisch.
• Web: Muss aufgerufen werden isLoggedIn() auf dem Mount, um OAuth-Redirects zu handhaben.
• Android: Standard-Implementierung mit SHA-1-Fingerprint-Konfiguration.

Zukünftige Schritte

Fortsetzen mit den Setup-Anleitungen:

• Supabase Google Login - Allgemeine Setup - Übersicht und Voraussetzungen
• Android-Setup - Androidspezifische Konfiguration
• iOS-Einrichtung - iOS-spezifische Konfiguration
• Web-Einrichtung - Web-spezifische Konfiguration

Apple Sign-In

• Supabase Apple Login - Allgemeine Einrichtung - Übersicht und Voraussetzungen
• iOS-Einrichtung - iOS-spezifische Konfiguration
• Android-Einrichtung - Androidspezifische Konfiguration

Fortsetzung aus Supabase-Integration-Einführung

Wenn Sie Authentifizierung und Account-Flüsse planen und verwenden Supabase-Integration-Einführung um es mit Verwenden Sie @capgo/capacitor-social-login für die native Fähigkeit in Verwenden Sie @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-biometrische für die Implementierungsdetails in @capgo/capacitor-native-biometrische, und Zwei-Faktor-Authentifizierung für die Implementierungsdetails in Zwei-Faktor-Authentifizierung.