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 Ihnen das Verwenden von nativen sozialen Anmeldeanbietern (Google, Apple, Facebook, Twitter) auf mobilen Plattformen, während Sie die Supabase-Authentifizierung für die Backend-Authentifizierung und PostgreSQL für die Datenspeicherung nutzen.

Was Sie lernen werden

• Konfiguration der Supabase-Authentifizierung
• Integration des Capacitor Social-Login-Plugins mit der Supabase-Authentifizierung
• Plattform-spezifische Einrichtung für Android, iOS und Web
• Sichere Verarbeitung von Nonces für Supabase

Was Sie benötigen

Ein Supabase-Projekt

1. Ein Supabase-Projekt

   • Ein Projekt bei Supabase-Dashboard
   • Google OAuth-Anbieter aktivieren
   • Erhalten 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. Plattformspezifische Google-Einrichtung

   • Erstellen Sie die Google-Anmeldeseite für Ihre Zielplattformen ab:
     • Google-Anmeldung Android-Einrichtung
     • Google-Anmeldung iOS-Einrichtung
     • Google-Anmeldung Web-Einrichtung

Beispielanwendung

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

Code Repository: Sie finden das code Repository hier

Die Beispielanwendung demonstriert:

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

Schlüssel-Implementierungs-Details

Nonce-Verwaltung

Supabase erfordert eine besondere Nonce-Verwaltung zur Sicherheit. Die Implementierung folgt der React Native Google Sign In-Dokumentation:

• Einen rawNonce (URL-sicheren zufälligen String)
• Hashen Sie es mit SHA-256, um zu erhalten nonceDigest
• Passwort nonceDigest zur Google-Anmeldung
• Passwort rawNonce zum Supabase (Supabase hash es intern für die Vergleichsliste)

JWT-Validierung

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

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

Plattform-spezifische Überlegungen

• iOS: Token-Caching kann zu Nichtzahlenproblemen führen - die Implementierung handhabt dies automatisch
• Web: Muss auf dem Mount aufrufen, um OAuth-Weiterleitungen zu handhaben isLoggedIn() Android
• : Standard-Implementierung mit SHA-1-Fingerprint-KonfigurationZukünftige Schritte

Abschnitt mit Titel “Zukünftige Schritte”

Supabase Google Login - Allgemeine Einrichtung

• Continue with the setup guides: Supabase Google Login - General Setup - Übersicht und Voraussetzungen
• Android-Einrichtung - Android-spezifische 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 - Android-spezifische Konfiguration

Fortsetzung aus Supabase-Integration-Einleitung

Wenn Sie die Verwendung von Supabase-Integration-Einleitung zum Planen der Authentifizierung und der Kontoflows verwenden, verbinden Sie sie mit Mit @capgo/capacitor-social-login zur nativen Fähigkeit in Mit @capgo/capacitor-social-login, @capgo/capacitor-social-login zur Implementierungsdetail 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 Zwei-Faktor-Authentifizierung für die Implementierungsdetails in Zwei-Faktor-Authentifizierung.