Facebook Login Einrichtung

Einführung

In diesem Leitfaden lernen Sie, wie Sie Facebook Login mit Capgo Social Login einrichten. Sie benötigen Folgendes:

• Ein Facebook Developer Konto
• Den Paketnamen/Bundle ID Ihrer App
• Zugang zu einem Terminal zum Generieren von Schlüssel-Hashes (Android)

Allgemeine Einrichtung

Wenn Sie noch keine Facebook App erstellt haben, folgen Sie diesen Schritten:

1. Erstellen Sie eine Facebook App

   Folgen Sie dem Tutorial zum Erstellen einer App

2. Fügen Sie Facebook Login zu Ihrer App hinzu

   Fügen Sie in Ihrem Facebook Developer Dashboard das Facebook Login Produkt zu Ihrer App hinzu

3. Bevor Sie Ihre App für die Öffentlichkeit freigeben können, folgen Sie diesem Tutorial, um sie zu veröffentlichen

Wichtige Informationen

Hier finden Sie die wichtigsten Informationen, die Sie für die Integration benötigen:

1. CLIENT_TOKEN:

   

2. APP_ID:

   

3. APP_NAME:

   

Android Einrichtung

1. Fügen Sie die Internetberechtigung zu Ihrer AndroidManifest.xml hinzu

   Stellen Sie sicher, dass diese Zeile vorhanden ist:

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

2. Generieren Sie Ihren Android Schlüssel-Hash

   Dies ist ein wichtiger Sicherheitsschritt, der von Facebook erforderlich ist. Öffnen Sie Ihr Terminal und führen Sie aus:

   keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64 -A

   Wenn Sie nach einem Passwort gefragt werden, verwenden Sie: android

   Note

   Für Release-Builds müssen Sie Ihren Release Keystore verwenden:

   keytool -exportcert -alias your-key-name -keystore your-keystore-path | openssl sha1 -binary | openssl base64 -A

3. Fügen Sie den Schlüssel-Hash zu Ihrer Facebook App hinzu

   1. Gehen Sie zum Dashboard Ihrer App bei Facebook Developers
   2. Navigieren Sie zu Settings > Basic
   3. Scrollen Sie nach unten zum “Android” Bereich
   4. Klicken Sie auf “Add Platform”, falls Android noch nicht hinzugefügt wurde, und füllen Sie die Details aus
   5. Fügen Sie den von Ihnen generierten Schlüssel-Hash hinzu
   6. Für die Produktion fügen Sie sowohl Debug- als auch Release-Schlüssel-Hashes hinzu

4. Aktualisieren Sie Ihre AndroidManifest.xml um Folgendes einzuschließen:

   <application>
       ...
       <activity android:name="com.facebook.FacebookActivity"
           android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
           android:label="@string/app_name" />
   
       <activity
           android:name="com.facebook.CustomTabActivity"
           android:exported="true">
           <intent-filter>
               <action android:name="android.intent.action.VIEW" />
               <category android:name="android.intent.category.DEFAULT" />
               <category android:name="android.intent.category.BROWSABLE" />
               <data android:scheme="FB[APP_ID]" />
           </intent-filter>
       </activity>
   </application>

   Caution

   Stellen Sie sicher, dass Sie [APP_ID] im android:scheme Attribut durch Ihre tatsächliche Facebook App ID ersetzen

iOS Einrichtung

1. Fügen Sie die iOS Plattform in der Facebook Developer Console hinzu

   1. Gehen Sie zum Dashboard Ihrer App bei Facebook Developers
   2. Navigieren Sie zu Settings > Basic
   3. Scrollen Sie ganz nach unten und klicken Sie auf “Add Platform”
   4. Wählen Sie iOS und füllen Sie die erforderlichen Details aus

2. Öffnen Sie Ihr Xcode Projekt und navigieren Sie zu Info.plist

