Facebook-Login-Einrichtung

Einführung

In dieser Anleitung lernen Sie, wie Sie Facebook-Login mit Capgo Social Login einrichten. Sie benötigen Folgendes:

• Ein Facebook-Entwicklerkonto
• Die Paketbezeichnung/Bundle-Id Ihres Apps
• Zugriff auf ein Terminal für die Erstellung von Schlüsselhashes (Android)

Allgemeine Einstellungen

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

1. Eine Facebook-App erstellen

   Folgen Sie dem Tutorial, um Eine App erstellen

2. Facebook-Login zu Ihrer App hinzufügen

   In Ihrem Facebook-Entwickler-Dashboard fügen Sie dem Produkt Facebook-Login Ihrer App hinzu

3. Bevor Sie Ihre App der Öffentlichkeit zugänglich machen, folgen Sie diesem Anleitung um es 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:

   

Facebook-Geschäftsanmeldung

Dieser Plugin unterstützt die Facebook-Geschäftsanmeldung für Geschäftsbezogene Funktionen und Berechtigungen. Geschäftskonten können zusätzliche Berechtigungen außerhalb der Standard-Konsumenten-Anmeldung anfordern, einschließlich Instagram und Seiten-Verwaltung.

Unterstützte Geschäftsberechtigungen umfassen:

• instagram_basic - Zugriff auf Instagram Basic Display API
• instagram_manage_insights - Zugriff auf Instagram Insights
• pages_show_list - Liste der Seiten, die die Person verwaltet
• pages_read_engagement - Lesen von Daten zur Interaktion mit Seiten
• pages_manage_posts - Verwalten von Beiträgen auf Seiten
• business_management - Verwalten von Geschäftsaktivitäten

- Siehe die - Facebook-Referenz für die Berechtigungen - für die vollständige Liste der Berechtigungen.

- Anforderungen für die Konfiguration:

1. - Ihre Facebook-App muss als Geschäfts-App im Facebook-Entwickler-Console konfiguriert sein.
2. - Geschäfts-Berechtigungen können eine Facebook-App-Überprüfung erfordern, bevor sie in der Produktion verwendet werden.
3. Ihre App muss den Geschäftsfall-Richtlinien von Facebook entsprechen.

Instagram Basic Access

await SocialLogin.initialize({
  facebook: {
    appId: 'your-business-app-id',
    clientToken: 'your-client-token',
  },
});

const res = await SocialLogin.login({
  provider: 'facebook',
  options: {
    permissions: [
      'email',
      'public_profile',
      'instagram_basic',
      'pages_show_list',
      'pages_read_engagement',
    ],
  },
});

const profile = await SocialLogin.providerSpecificCall({
  call: 'facebook#getProfile',
  options: {
    fields: ['id', 'name', 'email', 'instagram_business_account'],
  },
});

Seitenverwaltung

const res = await SocialLogin.login({
  provider: 'facebook',
  options: {
    permissions: [
      'email',
      'pages_show_list',
      'pages_manage_posts',
      'pages_read_engagement',
    ],
  },
});

const profile = await SocialLogin.providerSpecificCall({
  call: 'facebook#getProfile',
  options: {
    fields: ['id', 'name', 'accounts{id,name,instagram_business_account}'],
  },
});

Wichtige Hinweise:

• Sie können Geschäftsrechte mit Testnutzern und Entwickleranwendungen vor der App-Überprüfung testen.
• Die meisten Geschäftsrechte erfordern eine Facebook-App-Überprüfung vor der Produktionsnutzung.
• Geschäfts-APIs haben unterschiedliche Rate Limits. Lesen Sie die aktuelle Plattformdokumentation von Facebook vor dem Launch.
• Folgen Sie den Facebook Business Integration Guide wenn Sie die App einrichten.

Android-Einrichtung

1. Fügen Sie der App die Internetberechtigung hinzu. AndroidManifest.xml

   Stellen Sie sicher, dass diese Zeile vorhanden ist:

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

