Zum Hauptinhalt springen
Capgo-Logo
Anleitung

Einstellung der Supabase-Authentifizierung mit Capacitor Social-Login-Plugin

Erhalten Sie Wissen, wie Sie Supabase-Authentifizierung mit dem Capgo Social-Login-Plugin für eine reibungslose Google-, Apple- und Facebook-Authentifizierung in Ihrer Capacitor-Anwendung integrieren können.

Artikelcredits

Martin Donadieu

Schriftsteller

Valeria

Rezensent

Jordan

Redakteur

Einstellung der Supabase-Authentifizierung mit Capacitor Social-Login-Plugin

Die Einarbeitung von Authentifizierung in mobilen Apps kann komplex sein, aber die Combination mit Supabase mit dem Capgo Social Login-Plugin makes it straightforward. This tutorial will guide you through integrating social authentication (Google, Apple, Facebook) with Supabase in your Capacitor app.

__CAPGO_KEEP_0__ App.

Wozu Supabase mit Social Login verwenden? Supabase @capgo/capacitor-social-login @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login @capgo/capacitor-supabase @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-supabase

  • Einfache soziale Authentifizierung
  • Sichere Token-Verwaltung
  • Kompatibilität über Plattformen hinweg
  • Echtzeit-Datenbankintegration
  • Integrierte Benutzerverwaltung

Voraussetzungen

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

  • Ein Capacitor-Projekt, das eingerichtet ist
  • Ein Supabase-Konto und -Projekt
  • Entwicklerkonten für Ihre ausgewählten sozialen Anbieter (Google, Apple, Facebook)

Schritt 1: Installieren und Konfigurieren des Social-Login-Plugins

Installieren Sie zunächst das Capgo-Social-Login-Plugin:

npm install @capgo/capacitor-social-login
npx cap sync

Siehe die Social Login und Supabase Schritt 2: Einrichten des Supabase-Projekts

Erstellen und Konfigurieren Ihres Supabase-Projekts