3. Fügen Sie die folgenden Einträge zu Ihrer Info.plist hinzu:

   <key>FacebookAppID</key>
   <string>[APP-ID]</string>
   <key>FacebookClientToken</key>
   <string>[CLIENT-TOKEN]</string>
   <key>FacebookDisplayName</key>
   <string>[APP-NAME]</string>
   <key>LSApplicationQueriesSchemes</key>
   <array>
       <string>fbapi</string>
       <string>fb-messenger-share-api</string>
   </array>
   <key>CFBundleURLTypes</key>
   <array>
       <dict>
           <key>CFBundleURLSchemes</key>
           <array>
               <string>fb[APP-ID]</string>
           </array>
       </dict>
   </array>

   Caution

   Ersetzen Sie die folgenden Werte:

   • [APP-ID] durch Ihre Facebook App ID
   • [CLIENT-TOKEN] durch Ihr Client Token
   • [APP-NAME] durch den Namen Ihrer App

4. Ändern Sie die AppDelegate.swift

   import FBSDKCoreKit
   @UIApplicationMain
   class AppDelegate: UIResponder, UIApplicationDelegate {
         func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
           // Override point for customization after application launch.
   
           // Initialize Facebook SDK
           FBSDKCoreKit.ApplicationDelegate.shared.application(
               application,
               didFinishLaunchingWithOptions: launchOptions
           )
   
           return true
       }
   
       func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
           // Called when the app was launched with a url. Feel free to add additional processing here,
           // but if you want the App API to support tracking app url opens, make sure to keep this call
   
           if (FBSDKCoreKit.ApplicationDelegate.shared.application(
               app,
               open: url,
               sourceApplication: options[UIApplication.OpenURLOptionsKey.sourceApplication] as? String,
               annotation: options[UIApplication.OpenURLOptionsKey.annotation]
           )) {
               return true;
           } else {
               return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
           }
       }
   }

Verwendung von Facebook Login in Ihrer App

Caution

Bevor Sie beginnen: Denken Sie daran, dass bei dem neuen Facebook SDK der Token-Typ, den Sie erhalten, vollständig von der App Tracking Auswahl des Benutzers abhängt, nicht von Ihrer Code-Konfiguration. Implementieren Sie immer sowohl die Verarbeitung von Access Token als auch JWT Token in Ihrem Backend, um sicherzustellen, dass die Authentifizierung für alle Benutzer funktioniert.

1. Initialisieren Sie den Facebook Login in Ihrer App

   import { SocialLogin } from '@capgo/capacitor-social-login';
   
   // Während des App-Starts initialisieren
   await SocialLogin.initialize({
     facebook: {
       appId: 'APP_ID',
       clientToken: 'CLIENT_TOKEN',
     }
   })

2. Implementieren Sie die Login-Funktion

   async function loginWithFacebook() {
     try {
       const result = await SocialLogin.login({
         provider: 'facebook',
        options: {
          permissions: ['email', 'public_profile'],
          limitedLogin: false // Siehe Abschnitt Limited Login unten für wichtige Details
        }
       });
       console.log('Facebook Login Ergebnis:', result);
       // Erfolgreichen Login verarbeiten
     } catch (error) {
       console.error('Facebook Login Fehler:', error);
       // Fehler verarbeiten
     }
   }

   Note

   Limited Login (nur iOS): Setzen Sie limitedLogin auf true, wenn Sie Facebooks Limited Login Funktion verwenden möchten. Dies ist eine nur-iOS-Funktion, die verbesserten Datenschutz bietet, indem die während des Logins geteilten Daten eingeschränkt werden.

   Wichtige Einschränkungen:

   • Nur iOS: Limited Login betrifft nur iOS-Geräte und hat keine Auswirkungen auf Android
   • ATT Überschreibung: Selbst wenn Sie limitedLogin: false setzen, wird Facebook es automatisch auf true zwingen, wenn der Benutzer keine App Tracking Transparency (ATT) Berechtigung erteilt hat
   • Beide Fälle immer behandeln: Ihre App sollte immer darauf vorbereitet sein, sowohl Limited- als auch Full-Login-Szenarien zu behandeln

   ATT Status überprüfen:

   // Überprüfen Sie, ob der Benutzer die Tracking-Berechtigung erteilt hat
   const trackingStatus = await SocialLogin.providerSpecificCall({
     call: 'facebook#requestTracking',
     options: {}
   });
   console.log('Tracking Status:', trackingStatus.status); // 'authorized', 'denied', 'notDetermined', oder 'restricted'

   Empfohlene Implementierung, wenn access_token bevorzugt wird:

   async function loginWithFacebook() {
     try {
       // ATT Status zuerst überprüfen
       const trackingStatus = await SocialLogin.providerSpecificCall({
         call: 'facebook#requestTracking',
         options: {}
       });
   
       const result = await SocialLogin.login({
         provider: 'facebook',
         options: {
           permissions: ['email', 'public_profile'],
           limitedLogin: trackingStatus.status === 'denied' // Automatisch basierend auf ATT anpassen
         }
       });
   
       // Verschiedene Antworttypen basierend auf Limited Login verarbeiten
       if (result.result.accessToken) {
         // Ihre App-Logik sollte mit beiden funktionieren, Limited und Full Login
         console.log('Login erfolgreich:', result);
       }
     } catch (error) {
       console.error('Facebook Login Fehler:', error);
     }
   }

   Was passiert bei Limited Login:

   • Reduzierter Datenzugriff: Einige Benutzerdaten sind möglicherweise nicht verfügbar
   • Verschiedene Token-Typen: Access Tokens können unterschiedliche Fähigkeiten haben
   • Datenschutz-Compliance: Hilft bei der Einhaltung der iOS-Datenschutzanforderungen

   Wichtig: Testen Sie Ihre App immer sowohl mit Limited- als auch mit Full-Login-Szenarien, um sicherzustellen, dass Ihre App in beiden Fällen korrekt funktioniert. Sie können mehr über Limited Login hier erfahren.