2. Generieren Sie Ihren Android-Schlüsselhash

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

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

   Wenn Sie zum Passwort aufgefordert werden, verwenden Sie: android

   Hinweis

   Für Release-Builds benötigen Sie Ihren Release-Keystore:

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

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

   1. Gehen Sie zu Ihrem App-Dashboard auf Facebook Developers
   2. Navigieren Sie zu Einstellungen > Grundlegend
   3. Scrollen Sie nach unten zur „Android“-Sektion
   4. Klicken Sie auf „Add Platform“ wenn Android noch nicht hinzugefügt wurde und füllen Sie die Details aus
   5. Fügen Sie den Schlüsselhash ein, den Sie generiert haben
   6. Für die Produktion fügen Sie sowohl den Debug- als auch den Release-Schlüsselhash hinzu

4. Aktualisieren Sie Ihre AndroidManifest.xml um zu enthalten:

   <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>

   Vorsicht

   Stellen Sie sicher, dass Sie den Facebook-App-Id durch Ihren tatsächlichen Facebook-App-Id in der [APP_ID] Eigenschaft android:scheme iOS-Einrichtung

Abschnitt mit der Überschrift „iOS-Einrichtung“

1. Gehen Sie zu Ihrem App-Dashboard auf Facebook Developers

   1. Abschnitt mit der Überschrift “iOS-Einrichtung”
   2. Navigieren Sie zu Einstellungen > Grundlegend
   3. Scrollen Sie bis zum unteren Ende der Seite und klicken Sie auf “Plattform hinzufügen”
   4. Wählen Sie iOS aus 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 Ihrem 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>

   Vorsicht

   Ersetzen Sie die folgenden Werte:

   • [APP-ID] mit Ihrer Facebook-App-ID
   • [CLIENT-TOKEN] mit Ihrem Client-Token
   • [APP-NAME] mit dem Namen Ihrer App

4. Ändern Sie das 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)
           }
       }
   }

Facebook-Login in Ihrer App verwenden

Vorsicht

Bevor Sie beginnen: Denken Sie daran, dass mit dem neuen Facebook SDK der Token-Typ, den Sie erhalten, ausschließlich von der App-Tracking-Einstellung des Benutzers abhängt und nicht von Ihrer code-Konfiguration. Implementieren Sie immer sowohl den Zugriffstoken- als auch den JWT-Token-Handling in Ihrem Backend, um die Authentifizierung für alle Benutzer sicherzustellen.

1. Initialisieren Sie das Facebook-Login in Ihrer App

   import { SocialLogin } from '@capgo/capacitor-social-login';
   
   // Initialize during app startup
   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 // See Limited Login section below for important details
        }
       });
       console.log('Facebook login result:', result);
       // Handle successful login
     } catch (error) {
       console.error('Facebook login error:', error);
       // Handle error
     }
   }

   Hinweis

   Eingeschränkter Login (nur iOS)Setzen Sie limitedLogin auf true, wenn Sie das Feature für eingeschränkten Login von Facebook verwenden möchten. Dies ist ein iOS-spezifisches Feature, das die Privatsphäre durch Einschränkung der während des Anmeldevorgangs geteilten Daten erhöht.

   Wichtige Einschränkungen:

   • Nur iOSEingeschränkter Login wirkt sich nur auf iOS-Geräte aus und hat keinen Einfluss auf Android-Geräte
   • ATT-ÜbernahmeEgal, ob Sie limitedLogin: falsesetzen, Facebook wird es automatisch auf true stellen, wenn der Benutzer die App-Tracking-Transparenz-Berechtigung nicht erteilt hat
   • Always Handle Both CasesYour app should always be prepared to handle both limited and full login scenarios

   Überprüfung des ATT-Status:

   // Check if user has granted tracking permission
   const trackingStatus = await SocialLogin.providerSpecificCall({
     call: 'facebook#requestTracking',
     options: {}
   });
   console.log('Tracking status:', trackingStatus.status); // 'authorized', 'denied', 'notDetermined', or 'restricted'

   Empfohlene Implementierung, wenn access_token bevorzugt wird:

   async function loginWithFacebook() {
     try {
       // Check ATT status first
       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' // Auto-adjust based on ATT
         }
       });
   
       // Handle different response types based on limited login
       if (result.result.accessToken) {
         // Your app logic should work with both limited and full login
         console.log('Login successful:', result);
       }
     } catch (error) {
       console.error('Facebook login error:', error);
     }
   }

   Was passiert bei begrenztem Login:

   • Eingeschränkter Zugriff auf DatenEinige Benutzerdaten stehen möglicherweise nicht zur Verfügung
   • Verschiedene Token-Typen:Access-Tokens können unterschiedliche Berechtigungen haben
   • Datenschutzkonformität: Hilft dabei, iOS-Privatsphäre-Anforderungen zu erfüllen

   Important: Testen Sie Ihre App immer mit sowohl eingeschränkten als auch vollständigen Anmelde-Szenarien, um sicherzustellen, dass Ihre App in beiden Fällen korrekt funktioniert. Sie können mehr über Limited Login here.

