Facebook-Login-Einrichtung

Einleitung

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

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

Allgemeine Einstellungen

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

1. Facebook-App erstellen

   Folgen Sie der Anleitung, um Eine App erstellen

2. Facebook-Login zu Ihrer App hinzufügen

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

3. Bevor Sie Ihre App der Öffentlichkeit zugänglich machen können, folgen Sie diesem Leitfaden, 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

Diese Erweiterung unterstützt Facebook Business Login für Geschäftsbezogene Funktionen und Berechtigungen. Geschäftsconten können zusätzliche Berechtigungen außerhalb der Standard-Verbraucher-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 der Benutzer verwaltet
• pages_read_engagement - Lesen Sie Daten zur Engagement von Seiten
• pages_manage_posts - Verwalten Sie Beiträge auf Seiten
• business_management - Verwalten Sie Unternehmensanlagen

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

Konfigurationsanforderungen:

1. Ihr Facebook-App muss als Geschäftsanwendung im Facebook-Entwickler-Console konfiguriert sein.
2. Geschäftsberechtigungen können eine Facebook-App-Überprüfung vor der Produktionsnutzung erfordern.
3. Ihre App muss den Richtlinien für Geschäftsfallzwecke 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 die Geschäftsberechtigungen mit Testnutzern und Entwickleranwendungen vor der App-Überprüfung testen.
• Die meisten Geschäftsberechtigungen erfordern die Facebook-App-Überprüfung vor der Produktionsnutzung.
• Geschäftsanwendungen haben unterschiedliche Rate-Grenzen. Lesen Sie die aktuelle Plattformdokumentation von Facebook vor dem Launch.
• Folgen Sie dem Facebook Business Integration Guide bei der Anwendungs-Konfiguration.

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:

   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 Ihr 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 an, 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 Ihren 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 [APP_ID] mit Ihrem tatsächlichen Facebook-App-Id in der android:scheme Attribut

iOS-Einrichtung

1. Fügen Sie die iOS-Plattform im Facebook-Entwickler-Konsolen hinzu

   1. Gehen Sie zu der Dashboard-Seite Ihres Apps auf Facebook Developers
   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 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>

   Achtung

   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. Modifizieren 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)
           }
       }
   }

Mit 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 die Zugriffstoken- als auch die JWT-Tokens-Verwaltung in Ihrem Backend, um die Authentifizierung für alle Benutzer zu gewährleisten.

1. Initialisieren Sie die Facebook-Anmeldung 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 Anmeldefunktion

   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): Einstellung limitedLogin auf true setzen, wenn Sie die Funktion für den eingeschränkten Login von Facebook verwenden möchten. Dies ist eine iOS-only-Funktion, die die Datenschutzfunktion durch Einschränkung der während des Logins 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-Übernahme: Selbst wenn Sie limitedLogin: falsesetzen, wird Facebook die Einstellung true automatisch auf
   • setzen, wenn der Benutzer die App-Tracking-Transparenz-Berechtigung (ATT) nicht erteilt hatImmer beide Fälle behandeln

   Überprüfen Sie den Status von ATT:

   // 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 Daten: Einige Benutzerdaten mögen nicht verfügbar sein
   • Verschiedene Token-Typen: Zugriffstoken können unterschiedliche Funktionen haben
   • Datenschutzkonformität: Hilft bei der Einhaltung der iOS-Datenschutzanforderungen

   Wichtig: Testen Sie Ihre App immer mit begrenzten und vollständigen Anmelde-Szenarien, um sicherzustellen, dass Ihre App in beiden Fällen korrekt funktioniert. Sie können mehr über begrenzte Anmeldung hier erfahren. 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);
       }
     }
   }

   Hinweis

   Verfügbare Profilfelder: Sie können alle Felder anfordern, die im Facebook-Graph verfügbar sind. 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.

   Token-Typ-Begrenzung: Die getProfile funktioniert nur, wenn Sie ein Zugriffs-Token (Standard-Login mit Tracking erlaubt). Wenn der Benutzer das Tracking abgelehnt hat oder Sie ein begrenztes Login (JWT-Token nur) verwenden, wird diese Anfrage fehlschlagen. In diesem Fall sollten Sie die Profildaten verwenden, die in der Antwort auf den ersten Login bereitgestellt werden.