3. Benutzerprofildaten abrufen

   Nach erfolgreichem Login können Sie zusätzliche Profilinformationen abrufen:

   async function getFacebookProfile() {
     try {
       const profileResponse = await SocialLogin.providerSpecificCall({
         call: 'facebook#getProfile',
         options: {
           fields: ['id', 'name', 'email', 'first_name', 'last_name', 'picture']
         }
       });
   
       console.log('Facebook Profil:', profileResponse.profile);
       return profileResponse.profile;
     } catch (error) {
       console.error('Fehler beim Abrufen des Facebook Profils:', error);
       return null;
     }
   }
   
   // Beispielverwendung nach dem Login
   async function loginAndGetProfile() {
     const loginResult = await loginWithFacebook();
     if (loginResult) {
       const profile = await getFacebookProfile();
       if (profile) {
         console.log('Benutzer ID:', profile.id);
         console.log('Name:', profile.name);
         console.log('E-Mail:', profile.email);
         console.log('Profilbild:', profile.picture?.data?.url);
       }
     }
   }

   Tip

   Verfügbare Profilfelder: Sie können alle Felder anfordern, die in Facebooks Graph API verfügbar sind. Häufige Felder sind: id, name, email, first_name, last_name, picture, birthday, gender, location, hometown. Beachten Sie, dass einige Felder zusätzliche Berechtigungen erfordern können.

   Token-Typ-Einschränkung: Der getProfile Aufruf funktioniert nur, wenn Sie ein Access Token haben (Standard-Login mit erlaubtem Tracking). Wenn der Benutzer das Tracking abgelehnt hat oder Sie Limited Login verwenden (nur JWT Token), schlägt dieser Aufruf fehl. Verwenden Sie in diesem Fall die in der anfänglichen Login-Antwort bereitgestellten Profildaten.

⚠️ Kritisch: Backend Token-Verarbeitung

Danger

KRITISCHES iOS VERHALTEN: Limited Login und App Tracking Transparency (ATT) sind NUR-iOS Funktionen. Auf Android erhalten Sie immer Access Tokens, unabhängig von der limitedLogin Einstellung.

iOS Token-Verhalten:

• limitedLogin: true → Immer JWT Token (nur iOS)
• limitedLogin: false + Benutzer ERLAUBT Tracking → Access Token
• limitedLogin: false + Benutzer LEHNT Tracking AB → JWT Token (iOS überschreibt Ihre Einstellung automatisch)

