Einführung zur Supabase-Integration

Übersicht

Diese Anleitung führt Sie durch die Einrichtung der Supabase-Authentifizierung mit dem Capacitor-Social-Login-Plugin. Diese Integration ermöglicht die Verwendung von native sozialen Anmeldeanbietern (Google, Apple, Facebook, Twitter) auf mobilen Plattformen, während Supabase Auth für die Backend-Authentifizierung und PostgreSQL für die Datenspeicherung genutzt wird.

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
   • Aktivieren Sie den Google OAuth-Anbieter
   • 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

   • Abschließen Sie die Google-Sign-In-Einrichtung für Ihre Zielplattformen:
     • 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)
• Ein einfaches Schlüssel-Wert-Speicher mit Supabase PostgreSQL-Tabellen
• Benutzer-spezifische Daten speicherung mit Row Level Security (RLS)

Schlüssel Implementierungs Details

Nonce-Handling

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

• Erstelle ein rawNonce __CAPGO_KEEP_0__
• Hash es mit SHA-256, um nonceDigest
• Passwort nonceDigest an Google Sign-In
• Passwort rawNonce an Supabase (Supabase hash es es intern für die Vergleichbarkeit)

JWT-Validierung

Die Beispielimplementierung umfasst eine JWT-Validierung, um sicherzustellen:

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

Plattformspezifische Überlegungen

• iOS: Token-Caching kann zu Zufallswert-Problemen führen - die Implementierung handhabt dies automatisch
• Web: __CAPGO_KEEP_0__ muss aufgerufen werden isLoggedIn() Bei der Initialisierung muss aufgerufen werden, um OAuth-Weiterleitungen zu verarbeiten
• Android: Standardimplementierung mit SHA-1-Fingerprint-Konfiguration

Weitere Schritte

Mit den Einrichtungsleitfäden fortfahren:

• Supabase Google Login - Allgemeine Einrichtung - Übersicht und Voraussetzungen
• Android-Einrichtung - Android-spezifische 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 - Android-spezifische Konfiguration

Bleib weiter bei der Einführung zur Supabase-Integration

Wenn Sie Supabase-Integration zur Planung der Authentifizierung und der Kontenflüsse verwenden, verbinden Sie sie 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.