⚠️ Kritisch: Backend-Token-Verwaltung

Gefahr

KRITISCHE iOS-VERHALTEN: Eingeschränkter Login und App-Tracking-Transparenz (ATT) sind iOS-UNIG Funktionen. Auf Android erhalten Sie immer Zugriffs-Token, unabhängig von der limitedLogin Einstellung.

iOS Tokenverhalten:

• limitedLogin: true → Immer JWT-Token (nur iOS)
• limitedLogin: false + Benutzer ERLAUBT Tracking → Zugriffstoken
• limitedLogin: false + Benutzer VERWEIGERT Tracking → JWT-Token (iOS überschreibt automatisch Ihre Einstellung)

Android Tokenverhalten: Immer Zugriffstoken, limitedLogin Einstellung wird ignoriert.

Ihre Backend-Maschine muss zwei verschiedene Token-Typen verarbeiten weil iOS-Nutzer entweder Zugriffstoken oder JWT-Tokens je nach App-Tracking-Transparenz-Einstellung erhalten können, während Android-Nutzer immer Zugriffstoken erhalten.

Token-Typen nach Plattform

Plattform	limitedLogin-Einstellung	Benutzer-ATT-Wahl	Ergebnis-Tokentyp
iOS	true	Jeder	JWT-Token
iOS	false	Zulässige Tracking	Zugriffstoken
iOS	false	Tracking verweigert	JWT-Token (automatische Überschreibung)
Android	Jeder	N/A	Zugriffstoken (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-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

Kritische iOS-spezifische Informationen:

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

Zugriffstoken (Standard-Login):

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

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

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

Plattform-spezifische Verhaltensweisen:

• iOS-Anwendungen: Soll beide Zugriffstoken UND JWT-Tokens verarbeiten
• Android-Anwendungen: Braucht nur Zugriffstoken verarbeiten
• Cross-Plattform-Anwendungen: Soll beide Token-Verarbeitungsmethoden implementieren

Tip

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

Sicherheitskontextanforderungen (Web/Capacitor)

Crypto API Einschränkungen

Der aktualisierte Facebook-Login-Flow erfordert das Web Crypto API für die 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
  // ...
}

Entwicklungsumgebungsschwierigkeiten

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

Umwelt	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

   # 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 Nicht-Null-Wert-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

Neueste Firebase-Dokumentation erfordert JWT-Tokens mit Nonzen für die Facebook-Authentifizierung, unabhängig von den Anmeldeinstellungen. Diese Methode funktioniert sowohl mit als auch ohne limitedLogin: true und 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
     }
   });

Entwicklungsbeschränkung: Wenn Sie ionic serve auf einem Netzwerk-IP (nicht localhost) verwenden, wird die Facebook-Anmeldung aufgrund von crypto API Einschränkungen fehlschlagen. Verwenden Sie localhost oder HTTPS für Web-Tests.

Produktions-Sicherheit

Produktions-Sicherheitstipp: Capacitor Apps auf iOS/Android laufen immer in sicheren Kontexten, daher betrifft diese Einschränkung nur Webentwicklungsumgebungen.

Fehlersuche

Häufige Probleme und Lösungen

1. Fehler bei der Schlüsselhashung auf Android

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

2. Facebook-Login-Button erscheint nicht

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

3. Häufige iOS-Probleme

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

Testen

1. Bevor Sie testen, fügen Sie Testbenutzer im Facebook-Entwickler-Console hinzu

   • Gehe zu Rollen > Testbenutzer
   • Erstelle einen Testbenutzer
   • Verwenden Sie diese Anmeldeinformationen zum Testen

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
• Anmeldeabbruch
• Fehlerbehandlung
• Abmeldefunktion

Weitermachen von Facebook-Login-Einrichtung

Wenn Sie " Facebook-Login-Einrichtung" verwenden für die Planung der Authentifizierung und der Kontenflüsse, verbinden Sie es mit Mit @capgo/capacitor-social-login für die native Fähigkeit in Mit @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 Zwei-Faktor-Authentifizierung