3. Benutzerprofil abrufen

   Nach erfolgreicher Anmeldung 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 profile:', profileResponse.profile);
       return profileResponse.profile;
     } catch (error) {
       console.error('Failed to get Facebook profile:', error);
       return null;
     }
   }
   
   // Example usage after login
   async function loginAndGetProfile() {
     const loginResult = await loginWithFacebook();
     if (loginResult) {
       const profile = await getFacebookProfile();
       if (profile) {
         console.log('User ID:', profile.id);
         console.log('Name:', profile.name);
         console.log('Email:', profile.email);
         console.log('Profile Picture:', profile.picture?.data?.url);
       }
     }
   }

   Tip

   Verfügbare Profilfelder: Sie können alle verfügbaren Felder der Facebook-Graph-API anfordern. API. Gemeinsame Felder umfassen: id, name, email, first_name, last_name, picture, birthday, gender, location, hometown. Beachten Sie, dass einige Felder zusätzliche Berechtigungen erfordern.

   Tokenarttyp-Begrenzung: Die getProfile Ruft nur an, wenn Sie ein Zugriffstoken haben (Standard-Login mit Tracking erlaubt). Wenn der Benutzer das Tracking abgelehnt hat oder Sie den begrenzten Login (JWT-Token nur) verwenden, funktioniert diese Anfrage nicht. In diesem Fall können Sie die im Anmeldeantwort bereitgestellten Profildaten verwenden.

⚠️ Kritisch: Backend-Handling von Token

Gefahr

KRITISCHE iOS-VERHALTEN: Begrenzter Login und App-Tracking-Transparenz (ATT) sind iOS-NUR Funktionen. Bei Android erhalten Sie immer Zugriffstoken, unabhängig von der limitedLogin Einstellung.

iOS-Token-Verhalten:

• limitedLogin: true → Immer JWT-Token (nur iOS)
• limitedLogin: false → Zugriffstoken → JWT-Token (iOS überschreibt Ihre Einstellung automatisch)
• limitedLogin: false Verhalten von Android-Token : Immer Zugriffstoken,

Einstellung wird ignoriert.Ihre Backend-Instanz muss limitedLogin setting

setting zwei verschiedene Token-Typen weil iOS-Nutzer entweder Zugriffstoken oder JWT-Tokens erhalten können, je nachdem, welche Einstellungen sie in der App-Tracking-Transparenz haben, während Android-Nutzer immer Zugriffstoken erhalten.

Token-Typen nach Plattform

Plattform	limitedLogin-Einstellung	Benutzer-ATT-Einstellung	Ergebnis-Tokens-Typ
iOS	true	Jeder	JWT-Tokens
iOS	false	Ermöglicht die Verfolgung	Zugriffs-Token
iOS	false	Verweigert die Verfolgung	JWT-Token (automatische Überschreibung)
Android	Jeder	N/A	Zugriffs-Token (immer)

Hintergrundimplementierung

1. Token-Typ erkennen und entsprechend bearbeiten

   async function loginWithFacebook() {
     try {
       const loginResult = await SocialLogin.login({
         provider: 'facebook',
         options: {
           permissions: ['email', 'public_profile'],
           limitedLogin: false // iOS: depends on ATT, Android: ignored
         }
       });
   
       if (loginResult.accessToken) {
         // Access token (Android always, iOS when tracking allowed)
         return handleAccessToken(loginResult.accessToken.token);
       } else if (loginResult.idToken) {
         // JWT token (iOS only when tracking denied or limitedLogin: true)
         return handleJWTToken(loginResult.idToken);
       }
     } catch (error) {
       console.error('Facebook login error:', error);
     }
   }