Android Token-Verhalten: Immer Access Token, limitedLogin Einstellung wird ignoriert.

Ihr Backend muss zwei verschiedene Token-Typen verarbeiten, da iOS-Benutzer je nach ihrer App Tracking Transparency Auswahl entweder Access Tokens oder JWT Tokens erhalten können, während Android-Benutzer immer Access Tokens erhalten.

Token-Typen nach Plattform

Plattform	limitedLogin Einstellung	Benutzer ATT Auswahl	Ergebnis Token-Typ
iOS	true	Beliebig	JWT Token
iOS	false	Erlaubt Tracking	Access Token
iOS	false	Lehnt Tracking ab	JWT Token (automatische Überschreibung)
Android	Beliebig	N/A	Access Token (immer)

Backend-Implementierung

1. Token-Typ erkennen und entsprechend verarbeiten

   async function loginWithFacebook() {
     try {
       const loginResult = await SocialLogin.login({
         provider: 'facebook',
         options: {
           permissions: ['email', 'public_profile'],
           limitedLogin: false // iOS: abhängig von ATT, Android: ignoriert
         }
       });
   
       if (loginResult.accessToken) {
         // Access Token (Android immer, iOS wenn Tracking erlaubt)
         return handleAccessToken(loginResult.accessToken.token);
       } else if (loginResult.idToken) {
         // JWT Token (nur iOS wenn Tracking abgelehnt oder limitedLogin: true)
         return handleJWTToken(loginResult.idToken);
       }
     } catch (error) {
       console.error('Facebook Login Fehler:', error);
     }
   }

2. Firebase Integration Beispiel

   import { OAuthProvider, FacebookAuthProvider, signInWithCredential } from 'firebase/auth';
   
   async function handleAccessToken(accessToken: string, nonce: string) {
     // Für Access Tokens, verwenden Sie OAuthProvider (neue Methode)
     const fbOAuth = new OAuthProvider("facebook.com");
     const credential = fbOAuth.credential({
       idToken: accessToken,
       rawNonce: nonce
     });
   
     try {
       const userResponse = await signInWithCredential(auth, credential);
       return userResponse;
     } catch (error) {
       console.error('Firebase OAuth Fehler:', error);
       return false;
     }
   }
   
   async function handleJWTToken(jwtToken: string) {
     // Für JWT Tokens, senden Sie an Ihr Backend zur Validierung
     try {
       const response = await fetch('/api/auth/facebook-jwt', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({ jwtToken })
       });
   
       const result = await response.json();
       return result;
     } catch (error) {
       console.error('JWT Validierungsfehler:', error);
       return false;
     }
   }

3. Backend JWT Validierung

   // Backend: JWT Token von Facebook validieren
   import jwt from 'jsonwebtoken';
   import { Request, Response } from 'express';
   
   app.post('/api/auth/facebook-jwt', async (req: Request, res: Response) => {
     const { jwtToken } = req.body;
   
     try {
       // JWT Token mit Facebooks öffentlichem Schlüssel verifizieren
       // Siehe: https://developers.facebook.com/docs/facebook-login/limited-login/token/validating/#standard-claims
       const decoded = jwt.verify(jwtToken, getFacebookPublicKey(), {
         algorithms: ['RS256'],
         audience: process.env.FACEBOOK_APP_ID,
         issuer: 'https://www.facebook.com' // Von: https://www.facebook.com/.well-known/openid-configuration/?_rdr
       });
   
       // Benutzerinformationen aus JWT extrahieren
       const userInfo = {
         id: decoded.sub,
         email: decoded.email,
         name: decoded.name,
         isJWTAuth: true
       };
   
       // Session/Token Ihrer App erstellen
       const sessionToken = createUserSession(userInfo);
   
       res.json({
         success: true,
         token: sessionToken,
         user: userInfo
       });
     } catch (error) {
       console.error('JWT Validierung fehlgeschlagen:', error);
       res.status(401).json({ success: false, error: 'Ungültiger Token' });
     }
   });