Erstellen Sie ein Supabase-Projekt

  1. Gehen Sie zu:

    • supabase.com und melden Sie sich anmelden Klicken Sie
    • Click “Neues Projekt”
    • Wählen Sie Ihre Organisation
    • Ein Projektname (z.B. „Meine App Auth“)
    • Setzen Sie ein Datenbank-Passwort (speichern Sie dies sicher)
    • Wählen Sie Ihre Region (wählen Sie die nächste zu Ihren Benutzern)
    • Klicken Sie “Neues Projekt erstellen”

  2. Ermitteln Sie Ihre Projektanmeldeinformationen:

    • Gehe nach der Erstellung zu Einstellungen > API
    • Kopieren Sie Ihren Projekt-URL (z.B. https://your-project-ref.supabase.co)
    • Kopieren Sie Ihren anon public API-Schlüssel
    • Speichern Sie diese für später in Ihrer App

Konfigurieren Sie die Authentifizierungs-Einstellungen

  1. Authentifizierungs-Einstellungen allgemein einrichten:

    • Gehe zu Authentifizierung > Einstellungen
    • Unter Allgemeine Einstellungen:
      • Setze Site-URL auf die URL deiner App (z.B. https://yourdomain.com oder http://localhost:3000 für die Entwicklung
      • Füge zusätzliche Umleitungs-URLs wenn nötig: 
        http://localhost:3000
https://yourdomain.com
capacitor://localhost (for mobile apps)

  2. E-Mail-Einstellungen konfigurieren (optional, aber empfohlen):

    • Unter SMTP-Einstellungen, Ihre E-Mail-Anbieter konfigurieren
    • Dies aktiviert E-Mail-Bestätigungen und Passwortschutz
    • Für die Entwicklung können Sie die integrierte E-Mail-Dienst verwenden

Soziale Authentifizierungsanbieter aktivieren

  1. Zugriff auf die Anbieter-Sektion:
    • Gehe zu Authentifizierung > Anbieter in Ihrem Supabase-Dashboard
    • Sie sehen eine Liste der verfügbaren sozialen Anbieter
    • Jeder Anbieter hat ein Aktivieren Schaltfläche und Konfigurationsmöglichkeiten

Konfigurieren wir nun jeden sozialen Anbieter im Detail:

Schritt 3: Konfigurieren Sie soziale Anbieter in Supabase

Einstellung von Google-Authentifizierung in Supabase

Zunächst erhalten Sie Ihre Google-OAuth-Zertifikate:

Folgen Sie unserem umfassenden Google-Einrichtungsleitfaden: Einstellung von Google-Authentifizierung

Dieser Leitfaden behandelt:

  • Ein Google Cloud Projekt erstellen
  • OAuth 2.0-Zertifikate für Web, iOS und Android einrichten
  • Die Einwilligungsschleife konfigurieren
  • Die erforderlichen Client-IDs und -Geheimnisse erhalten

Nachdem Sie die Google-Einrichtung abgeschlossen haben, konfigurieren Sie sie in Supabase:

  1. Google-Anbieter in Supabase aktivieren:
    • In Ihrem Supabase-Dashboard gehen Sie zu Authentifizierung > Anbieter
    • Finden Google und klicken Sie auf AN
    • Konfiguration eintragen:
      • Client-ID: Ihre Google OAuth Web Client-ID (aus dem Google Cloud Console)
      • Client-Secret: Ihre Google OAuth Web Client-Secret
      • Rückruf-URL: https://your-project-ref.supabase.co/auth/v1/callback (automatisch ausgefüllt)
    • Klicken “Speichern”

WichtigVerwenden Sie die Web Client ID und Web Client Secret in Supabase, selbst wenn Sie eine mobile App entwickeln. Die mobilen Client-IDs werden separat in der Plugin-Konfiguration verwendet.

Einrichten der Apple-Authentifizierung in Supabase

Erhalten Sie Apple-Zertifikate:

Folgen Sie unserem detaillierten Apple-Einrichtungsleitfaden: Einrichten der Apple-Authentifizierung

Dieses Leitfaden umfasst:

  • Ihre Apple-Entwicklerkonto einrichten
  • Erstellen von App-IDs und Service-IDs
  • Die Funktion "Anmelden mit Apple" konfigurieren
  • Die erforderlichen privaten Schlüssel generieren
  • Plattformspezifische Einrichtung für iOS, Android und Web

Nachdem Sie die Apple-Einrichtung abgeschlossen haben, konfigurieren Sie sie in Supabase:

  1. Apple-Anbieter in Supabase aktivieren:
    • Zum Authentifizierung > Anbieter und klicken Sie auf Apple AN
    • Konfiguration eintragen:
      • Client-ID: Ihre Service-ID-Bezeichner (z.B. com.yourapp.signin)
      • Client-Secret: Generieren Sie diesen JWT mithilfe Ihres Apple-Privatschlüssels (siehe Supabase Apple-Dokumentation für die JWT-Formatierung)
      • Richtlinien-URL: https://your-project-ref.supabase.co/auth/v1/callback (automatisch ausgefüllt)
    • Klicken Sie auf “Speichern”

Hinweis: Die Apple-Authentifizierungseinstellung ist die komplexeste aufgrund der Anforderungen von Apple an Service-IDs, privaten Schlüsseln und JWT-Generation. Folgen Sie unserer Dokumentation sorgfältig für jede Plattform.

Facebook-Authentifizierung in Supabase einrichten

Erhalten Sie Facebook-Zugangsdaten:

Folgen Sie unserem vollständigen Facebook-Einrichtungsleitfaden: Facebook-Authentifizierungseinstellung

Dieses Leitfaden umfasst:

  • Einen Facebook-Entwicklerkonto und -App erstellen
  • Die Facebook-Login-Produkt hinzufügen
  • OAuth-Redirect-URI konfigurieren
  • Den App-Id, App-Secret und Client-Token erhalten
  • Plattform-spezifische Konfiguration für iOS und Android

Nachdem Sie die Facebook-Einrichtung abgeschlossen haben, konfigurieren Sie sie in Supabase:

  1. Facebook-Anbieter in Supabase aktivieren:
    • Gehe zu Authentifizierung > Anbieter und schalte Facebook AN
    • Fülle die Konfiguration aus:
      • Client-ID: Deine Facebook-App-ID
      • Client-Secret: Dein Facebook-App-Secret
      • Richtlinien-URL: https://your-project-ref.supabase.co/auth/v1/callback (auto-filled)
    • Klicken “Speichern”

WichtigFügen Sie sicherzustellen, dass Sie die Supabase-Rückruf-URL (https://your-project-ref.supabase.co/auth/v1/callback) in den gültigen OAuth-Redirect-URI's Ihres Facebook-Apps in den Facebook-Login-Einstellungen. Wichtige Anmerkungen zur Supabase-Konfiguration

Zugriffsstufe auf Ebene der Zeilen (RLS):

Nachdem Sie die Authentifizierung eingerichtet haben, aktivieren Sie die RLS auf Ihren Tabellen

  • Gehe zu
  • Go to Datenbank > Tabellen und aktivieren RLS aktivieren für jede Tabelle
  • Policies erstellen, um den Zugriff auf Daten auf der Grundlage von authentifizierten Benutzern zu steuern

Benutzerverwaltung:

  • Authentifizierte Benutzer in Authentifizierung > Benutzer anzeigen
  • Authentifizierungsereignisse in Authentifizierung > Protokolle überwachen
  • E-Mail-Vorlagen in Authentifizierung > E-Mail-Vorlagen einrichten

Konfiguration überprüfen:

  • Verwenden Sie das integrierte Authentifizierungstestwerkzeug von Supabase
  • Gehe zu Authentifizierung > Benutzer und klicke auf “Invite user” um E-Mail-Flüsse zu testen
  • Überprüfe die Protokolle Abschnitt für Authentifizierungsfehler

Schritt 4: Konfigurieren Sie das Social-Login-Plugin

Jetzt, dass Supabase konfiguriert ist, müssen Sie das Social-Login-Plugin mit den entsprechenden Zugriffsberechtigungen einrichten. Wichtig: Die Plugin benötigt die OAuth-Zugangsdaten von den ursprünglichen Anbietern (nicht von Supabase), während Supabase die Serverseitenauthentifizierung abhandelt.

Wie der Authentifizierungsprozess funktioniert

Wenn Sie sich in die Konfiguration einlassen, sollten Sie sich zunächst mit dem Ablauf vertraut machen:

  1. Das Plugin authentifiziert sich mit dem sozialen Anbieter (Google/Apple/Facebook) direkt
  2. Das Plugin erhält die Token (Zugriffstoken, ID-Token) vom Anbieter
  3. Ihre App sendet diese Token an Supabase weiter signInWithIdToken()
  4. Supabase validiert die Tokens mit dem Provider und erstellt eine Benutzersitzung
  5. Supabase gibt sein eigenes JWT-Token für die authentifizierten Anforderungen Ihres Apps zurück

Google-Plugin-Konfiguration

Das Plugin benötigt Ihre Web Client ID für alle Plattformen und optional einen iOS Client ID für iOS-spezifische Funktionen:

import { SocialLogin } from '@capgo/capacitor-social-login';

await SocialLogin.initialize({
  google: {
    // Use the same Web Client ID you configured in Supabase
    webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
    
    // Optional: iOS Client ID for iOS-specific features
    iOSClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
    
    // Optional: Request offline access for refresh tokens
    mode: 'offline'
  }
});

Hauptsächliche Punkte für Google:

  • Verwenden Sie das Web Client ID für die webClientId Feld
  • Das Plugin funktioniert auf allen Plattformen mit nur dem Web Client ID
  • Die iOSClientId ist optional und wird nur für iOS-spezifische Google-Funktionen verwendet

Apple-Plugin-Konfiguration

Die Apple-Konfiguration variiert zwischen iOS und Android:

Für iOS (native Apple-Sign-In):

await SocialLogin.initialize({
  apple: {
    // No additional configuration needed for iOS
    // The plugin uses the native Apple Sign-In capability
  }
});

Für Android/Web (erfordert Service ID):

await SocialLogin.initialize({
  apple: {
    clientId: 'YOUR_SERVICE_ID', // The Service ID from Apple Developer Portal
    redirectUrl: 'https://your-project-ref.supabase.co/auth/v1/callback'
  }
});

Wichtige Punkte für Apple:

  • iOS verwendet native Sign in with Apple (keine zusätzliche Konfiguration erforderlich)
  • Android/Web erfordert die Service-ID, die Sie im Apple Developer Portal erstellt haben
  • Der redirectUrl sollte dem entsprechen, was Sie in beiden Apple Developer Portal und Supabase konfiguriert haben

Facebook-Plugin-Konfiguration

Facebook erfordert Ihre App-ID und Client-Token:

await SocialLogin.initialize({
  facebook: {
    appId: 'YOUR_FACEBOOK_APP_ID',        // From Facebook Developer Dashboard
    clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN', // From Facebook Developer Dashboard
    
    // Optional: Use Facebook Limited Login (for enhanced privacy)
    limitedLogin: false // See our Facebook setup guide for important Limited Login details
  }
});

Wichtige Punkte für Facebook:

  • Verwenden Sie die gleiche App-ID, die Sie in Supabase konfiguriert haben
  • Client-Token finden Sie in den grundlegenden Einstellungen Ihres Facebook-Apps
  • limitedLogin: true ermöglicht Facebooks privacy-fokussierte Limited Login-Funktion (nur für iOS)
  • Wichtig: Siehe unsere Facebook-Einrichtungsanleitung für detaillierte Informationen zum begrenzten Login, einschließlich Überlegungen zum Datenschutz

Vollständige Plugin-Initialisierung

Hier erfahren Sie, wie Sie alle Anbieter gemeinsam initialisieren:

import { SocialLogin } from '@capgo/capacitor-social-login';

export async function initializeSocialLogin() {
  await SocialLogin.initialize({
    google: {
      webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
      mode: 'offline'
    },
    facebook: {
      appId: 'YOUR_FACEBOOK_APP_ID',
      clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN',
    },
    apple: {
      // iOS: no config needed
      // Android/Web: uncomment the lines below
      // clientId: 'YOUR_SERVICE_ID',
      // redirectUrl: 'https://your-project-ref.supabase.co/auth/v1/callback'
    }
  });
}

Wichtige Hinweise:

  • Aufrufen Sie initialize() context: HTML-Textfragment aus einer längeren Capgo-UI-Zeichenfolge (Elternschlüssel `appflow_migration_step2`). Seite/Bereich: Appflow-Vergleich / Migration-Marketingtext. Rolle: Website-Textzeile. Gesehen in: Seite ionic-appflow.astro. Bewahren Sie Capgo-Produkt- und -Marken- sowie Entwicklertitel genau auf. einmal
  • als Ihre App startet, nicht vor jedem Login
  • Sie benötigen nur die Anbieter zu konfigurieren, die Sie verwenden möchten Die hier angegebenen Anmeldedaten stammen von den, nicht von Supabase
  • Stellen Sie sicher, dass die Anbieterkennungen den in Supabase konfigurierten entsprechen

Schritt 5: Einrichten des Supabase-Clients

Installieren Sie den Supabase-Clients:

npm install @supabase/supabase-js

Erstellen Sie einen Supabase-Dienst:

// services/supabase.ts
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-project-ref.supabase.co';
const supabaseKey = 'your-anon-public-key';

export const supabase = createClient(supabaseUrl, supabaseKey, {
  auth: {
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
});

Schritt 6: Implementierung der Authentifizierungsablauf

Erstellen Sie einen Authentifizierungsdienst, der beide kombiniert:

// services/auth.ts
import { SocialLogin } from '@capgo/capacitor-social-login';
import { supabase } from './supabase';

export class AuthService {
  
  async initializeSocialLogin() {
    await SocialLogin.initialize({
      google: {
        webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
      },
      facebook: {
        appId: 'YOUR_FACEBOOK_APP_ID',
        clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN',
      },
      apple: {} // iOS configuration
    });
  }

  async signInWithGoogle() {
    try {
      const result = await SocialLogin.login({
        provider: 'google',
        options: {
          scopes: ['email', 'profile']
        }
      });

      const googleResult = result.result;
      if (!googleResult) {
        throw new Error('Google login failed');
      }

      // GoogleLoginResponse is a union type - check responseType to determine flow
      if (googleResult.responseType === 'online') {
        // Online mode: use idToken directly with Supabase
        const { data, error } = await supabase.auth.signInWithIdToken({
          provider: 'google',
          token: googleResult.idToken!,
        });
        if (error) throw error;
        return data;
      } else {
        // Offline mode: exchange serverAuthCode on your backend
        // Your backend should exchange the code for tokens and create a Supabase session
        const response = await fetch('/api/auth/google', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ serverAuthCode: googleResult.serverAuthCode })
        });
        return response.json();
      }
    } catch (error) {
      console.error('Google sign-in error:', error);
      throw error;
    }
  }

  async signInWithApple() {
    try {
      const result = await SocialLogin.login({
        provider: 'apple',
        options: {
          scopes: ['email', 'name']
        }
      });

      const { data, error } = await supabase.auth.signInWithIdToken({
        provider: 'apple',
        token: result.result?.identityToken!,
      });

      if (error) throw error;
      return data;
    } catch (error) {
      console.error('Apple sign-in error:', error);
      throw error;
    }
  }

  async signInWithFacebook() {
    try {
      const result = await SocialLogin.login({
        provider: 'facebook',
        options: {
          permissions: ['email', 'public_profile']
        }
      });

      const fbResult = result.result;
      if (!fbResult?.accessToken?.token) {
        throw new Error('Facebook login failed - no access token received');
      }

      // Facebook uses accessToken for Supabase authentication
      const { data, error } = await supabase.auth.signInWithIdToken({
        provider: 'facebook',
        token: fbResult.accessToken.token,
      });

      if (error) throw error;
      return data;
    } catch (error) {
      console.error('Facebook sign-in error:', error);
      throw error;
    }
  }

  async signOut() {
    // Sign out from Supabase
    await supabase.auth.signOut();
    
    // Optionally sign out from social providers
    await SocialLogin.logout({
      provider: 'google' // or 'apple', 'facebook'
    });
  }

  getCurrentUser() {
    return supabase.auth.getUser();
  }

  onAuthStateChange(callback: (event: string, session: any) => void) {
    return supabase.auth.onAuthStateChange(callback);
  }
}

export const authService = new AuthService();

Schritt 7: Implementierung in Ihrer App

Initialisieren Sie den Dienst und bearbeiten Sie die Authentifizierung:

// main.ts or app component
import { authService } from './services/auth';

async function initializeApp() {
  await authService.initializeSocialLogin();
  
  // Listen to auth state changes
  authService.onAuthStateChange((event, session) => {
    if (event === 'SIGNED_IN') {
      console.log('User signed in:', session.user);
      // Redirect to authenticated area
    } else if (event === 'SIGNED_OUT') {
      console.log('User signed out');
      // Redirect to login
    }
  });
}

initializeApp();

Erstellen Sie in Ihrer UI-Ansicht Anmeldebildschirme:

// Login component
async function handleGoogleLogin() {
  try {
    const user = await authService.signInWithGoogle();
    console.log('Signed in with Google:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleAppleLogin() {
  try {
    const user = await authService.signInWithApple();
    console.log('Signed in with Apple:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleFacebookLogin() {
  try {
    const user = await authService.signInWithFacebook();
    console.log('Signed in with Facebook:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleLogout() {
  try {
    await authService.signOut();
    console.log('Signed out successfully');
  } catch (error) {
    console.error('Logout failed:', error);
  }
}

Schritt 8: Plattform-spezifische Konfiguration

iOS-Konfiguration

Für detaillierte iOS-Einrichtungsanweisungen, sehen Sie sich unsere plattform-spezifischen Anleitungen an:

Schnelle Zusammenfassung - Hinzufügen ios/App/App/Info.plist:

<!-- Google Sign-In URL scheme -->
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>YOUR_REVERSED_CLIENT_ID</string>
    </array>
  </dict>
</array>

<!-- Apple Sign-In capability -->
<key>com.apple.developer.applesignin</key>
<array>
  <string>Default</string>
</array>

Folgen Sie den verlinkten Anleitungen für eine vollständige iOS-Einrichtung, einschließlich Xcode-Projekt-Konfiguration.

Android-Konfiguration

Für detaillierte Anweisungen zum Android-Setup, siehe unsere plattform-spezifischen Anleitungen:

Wichtige Android-Einrichtungen:

1. Erhalten Sie Ihren SHA-1-Abdruck (erforderlich für Google):

# For debug builds (development)
cd android
./gradlew signingReport

# Look for the SHA1 fingerprint under "Variant: debug"
# Add this SHA1 to your Google Cloud Console Android OAuth client

2. Konfigurieren Sie AndroidManifest.xml - Hinzufügen zu android/app/src/main/AndroidManifest.xml:

<!-- Internet permission -->
<uses-permission android:name="android.permission.INTERNET" />

<!-- Facebook configuration -->
<meta-data 
  android:name="com.facebook.sdk.ApplicationId" 
  android:value="@string/facebook_app_id"/>
<meta-data 
  android:name="com.facebook.sdk.ClientToken" 
  android:value="@string/facebook_client_token"/>

3. Fügen Sie Facebook-Ressourcen hinzu zu android/app/src/main/res/values/strings.xml:

<string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
<string name="facebook_client_token">YOUR_FACEBOOK_CLIENT_TOKEN</string>

Folgen Sie den verlinkten Plattformleitfäden für die vollständige Android-Konfiguration einschließlich der Einrichtung von Google Play Services und der Paketnamen-Konfiguration.

Schritt 9: Verwendung der Supabase-Datenbank mit authentifizierten Benutzern

Sobald Benutzer authentifiziert sind, können Sie die Supabase-Datenbank mit Row Level Security (RLS) verwenden:

// Example: Fetch user profile
async function getUserProfile() {
  const { data: user } = await supabase.auth.getUser();
  
  if (user) {
    const { data, error } = await supabase
      .from('profiles')
      .select('*')
      .eq('id', user.user.id)
      .single();
    
    return data;
  }
}

// Example: Update user profile
async function updateUserProfile(updates: any) {
  const { data: user } = await supabase.auth.getUser();
  
  if (user) {
    const { data, error } = await supabase
      .from('profiles')
      .update(updates)
      .eq('id', user.user.id);
    
    return data;
  }
}

Wichtige Sicherheitshinweise

  1. Exponieren Sie keine sensiblen Schlüssel im Client code
  2. Verwenden Sie Umgebungsvariablen zur Konfiguration
  3. Aktivieren Sie die Row Level Security In Supabase
  4. Token valide auf Ihrem Backend erforderlich
  5. Token-Refresh automatisch mit Supabase Troubleshooting häufige Probleme

Fehler bei der Token-Mismatch

Stellen Sie sicher, dass die Konfigurationen Ihres OAuth-Anbieters zwischen dem Social-Login-Plugin und Supabase übereinstimmen

  • Überprüfen Sie, ob die Redirect-URLs korrekt konfiguriert sind
  • Plattform-spezifische Probleme

iOS: Überprüfen Sie, ob Ihr Bundle-ID mit Ihrer Apple-Entwickler-Konfiguration übereinstimmt

  • Android: Stellen Sie sicher, dass die SHA1-Fingerabdrücke korrekt in Google Console hinzugefügt sind
  • Validate tokens

Authentifizierungsablauf-Unterbrechungen

  • Implementieren Sie eine korrekte Fehlerbehandlung für Netzwerkprobleme
  • Fügen Sie während der Authentifizierung Ladezustände hinzu

Zusammenfassung

Sie haben jetzt ein vollständiges Authentifizierungssystem, das Supabases robusten Backend mit nativen sozialen Anmeldefunktionen kombiniert. Diese Konfiguration bietet:

  • Sichere, native soziale Authentifizierung
  • Störungsfreie Token-Verwaltung
  • Echtzeit-Datenbankintegration
  • Plattformübergreifende Kompatibilität

Die Combination von Supabase und dem Capgo Social Login-Plugin bietet eine leistungsstarke, skalierbare Authentifizierungslösung für Ihre Capacitor Apps.

Für weitere fortgeschrittene Funktionen wie Zwei-Faktor-Authentifizierung oder Benutzerdefinierte Ansprüchebesuchen Sie die Supabase-Dokumentation und die Dokumentation zum Social-Login-Plugin.

Fortsetzen Sie mit der Einrichtung von Supabase mit Capacitor Social-Login-Plugin

Wenn Sie die Einrichtung von Supabase mit __CAPGO_KEEP_0__ Social-Login-Plugin verwenden Setup Supabase Authentication with Capacitor Social Login Plugin @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login zur Implementierungsdetail in @capgo/capacitor-social-login for the implementation detail 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 Zwei-Faktor-Authentifizierung für die Implementierungsdetails in der Zwei-Faktor-Authentifizierung und SSO (Unternehmen) für die Implementierungsdetails in SSO (Unternehmen).

Live Updates für Capacitor-Apps

Wenn ein Fehler im Web-Layer live ist, können Sie die Reparatur über Capgo verschicken, anstatt Tage auf die Genehmigung durch den App-Store zu warten. Die Benutzer erhalten die Aktualisierung im Hintergrund, während native Änderungen im normalen Review-Prozess bleiben.

Menschliche Unterstützung von Martin

Jetzt loslegen

Neueste von unserem Blog

Capgo bietet Ihnen die besten Einblicke, die Sie benötigen, um ein wirklich professionelles Mobiltelefon-App zu erstellen.

Zweiwegkommunikation in Capacitor-Apps
Entwicklung Mobil +1
26. April 2025

Zweiwegkommunikation in Capacitor-Apps

5 häufige OTA-Update-Mängel vermeiden
Entwicklung Sicherheit +1
14. Januar 2025

5 häufige OTA-Update-Mängel vermeiden

Entwicklung
Mobile 13. April 2025 +1
5 Sicherheitsbest Practices für mobile Live-Updates

Sicherheitsbest Practices für mobile Live-Updates

Alle von uns veröffentlichten Beiträge sehen