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 anonymen Schlüssel 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. Plattformspezifische Google-Einstellungen

   • Complete the Google Sign-In setup for your target platforms:
     • Google Login Android Setup
     • Google Login iOS Setup
     • Google Login Web Setup

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)
• Auswahl eines einfachen Schlüssel-Wert-Speichers mit Supabase PostgreSQL Tabellen
• Benutzer-spezifische Daten speichern mit Row Level Security (RLS)

Implementierungs Details

Nonce-Handling

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

• Erstellen Sie ein rawNonce (URL-sicherer zufälliger String)
• Hashen Sie es mit SHA-256, um nonceDigest
• Passen Sie es an nonceDigest zum Google Sign-In
• Pass rawNonce zum Supabase (Supabase hash es es intern für die Vergleichbarkeit )

JWT-Validierung

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

• Der Token-Zielpublikumsname entspricht Ihren konfigurierten Google-Kunden-IDs
• Der Zufallswert 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() on 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-Anmeldung

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

Fortfahren von Supabase-Integration-Einführung

Wenn Sie Authentifizierung und Account-Flüsse planen, verwenden Sie Supabase-Integration-Einführung um es mit Mit @capgo/capacitor-social-login zur nativen Fähigkeit in Mit @capgo/capacitor-social-login, @capgo/capacitor-social-login zur Implementierungsdetails in @capgo/capacitor-social-login, @capgo/capacitor-passkey zur Implementierungsdetails in @capgo/capacitor-passkey, @capgo/capacitor-native-biometrisch für die Implementierungsdetails in @capgo/capacitor-native-biometrisch, und Zwei-Faktor-Authentifizierung für die Implementierungsdetails in Zwei-Faktor-Authentifizierung.