Zum Inhalt springen
Capgo - Live-Updates für Capacitor-Apps Capgo

Supabase-Integration-Einführung

Übersicht

Abschnitt mit dem Titel “Ü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 Supabase Auth für die Backend-Authentifizierung und PostgreSQL für die Datenspeicherung nutzen.

Was Sie lernen werden

Abschnitt mit dem Titel “Was Sie lernen werden”
  • Wie Sie Supabase-Authentifizierung konfigurieren
  • Wie Sie das Capacitor-Social-Login-Plugin mit Supabase Auth integrieren
  • Plattform-spezifische Einrichtung für Android, iOS und Web
  • Wie Sie Nonces sicher handhaben für Supabase

Was Sie benötigen

Abschnitt mit dem Titel “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
    • Holen Sie sich die URL und den anonymen Schlüssel Ihres Supabase-Projekts

  2. Supabase JS SDK

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

  3. Ein Capacitor-Projekt

    • Ein bestehendes Capacitor-Anwendungsprojekt
    • Capacitor-Social-Login-Plugin installiert:
      Terminalfenster
      npm install @capgo/capacitor-social-login
      npx cap sync

  4. Plattform-spezifische Google-Einrichtung

Beispielanwendung

Beispielanwendung

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

Code Repository: Sie finden das code-Repository hier

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

Abschnitt mit dem Titel “Schlüssel Implementierungs Details”

Nonce-Handling

Abschnitt mit dem Titel “Nonce-Handling”

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

  • Erstelle einen rawNonce (URL-sichere zufällige Zeichenkette)
  • Hash es mit SHA-256, um zu erhalten nonceDigest
  • Übermitteln Sie nonceDigest an Google Sign-In
  • Übermitteln Sie rawNonce an Supabase (Supabase hash es intern für die Vergleichbarkeit)

JWT-Validierung

Abschnitt mit dem Titel “JWT-Validierung”

Die Beispielimplementierung umfasst eine JWT-Validierung, um sicherzustellen:

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

Plattformspezifische Überlegungen

Abschnitt mit dem Titel “Plattformspezifische Überlegungen”
  • iOSToken-Caching kann Nonce-Probleme verursachen - die Implementierung handhabt dies automatisch
  • WebMuss aufgerufen werden isLoggedIn() on mount, um OAuth-Redirects zu handhaben
  • AndroidStandard-Implementierung mit SHA-1-Fingerprint-Konfiguration

Nächste Schritte

Abschnitt mit dem Titel “Nächste Schritte”

Mit den Einrichtungshilfen fortfahren:

Apple Sign-In

Abschnitt mit dem Titel “Apple Sign-In”

Weitermachen von Supabase-Integration-Einleitung

Abschnitt mit dem Titel “Weitermachen von Supabase-Integration-Einleitung”

Wenn Sie Supabase-Integration-Einleitung für die Planung der Authentifizierung und der Kontenflüsse verwenden, verbinden Sie es mit Mit @capgo/capacitor-Social-Login für die native Fähigkeit in @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.