4. Generischer Backend Token Handler

   // Beide Token-Typen in Ihrem Backend verarbeiten
   async function authenticateFacebookUser(tokenData: any) {
     if (tokenData.accessToken) {
       // Access Token verarbeiten - mit Facebook Graph API validieren
       const response = await fetch(`https://graph.facebook.com/me?access_token=${tokenData.accessToken}&fields=id,name,email`);
       const userInfo = await response.json();
   
       return {
         user: userInfo,
         tokenType: 'access_token',
         expiresIn: tokenData.expiresIn || 3600
       };
     } else if (tokenData.jwtToken) {
       // JWT Token verarbeiten - dekodieren und validieren
       // Siehe: https://developers.facebook.com/docs/facebook-login/limited-login/token/validating/#standard-claims
       const decoded = jwt.verify(tokenData.jwtToken, getFacebookPublicKey());
   
       return {
         user: {
           id: decoded.sub,
           name: decoded.name,
           email: decoded.email
         },
         tokenType: 'jwt',
         expiresIn: decoded.exp - Math.floor(Date.now() / 1000)
       };
     } else {
       throw new Error('Kein gültiger Token bereitgestellt');
     }
   }

Wichtige Überlegungen

Danger

Kritisches Nur-iOS-Verständnis:

• iOS: Die App Tracking Auswahl des Benutzers bestimmt den Token-Typ, NICHT Ihre Code-Einstellungen (selbst wenn limitedLogin: false)
• Android: Erhält immer Access Tokens, unabhängig von der limitedLogin Einstellung
• Limited Login ist NUR-iOS - Android ignoriert diese Einstellung vollständig

Access Token (Standard Login):

• ✅ Android: Immer verfügbar (iOS-only Einschränkungen gelten nicht)
• ✅ iOS: Nur wenn der Benutzer explizit App-Tracking erlaubt
• ✅ Kann zum Zugriff auf Facebook Graph API verwendet werden
• ✅ Längere Ablaufzeiten
• ✅ Mehr Benutzerdaten verfügbar
• ❌ Wird auf iOS weniger häufig, da Benutzer zunehmend Tracking ablehnen

JWT Token (Nur-iOS Datenschutzmodus):

• ❌ Android: Tritt nie auf (nicht unterstützt)
• ✅ iOS: Wenn Tracking abgelehnt oder limitedLogin: true
• ✅ Respektiert iOS-Benutzerdatenschutzpräferenzen
• ❌ Enthält nur grundlegende Benutzerinformationen
• ❌ Kürzere Ablaufzeiten
• ❌ Kein Zugriff auf Facebook Graph API
• ⚠️ Jetzt das häufigste Szenario für iOS-Benutzer

Plattformspezifisches Verhalten:

• iOS-Apps: Müssen sowohl Access Tokens ALS AUCH JWT Tokens verarbeiten
• Android-Apps: Müssen nur Access Tokens verarbeiten
• Plattformübergreifende Apps: Müssen beide Token-Verarbeitungsmethoden implementieren

Tip

Essentiell für iOS: Sie MÜSSEN beide Token-Verarbeitungsmethoden implementieren. Viele iOS-Entwickler nehmen an, dass sie immer Access Tokens erhalten, und ihre Apps brechen zusammen, wenn Benutzer Tracking ablehnen.

Anforderungen an sichere Kontexte (Web/Capacitor)

Crypto API Einschränkungen

Der aktualisierte Facebook Login-Ablauf erfordert die Web Crypto API zur Nonce-Generierung, die nur in sicheren Kontexten verfügbar ist:

// Dies erfordert einen sicheren Kontext (HTTPS oder localhost)
async function sha256(message: string) {
  const msgBuffer = new TextEncoder().encode(message);
  const hashBuffer = await crypto.subtle.digest("SHA-256", msgBuffer); // ❌ Schlägt in unsicherem Kontext fehl
  // ...
}

Entwicklungsumgebungsprobleme

Häufiges Problem: ionic serve mit HTTP URLs unterbricht Facebook-Authentifizierung

Umgebung	Crypto API Verfügbar	Facebook Login Funktioniert
http://localhost:3000	✅ Ja	✅ Ja
http://127.0.0.1:3000	✅ Ja	✅ Ja
http://192.168.1.100:3000	❌ Nein	❌ Nein
https://any-domain.com	✅ Ja	✅ Ja