2. Beispiel für die Firebase-Integration

   import { OAuthProvider, FacebookAuthProvider, signInWithCredential } from 'firebase/auth';
   
   async function handleAccessToken(accessToken: string, nonce: string) {
     // For access tokens, use OAuthProvider (new method)
     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 error:', error);
       return false;
     }
   }
   
   async function handleJWTToken(jwtToken: string) {
     // For JWT tokens, send to your backend for validation
     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 validation error:', error);
       return false;
     }
   }

3. Hintergrund- JWT-Validierung

   // Backend: Validate JWT token from Facebook
   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 {
       // Verify JWT token with Facebook's public key
       // See: 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' // From: https://www.facebook.com/.well-known/openid-configuration/?_rdr
       });
   
       // Extract user info from JWT
       const userInfo = {
         id: decoded.sub,
         email: decoded.email,
         name: decoded.name,
         isJWTAuth: true
       };
   
       // Create your app's session/token
       const sessionToken = createUserSession(userInfo);
   
       res.json({
         success: true,
         token: sessionToken,
         user: userInfo
       });
     } catch (error) {
       console.error('JWT validation failed:', error);
       res.status(401).json({ success: false, error: 'Invalid token' });
     }
   });

4. Allgemeiner Hintergrund-Token-Handler

   // Handle both token types in your backend
   async function authenticateFacebookUser(tokenData: any) {
     if (tokenData.accessToken) {
       // Handle access token - validate with Facebook Graph API
       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) {
       // Handle JWT token - decode and validate
       // See: 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('No valid token provided');
     }
   }

Hinweis: Wichtige Überlegungen

Gefahr

Kritischer iOS-spezifischer Hinweis: Verständnis:

• iOS: Die Wahl des Benutzers für die App-Tracking-Option bestimmt den Token-Typ, NICHT Ihre code-Einstellungen (auch dann nicht, wenn limitedLogin: false)
• Android: Immer erhält man Zugriffstoken, unabhängig von limitedLogin Einstellung
• Limited Login ist nur für iOS verfügbar - Android ignoriert diese Einstellung vollständig

Access Token (Standard-Login):

• ✅ Android: Immer verfügbar (iOS-basierte Einschränkungen gelten nicht)
• ✅ iOS: Nur wenn der Benutzer das App-Tracking explizit erlaubt
• ✅ Kann zum Zugriff auf das Facebook-Graph API verwendet werden
• ✅ Längere Ablaufzeiten
• ✅ Mehr Benutzerdaten verfügbar
• ❌ Immer weniger verbreitet auf iOS da Benutzer zunehmend den Tracking-Widerspruch abgeben

JWT-Token (iOS-Only-Privatsphäre-Modus):

• ❌ Android: Nie tritt auf (nicht unterstützt)
• ✅ iOS: Wenn der Tracking-Widerspruch erteilt oder limitedLogin: true
• ✅ Respektiert die iOS-Benutzer-Privatsphäre-Einstellungen
• ❌ Enthält nur grundlegende Benutzerinformationen
• ❌ Kürzere Ablaufzeiten
• ❌ Kein Zugriff auf das Facebook-Graph API
• ⚠️ Jetzt ist die häufigste Szenario für iOS-Nutzer

Plattform-spezifische Verhalten:

• iOS-Anwendungen: Sollen sowohl Zugriffstoken als auch JWT-Tokens handhaben
• Android-Anwendungen: Brauchen nur Zugriffstoken
• Cross-Plattform-Anwendungen: Sollen beide Token-Handling-Methoden implementieren

Tip

Wichtig für iOS: Sie MÜSSEN beide Token-Verwaltungsmethoden implementieren. Viele iOS-Entwickler gehen davon aus, dass sie immer Zugriffstoken erhalten und ihre Apps brechen, wenn die Benutzer das Tracking verweigern.

Sichere Kontextanforderungen (Web/Capacitor)

Crypto API Einschränkungen

Der aktualisierte Facebook-Login-Flow erfordert das Web Crypto API zur Nonce-Generierung, das nur in sicheren Kontexten:

// This requires secure context (HTTPS or localhost)
async function sha256(message: string) {
  const msgBuffer = new TextEncoder().encode(message);
  const hashBuffer = await crypto.subtle.digest("SHA-256", msgBuffer); // ❌ Fails in insecure context
  // ...
}

Probleme im Entwicklungsumfeld

Häufiges Problem: ionic serve HTTP-URLs verstoßen gegen die Facebook-Authentifizierung

Umwelt	Kryptographie 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

   # Instead of ionic serve --host=0.0.0.0
   ionic serve --host=localhost

2. HTTPS in Ionic aktivieren

   ionic serve --ssl

3. Auf echten Geräten testen

   # Capacitor apps run in secure context on devices
   ionic cap run ios
   ionic cap run android

4. Alternative Nichtzahlen-Generierung für Entwicklung

   async function generateNonce() {
     if (typeof crypto !== 'undefined' && crypto.subtle) {
       // Secure context - use crypto.subtle
       return await sha256(Math.random().toString(36).substring(2, 10));
     } else {
       // Fallback for development (not secure for production)
       console.warn('Using fallback nonce - not secure for production');
       return btoa(Math.random().toString(36).substring(2, 10));
     }
   }

Hinweis zur Firebase-Integration

Die jüngste Firebase-Dokumentation erfordert JWT-Tokens mit Nichtzahlen für die Facebook-Authentifizierung, unabhängig von den Anmeldeinstellungen. Diese Methode funktioniert sowohl mit als auch ohne limitedLogin: true Zwischenablage kopieren limitedLogin: false:

   // Both modes can return JWT tokens depending on user choice
   const loginResult = await SocialLogin.login({
     provider: 'facebook',
     options: {
       permissions: ['email', 'public_profile'],
       limitedLogin: false, // true = always JWT, false = depends on user tracking choice
       nonce: nonce
     }
   });

Wenn Sieauf einem Netzwerk-IP (nicht localhost) verwenden, funktioniert die Facebook-Anmeldung aufgrund von crypto __CAPGO_KEEP_0__ Einschränkungen nicht. Verwenden Sie localhost oder HTTPS für Web-Tests. ionic serve on a network IP (not localhost), Facebook login will fail due to crypto API restrictions. Use localhost or HTTPS for web testing.

Tip

Sicherheitsmaßnahmen: Capacitor Apps auf iOS/Android laufen immer in sicheren Kontexten, daher betrifft diese Einschränkung nur Webentwicklungsumgebungen.

Problembehandlung

Gemeinsame Probleme und Lösungen

1. Hash-Fehler bei Android

   • Überprüfen Sie, ob Sie den richtigen Schlüsselhash in der Facebook-Dashboard hinzugefügt haben
   • Stellen Sie sicher, dass Sie sowohl den Debug- als auch den Release-Schlüsselhash hinzugefügt haben
   • Überprüfen Sie, ob Sie den richtigen Keystore verwenden, wenn Sie den Hash generieren

2. Facebook-Login-Button erscheint nicht

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

3. Häufige iOS-Probleme

   • Stellen Sie sicher, dass alle Info.plist-Einträge korrekt sind
   • Überprüfen Sie, ob die URL-Schemas korrekt konfiguriert sind
   • Stellen Sie sicher, dass Ihr Bundle-ID mit dem in der Facebook-Dashboard registrierten übereinstimmt

Testen

1. Bevor Sie testen, fügen Sie in der Facebook-Entwicklerkonsole Testnutzer hinzu

   • Gehe zu Rollen > Testnutzer
   • Erstelle einen Testnutzer
   • Verwenden Sie diese Anmeldeinformationen für die Testung

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

   • Debug-Build mit Debug-Schlüsselhash
   • Release-Build mit Release-Schlüsselhash
   • Testen Sie auf beiden Emulatoren und physischen Geräten

Denken Sie daran, die gesamte Anmeldeablauf zu testen, einschließlich:

• Erfolgreiche Anmeldung
• Abbruch der Anmeldung
• Fehlerbehandlung
• Abmeldefunktion

Fortsetzen Sie von Facebook-Login-Einrichtung

If Sie Facebook Login verwenden Facebook Login Einrichten um die Authentifizierung und die Kontenflüsse zu planen, verbinden Sie es mit Verwenden Sie @capgo/capacitor-social-login für die native Fähigkeit in Verwenden Sie @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 Zwei-Faktor-Authentifizierung für die Implementierungsdetails in der Zwei-Faktor-Authentifizierung.