Zum Inhalt springen
Capgo

Einführung in die Supabase-Integration

Übersicht

Section titled “Übersicht”

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

Was Sie lernen werden

Section titled “Was Sie lernen werden”
  • Wie Sie Supabase Authentication konfigurieren
  • Wie Sie das Capacitor Social Login Plugin mit Supabase Auth integrieren
  • Plattformspezifische Einrichtung für Android, iOS und Web
  • Wie Sie Nonces sicher für Supabase handhaben

Was Sie benötigen

Section titled “Was Sie benötigen”

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

  1. Ein Supabase-Projekt

    • Erstellen Sie ein Projekt im Supabase Dashboard
    • Aktivieren Sie den Google OAuth-Provider
    • Holen Sie sich Ihre Supabase-Projekt-URL und Anon Key

  2. Supabase JS SDK

    • Installieren Sie Supabase in Ihrem Projekt:
      Terminal-Fenster
      npm install @supabase/supabase-js

  3. Ein Capacitor-Projekt

    • Eine bestehende Capacitor-Anwendung
    • Capacitor Social Login Plugin installiert:
      Terminal-Fenster
      npm install @capgo/capacitor-social-login
      npx cap sync

  4. Plattformspezifische Google-Einrichtung

Beispielanwendung

Section titled “Beispielanwendung”

Eine vollständige funktionsfähige Beispielanwendung ist im Repository verfügbar:

Code-Repository: Sie finden das Code-Repository hier

Die Beispiel-App demonstriert:

  • E-Mail/Passwort-Authentifizierung mit Supabase
  • Google Sign-In-Integration (Android, iOS und Web)
  • Einen einfachen Schlüssel-Wert-Speicher unter Verwendung von Supabase PostgreSQL-Tabellen
  • Benutzerspezifische Datenspeicherung mit Row Level Security (RLS)

Wichtige Implementierungsdetails

Section titled “Wichtige Implementierungsdetails”

Nonce-Behandlung

Section titled “Nonce-Behandlung”

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

  • Generieren Sie eine rawNonce (URL-sichere Zufallszeichenkette)
  • Hashen Sie sie mit SHA-256, um nonceDigest zu erhalten
  • Übergeben Sie nonceDigest an Google Sign-In
  • Übergeben Sie rawNonce an Supabase (Supabase hasht sie intern für den Vergleich)

JWT-Validierung

Section titled “JWT-Validierung”

Die Beispielimplementierung umfasst JWT-Validierung, um Folgendes sicherzustellen:

  • Das Token-Publikum stimmt mit Ihren konfigurierten Google Client IDs überein
  • Die Nonce stimmt mit dem erwarteten Digest überein
  • Automatischer Wiederholungsversuch bei Validierungsfehlern (besonders wichtig für iOS)

Plattformspezifische Überlegungen

Section titled “Plattformspezifische Überlegungen”
  • iOS: Token-Caching kann Nonce-Probleme verursachen - die Implementierung behandelt dies automatisch
  • Web: Muss isLoggedIn() beim Mounten aufrufen, um OAuth-Redirects zu handhaben
  • Android: Standard-Implementierung mit SHA-1-Fingerabdruck-Konfiguration

Nächste Schritte

Section titled “Nächste Schritte”

Fahren Sie mit den Einrichtungsleitfäden fort: