Facebook-Login-Einrichtung

Einführung

In diesem Guide lernen Sie, wie Sie Facebook-Login mit Capgo Social Login einrichten. Dazu benötigen Sie 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-Business-Login

Dieser Plugin unterstützt Facebook Business Login für Geschäftsbezogene Funktionen und Berechtigungen. Geschäftsaccounts können zusätzliche Berechtigungen außerhalb der Standard-Konsumenten-Login anfordern, einschließlich Instagram und Seitenverwaltung.

Unterstützte Geschäfts-Berechtigungen 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 Beteiligung von Seiten
• pages_manage_posts - Verwalten von Beiträgen auf Seiten
• business_management - Verwalten von Unternehmensanlagen

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

Konfigurationsanforderungen:

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 vor der Produktionsnutzung erfordern.
3. Ihre App muss den Geschäftsfall-Politiken von Facebook einhalten.

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 Entwicklungsanwendungen vor der App-Überprüfung testen.
• Die meisten Geschäftsrechte erfordern eine Facebook-App-Überprüfung vor der Produktionsnutzung.
• Unternehmens-APIs haben unterschiedliche Leistungsbeschränkungen. 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 nach einem Passwort gefragt 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. Rollen 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 Folgendes 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. iOS Setup
   2. Navigieren Sie zu Einstellungen > Grundlegend
   3. Rollen 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 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)
           }
       }
   }

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-Tokens-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 bei Facebook verwenden möchten. Dies ist ein iOS-schonender Feature, das die Datenschutzfunktion durch Einschränkung der während des Anmeldevorgangs geteilten Daten verbessert.

   Wichtige Einschränkungen:

   • Nur iOS: Der eingeschränkte Login wirkt sich nur auf iOS-Geräte aus und hat keinen Einfluss auf Android-Geräte
   • ATT-Übertragung umgehen: Selbst wenn Sie limitedLogin: falsefestlegen, wird Facebook es automatisch auf true setzen, wenn der Benutzer keine App-Tracking-Transparenz-Berechtigung (ATT) erteilt hat
   • Immer beide Fälle behandelnIhr App sollte immer auf beide begrenzte und volle Anmelde-Szenarien vorbereitet sein

   Ü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 begrenzter Anmeldung:

   • Geringere ZugriffsberechtigungenEinige Benutzerdaten mögen nicht verfügbar sein
   • Verschiedene Token-TypenAccess-Tokens können unterschiedliche Fähigkeiten haben
   • Datenschutz-Konformitä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. 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 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 Aufruf funktioniert nur, wenn Sie ein Zugriffstoken haben (Standard-Login mit Tracking erlaubt). Wenn der Benutzer das Tracking abgelehnt hat oder Sie ein eingeschränktes Login (JWT-Token nur) verwenden, funktioniert dieser Aufruf nicht. In diesem Fall können Sie die Profildaten verwenden, die in der Anmeldeantwort bereitgestellt werden.

⚠️ Kritisch: Backend-Handling von Token

Gefahr

KRITISCHE iOS-VERHALTEN: Eingeschränktes Login und App-Tracking-Transparenz (ATT) sind NUR FÜR iOS 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 Android-Token-Verhalten : Immer Zugriffstoken,

Einstellung wird ignoriert.Ihr Backend muss limitedLogin __CAPGO_KEEP_0__

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

Token-Typen nach Plattform

Plattform	limitedLogin-Einstellung	Benutzer-ATT-Einstellung	Endergebnis-Tokens-Typ
iOS	true	Jeder	JWT-Token
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. Firebase-Integration-Beispiel

   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-JSON-Web-Token-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:

• iOS: Die Wahl des Benutzers für die App-Tracking-Option bestimmt den Token-Typ, NICHT Ihre code-Einstellungen (auch 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 verwendet werden API
• ✅ Längere Ablaufzeiten
• ✅ Mehr Benutzerdaten verfügbar
• ❌ Wird auf iOS weniger häufig verwendet da Benutzer zunehmend den Tracking-Widerspruch erteilen

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

• ❌ Android: Nie auftritt (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 verarbeiten
• Android-Anwendungen: Brauchen nur Zugriffstoken
• Cross-Plattform-Anwendungen: Sollen beide Token-Verarbeitungsmethoden 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 ablehnen.

Sicherheitskontextanforderungen (Web/Capacitor)

Kryptolimitationen API

Der aktualisierte Facebook-Login-Flow erfordert das Web-Kryptolimitationen API für die Nonce-Generierung, die 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 verhindern die Facebook-Authentifizierung

Umgebung	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));
     }
   }

Firebase-Integration-Hinweis

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

Sicherheitsaspekte in der Produktion: 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 Hash in der Facebook-Dashboard hinzugefügt haben
   • Stellen Sie sicher, dass Sie sowohl den Debug- als auch den Release-Hash hinzugefügt haben, wenn Sie eine Veröffentlichung erstellen
   • Ü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 die SDK ordnungsgemäß initialisiert haben

3. Häufige iOS-Probleme

   • Stellen Sie sicher, dass alle Info.plist-Einträge korrekt sind
   • Überprüfen Sie, ob die URL-Schemata ordnungsgemäß 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 Testnutzer im Facebook-Entwickler-Console 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

Wenn Sie Facebook Login verwenden Facebook-Login-Einrichtung um die Authentifizierung und die Kontoflussplanung vorzubereiten, verbinden Sie es mit Verwenden Sie @capgo/capacitor-social-login für die native Fähigkeit in Verwenden Sie @capgo/capacitor-social-login Verwenden Sie @capgo/capacitor-social-login für die Implementierungsdetails in @capgo/capacitor-social-login Verwenden Sie @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-passkey Verwenden Sie @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.