Die Einrichtung von Authentifizierungen in mobilen Apps kann komplex sein, aber die Combination von Supabase mit dem Capgo Social-Login-Plugin macht es einfach. Diese Anleitung führt Sie durch die Integration der sozialen Authentifizierung (Google, Apple, Facebook) mit Supabase in Ihrer Capacitor-App.
Warum Supabase mit sozialer Anmeldung verwenden?
Supabase bietet einen robusten Backend-as-a-Service mit integrierter Authentifizierung, während das @capgo/capacitor-social-login Plugin eine natürliche soziale Authentifizierung auf iOS-, Android- und Web-Plattformen bietet. Zusammen bieten sie:
- Einfache soziale Authentifizierung
- Sichere Token-Verwaltung
- Plattformübergreifende Kompatibilität
- Echtzeit-Datenbankintegration
- Integrierte Benutzerverwaltung
Voraussetzungen
Stellen Sie sicher, dass Sie folgendes haben:
- Ein Capacitor-Projekt ist eingerichtet
- 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
Schritt 2: Einrichten des Supabase-Projekts
Erstellen und Konfigurieren Ihres Supabase-Projekts
-
Erstellen Sie ein Supabase-Projekt:
- Gehen Sie zu supabase.com und melden Sie sich an/melden Sie sich an
- Klicken Sie “Neues Projekt”
- Wählen Sie Ihre Organisation
- Geben Sie ein Projektname (z.B. “MeinApp Auth”)
- Setzen Sie ein Datenbankpasswort (speichern Sie dies sicher auf)
- Wählen Sie Ihre Region (wählen Sie die nächste zu Ihren Benutzern)
- Klicken Sie „Neuen Projekt erstellen“
-
Erhalten Sie Ihre Projektanmeldeinformationen:
- Gehen Sie einmal erstellt 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
Authentifizierungs-Einstellungen konfigurieren
-
Allgemeine Authentifizierungs-Einstellungen einrichten:
- Zu Authentifizierung > Einstellungen
- Unter Allgemeine Einstellungen:
- Setze Site-URL auf die URL deiner App (z.B.
https://yourdomain.comoderhttp://localhost:3000für Entwicklung - Hinzufügen Umleitungs-URLs falls erforderlich:
http://localhost:3000 https://yourdomain.com capacitor://localhost (for mobile apps)
- Setze Site-URL auf die URL deiner App (z.B.
-
E-Mail-Einstellungen konfigurieren (optional, aber empfohlen):
- Unter SMTP-Einstellungen, Ihre E-Mail-Anbieter konfigurieren
- Dies aktiviert die E-Mail-Bestätigungen und Passwort-Restellungen
- Für die Entwicklung können Sie die integrierte E-Mail-Dienstleistung verwenden
Soziale Authentifizierungsanbieter aktivieren
- Zugriff auf die Anbieter-Sektion:
- Zum Anbieter-Verzeichnis gehen Authentifizierung > Anbieter in Ihrem Supabase-Dashboard
- Sie sehen eine Liste der verfügbaren sozialen Anbieter
- Jeder Anbieter hat ein Aktivieren Schaltfläche und Konfigurationsoptionen
Konfigurieren wir nun jeden sozialen Anbieter im Detail:
Schritt 3: Konfigurieren Sie soziale Anbieter in Supabase
Google-Authentifizierung in Supabase einrichten
Erhalten Sie zunächst Ihre Google-OAuth-Zertifikate:
Folgen Sie unserem umfassenden Google-Einrichtungsleitfaden: Google-Authentifizierungseinstellungen
Diese Anleitung umfasst:
- Ein Google Cloud-Projekt erstellen
- OAuth 2.0-Zertifikate für Web, iOS und Android einrichten
- Die Einwilligungsbildschirmkonfiguration
- Ermitteln Sie die erforderlichen Client-IDs und -Geheimnisse
Nach Abschluss der Google-Konfiguration, konfigurieren Sie sie in Supabase:
- Google-Anbieter in Supabase aktivieren:
- In Ihrem Supabase-Dashboard gehen Sie zu Authentifizierung > Anbieter
- Finden Sie Google und aktivieren Sie es AN
- Konfiguration ausfüllen:
- Client-ID: Ihre Google OAuth Web Client-ID (aus dem Google Cloud Console)
- Client-Secret: Ihre Google OAuth Web Client-Secret
- Zurückruf-URL:
https://your-project-ref.supabase.co/auth/v1/callback(automatisch ausgefüllt)
- Klicken Sie “Save”
Wichtig: Verwenden Sie den Web Client ID und Web Client Secret in Supabase, auch wenn Sie ein mobiles App bauen. Die mobilen Client IDs werden separat in der Plugin-Konfiguration verwendet.
Einstellung von Apple-Authentifizierung in Supabase
Erhalten Sie Apple-Zertifikate:
Folgen Sie unserem detaillierten Apple-Einrichtungsleitfaden: Apple-Authentifizierungseinstellung
Diese Anleitung umfasst:
- Einrichten Ihres Apple-Entwicklerkontos
- Erstellen von App-IDs und Service-IDs
- Konfigurieren der Anmeldung mit Apple-Funktion
- Erstellen der erforderlichen privaten Schlüssel
- Plattform-spezifische Einrichtung für iOS, Android und Web
Nachdem Sie die Apple-Einrichtung abgeschlossen haben, konfigurieren Sie sie in Supabase:
- Aktivieren Sie den Apple-Anbieter in Supabase:
- Zum Authentifizierung > Anbieter und klicken Sie auf Apple AN
- Konfiguration ausfüllen:
- 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)
- Client-ID: Ihre Service-ID-Bezeichner (z.B.
- Klicken “Speichern”
Hinweis: Die Apple-Authentifizierung 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.
Einstellung der Facebook-Authentifizierung in Supabase
Erhalten Sie Facebook-Zugangsdaten:
Folgen Sie unserem vollständigen Facebook-Einstellungsleitfaden: Einstellung der Facebook-Authentifizierung
Dieses Leitfaden umfasst:
- Erstellen eines Facebook-Entwicklerkontos und einer App
- Hinzufügen des Facebook-Login-Produkts
- Konfigurieren von OAuth-Redirect-URI
- Ermitteln Ihrer App-ID, App-Secret und Client-Token
- Plattform-spezifische Konfiguration für iOS und Android
Nach Abschluss der Facebook-Einrichtung, konfigurieren Sie sie in Supabase:
- Aktivieren Sie den Facebook-Anbieter in Supabase:
- Gehe zu Authentifizierung > Anbieter und schalte Facebook AN
- Füllen Sie die Konfiguration aus:
- Client-ID: Ihre Facebook-App-ID
- Client-Secret: Ihr Facebook-App-Secret
- Umleitungs-URL:
https://your-project-ref.supabase.co/auth/v1/callback(automatisch ausgefüllt)
- Klicken Sie “Speichern”
Wichtig: Stellen Sie sicher, dass Sie die Callback-URL von Supabase (https://your-project-ref.supabase.co/auth/v1/callback) in den Facebook-App-Einstellungen unter "Gültige OAuth-Umleitungs-URIs" einfügen. Wichtige Anmerkungen zur Supabase-Konfiguration Zugriffsstufe auf Zeilen (RLS):
Nachdem Sie die Authentifizierung eingerichtet haben, aktivieren Sie die RLS auf Ihren Tabellen.
__CAPGO_KEEP_0__
- __CAPGO_KEEP_0__
- Gehe zu Datenbank > Tabellen und aktiviere RLS aktivieren für jede Tabelle
- Erstelle Richtlinien, um den Zugriff auf Daten auf der Grundlage von authentifizierten Benutzern zu steuern
Benutzerverwaltung:
- Zeige authentifizierte Benutzer in Authentifizierung > Benutzer
- Überwache Authentifizierungsereignisse in Authentifizierung > Protokolle
- Konfiguriere E-Mail-Vorlagen in Authentifizierung > E-Mail-Vorlagen
Die Konfiguration testen:
- Verwenden Sie das integrierte Testwerkzeug für die Authentifizierung von Supabase
- Zum Authentifizierung > Benutzer und klicken Sie auf “Invite user” um E-Mail-Flüsse zu testen
- Überprüfen Sie das Protokoll Abschnitt für etwaige Authentifizierungsfehler
Schritt 4: Konfigurieren Sie das Plugin für soziale Anmeldungen
Jetzt, dass Supabase konfiguriert ist, müssen Sie die Social-Login-Plugin mit den entsprechenden Zugriffsberechtigungen einrichten. Wichtig: Das Plugin benötigt die OAuth-Zugriffsberechtigungen von den ursprünglichen Anbietern (nicht von Supabase), während Supabase die Serverseitenauthentifizierung abhandelt.
Wie die Authentifizierungsablauf funktioniert
Bevor Sie in die Konfiguration einsteigen, verstehen Sie den Ablauf:
- Das Plugin authentifiziert sich mit dem sozialen Anbieter (Google/Apple/Facebook) natively
- Das Plugin erhält die Token (Zugriffstoken, ID-Token) vom Anbieter
- Ihre App sendet diese Token zu Supabase mithilfe
signInWithIdToken() - Supabase überprüft die Token mit dem Anbieter und erstellt eine Benutzersitzung
- Supabase gibt sein eigenes JWT-Token für die von Ihrer App authentifizierten Anfragen 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 den Web Client ID (nicht Android/iOS Client IDs) für das
webClientIdFeld - Das Plugin funktioniert auf allen Plattformen mit nur dem Web Client ID
- Die
iOSClientIdist optional und wird nur für iOS-spezifische Google-Funktionen verwendet
Apple-Plugin-Konfiguration
Die Apple-Konfiguration unterscheidet sich 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'
}
});
Hauptpunkte für Apple:
- iOS verwendet native Sign in with Apple (keine zusätzliche Konfiguration erforderlich)
- Android/Web erfordert die von Ihnen in Apple Developer Portal erstellte Service-ID
- Der
redirectUrlsollte 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
}
});
Hauptpunkte 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: trueermöglicht Facebooks privacy-fokussierte Limited Login-Funktion (nur iOS)- Wichtig: Siehe unsere Facebook-Einrichtungsanleitung für detaillierte Login-Beschränkungen, einschließlich Sicherheitsüberlegungen
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
initialize()einmal wenn Ihre App startet, nicht vor jedem Login - Sie benötigen nur die Anbieter zu konfigurieren, die Sie verwenden möchten
- Die hier angegebenen Anmeldeinformationen stammen von ursprüngliche Anbieter, nicht von Supabase
- Stellen Sie sicher, dass die Anbieterkennungen den in Supabase konfigurierten entsprechen
Schritt 5: Einrichten des Supabase-Clients
Installieren Sie den Supabase-Client:
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 ein Authentifizierungsdienst, das 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 Anmeldeberechtigungen:
// 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 Anweisungen zur iOS-Konfiguration, siehe unsere plattformspezifischen Anleitungen:
- Google iOS-Konfiguration - URL-Schemata, Info.plist-Konfiguration
- Apple iOS-Konfiguration - Einrichtung der Sign-in-with-Apple-Fähigkeit
- Facebook iOS-Konfiguration (allgemeine Facebook-Anleitung) - Facebook SDK-Konfiguration
Kurzer Überblick - 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-Konfiguration einschließlich Xcode-Projekt-Konfiguration.
Android-Konfiguration
Für detaillierte Anweisungen zur Android-Konfiguration, siehe unsere plattformspezifischen Anleitungen:
- Google Android-Konfiguration - SHA-1-Abdruck, Google Play Services-Konfiguration
- Apple Android-Konfiguration - Konfiguration der Dienst-ID für Android
- Facebook Android-Konfiguration (allgemeine Facebook-Anleitung) - Facebook SDK-Integration
Wichtige Android-Konfiguration:
1. Rufen Sie Ihren SHA-1-Abdruck ab (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
- Exponieren Sie keine sensiblen Schlüssel in Ihrem Client code
- Verwenden Sie Umgebungsvariablen für die Konfiguration
- Rollenbasierte Sicherheit aktivieren in Supabase
- Token überprüfen auf Ihrem Backend erforderlich
- Token-Refresh automatisch mit Supabase bekämpfen Sie häufige Probleme
Token-Mismatch-Fehler
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
- iOS: Überprüfen Sie, ob Ihr Bundle-ID mit Ihrer Apple-Entwickler-Konfiguration übereinstimmt
- Android: Stellen Sie sicher, dass SHA1-Fingerabdrücke korrekt in Google Console hinzugefügt werden
Unterbrechungen im Authentifizierungsfluss
- Implementieren Sie eine ordnungsgemäße 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 Anmeldeoptionen kombiniert. Diese Konfiguration bietet:
- Sichere, native soziale Authentifizierung
- Lagfreie 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 Mehrfaktor-Authentifizierung oder Benutzerdefinierte Ansprüche, besuchen Sie die Supabase-Dokumentation und die Dokumentation zum Social-Login-Plugin.