Lösungen für Capacitor-Entwicklung

1. Verwenden Sie localhost für Web-Tests

   # Anstelle von ionic serve --host=0.0.0.0
   ionic serve --host=localhost

2. Aktivieren Sie HTTPS in Ionic

   ionic serve --ssl

3. Testen Sie auf echten Geräten

   # Capacitor Apps laufen in sicherem Kontext auf Geräten
   ionic cap run ios
   ionic cap run android

4. Alternative Nonce-Generierung für die Entwicklung

   async function generateNonce() {
     if (typeof crypto !== 'undefined' && crypto.subtle) {
       // Sicherer Kontext - verwenden Sie crypto.subtle
       return await sha256(Math.random().toString(36).substring(2, 10));
     } else {
       // Fallback für Entwicklung (nicht sicher für Produktion)
       console.warn('Verwende Fallback-Nonce - nicht sicher für Produktion');
       return btoa(Math.random().toString(36).substring(2, 10));
     }
   }

Firebase Integration Hinweis

Aktuelle Firebase-Dokumentation erfordert JWT Tokens mit Nonces für Facebook-Authentifizierung, unabhängig von Login-Einstellungen. Dieser Ansatz funktioniert sowohl mit limitedLogin: true als auch limitedLogin: false:

   // Beide Modi können JWT Tokens zurückgeben, abhängig von der Benutzerauswahl
   const loginResult = await SocialLogin.login({
     provider: 'facebook',
     options: {
       permissions: ['email', 'public_profile'],
       limitedLogin: false, // true = immer JWT, false = abhängig von Benutzer-Tracking-Auswahl
       nonce: nonce
     }
   });

Entwicklungseinschränkung: Wenn Sie ionic serve auf einer Netzwerk-IP (nicht localhost) verwenden, schlägt Facebook Login aufgrund von Crypto API Einschränkungen fehl. Verwenden Sie localhost oder HTTPS für Web-Tests.

Tip

Produktionssicherheit: Capacitor Apps auf iOS/Android laufen immer in sicheren Kontexten, daher betrifft diese Einschränkung nur Web-Entwicklungsumgebungen.

Fehlerbehebung

Häufige Probleme und Lösungen

1. Schlüssel-Hash-Fehler auf Android

   • Überprüfen Sie doppelt, dass Sie den korrekten Schlüssel-Hash zum Facebook Dashboard hinzugefügt haben
   • Für Release-Builds stellen Sie sicher, dass Sie sowohl Debug- als auch Release-Schlüssel-Hashes hinzugefügt haben
   • Überprüfen Sie, dass Sie den richtigen Keystore beim Generieren des Hashes verwenden

2. Facebook Login-Button erscheint nicht

   • Überprüfen Sie, dass alle Manifest-Einträge korrekt sind
   • Prüfen Sie, dass Ihre Facebook App ID und Ihr Client Token korrekt sind
   • Stellen Sie sicher, dass Sie das SDK ordnungsgemäß initialisiert haben

3. Häufige iOS-Probleme

   • Stellen Sie sicher, dass alle Info.plist-Einträge korrekt sind
   • Überprüfen Sie, dass URL-Schemas ordnungsgemäß konfiguriert sind
   • Prüfen Sie, dass Ihre Bundle ID mit der im Facebook Dashboard registrierten übereinstimmt

Testen

1. Fügen Sie vor dem Testen Testbenutzer in der Facebook Developer Console hinzu

   • Gehen Sie zu Roles > Test Users
   • Erstellen Sie einen Testbenutzer
   • Verwenden Sie diese Anmeldedaten zum Testen

2. Testen Sie sowohl Debug- als auch Release-Builds

   • Debug-Build mit Debug-Schlüssel-Hash
   • Release-Build mit Release-Schlüssel-Hash
   • Testen Sie sowohl auf Emulator als auch auf physischen Geräten

Denken Sie daran, den vollständigen Login-Ablauf zu testen, einschließlich:

• Erfolgreicher Login
• Login-Abbruch
• Fehlerbehandlung
• Logout-Funktionalität