Facebook-Login-Einrichtung

Einführung

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

• Ein Facebook-Entwicklerkonto
• Ihre App-Bezeichnung/Paket-ID
• Zugriff auf ein Terminal für die Erstellung von Hash-Schlüsseln (Android)

Allgemeine Einstellungen

Wenn Sie noch keine 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 Lehrbuch 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äftsrechnungen 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-Berichte
• pages_show_list - Liste der von der Person verwalteten Seiten
• pages_read_engagement - Lesen von Engagement-Daten von Seiten
• pages_manage_posts - Verwalten von Beiträgen auf Seiten
• business_management - Verwalten von Geschäftsanlagen

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

Konfigurationsanforderungen:

1. Ihr Facebook-App muss als Geschäfts-App 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 Geschäftsanwendungsrichtlinien 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 Unternehmensrechte mit Testnutzern und Entwickleranwendungen vor der App-Überprüfung testen.
• Die meisten Unternehmensrechte erfordern die Facebook-App-Überprüfung vor der Produktionsnutzung.
• Unternehmens-APIs haben unterschiedliche Rate Limits. Lesen Sie die aktuelle Plattformdokumentation von Facebook vor dem Launch.
• Facebook Facebook-Guide zur Unternehmensintegration wenn Sie die App konfigurieren.

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

   When prompted for a password, use: 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. Hinzufügen des Schlüssel-Hashes zu Ihrem Facebook-App

   1. Zum Dashboard Ihrer App auf Facebook Developers gehen
   2. Zum Einstellungen > Grundlegenden gehen
   3. Nach unten scrollen bis zur 'Android'-Sektion
   4. Klicken Sie auf „Hinzufügen“ wenn Android noch nicht hinzugefügt wurde und füllen Sie die Details aus
   5. Hinzufügen des Schlüssel-Hashes, den Sie generiert haben
   6. Für die Produktion beide Debug- und Release-Schlüssel-Hashes hinzufügen

4. Die AndroidManifest.xml um einschließ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>

   Vorsicht

   Stellen Sie sicher, dass Sie den [APP_ID] mit Ihrem tatsächlichen Facebook-App-Id in dem android:scheme Attribut

iOS-Einrichtung

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

   1. Gehen Sie zu Ihrem App-Dashboard auf Facebook Developers
   2. Navigieren Sie zu Einstellungen > Grundlegend
   3. Scrollen Sie bis zum 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 limitedLogin auf true, wenn Sie das Feature für eingeschränkten Login von Facebook verwenden möchten. Dies ist ein iOS-schonender Feature, das die Privatsphäre durch Einschränkung der während des Logins geteilten Daten erhöht.

   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-Überschreibung: Selbst wenn Sie limitedLogin: falsesetzen, wird Facebook es automatisch auf true stellen, wenn der Benutzer die App-Tracking-Transparenz-Berechtigung nicht erteilt hat
   • Immer beide Fälle behandeln: Ihre App sollte immer auf die Behandlung beider eingeschränkter und vollständiger 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 eingeschränkter Anmeldung:

   • Geringere Zugriffsberechtigungen: Einige Benutzerdaten mögen nicht verfügbar sein
   • Verschiedene Token-Typen: Access-Tokens können unterschiedliche Fähigkeiten haben
   • Datenschutz-Konformität: Hilft bei der Einhaltung der iOS-Datenschutzanforderungen

   Wichtig: 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 eingeschränkte Anmeldung hier erfahren. Hier.

3. Nutzerprofil 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);
       }
     }
   }

   Tipps

   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 nur funktioniert, wenn Sie einen Zugriffstoken (Standard-Login mit Tracking erlaubt). Wenn der Benutzer das Tracking abgelehnt hat oder Sie ein begrenztes Login (JWT-Token nur) verwenden, funktioniert diese Anfrage nicht. In diesem Fall verwenden Sie die im Login-Antwort bereitgestellten Profil-Daten.

⚠️ Kritisch: Backend-Token-Handling

Warnung

KRITISCHE iOS-VERHALTEN: Begrenztes Login und App-Tracking-Transparenz (ATT) sind iOS-UNABHÄNGIG Merkmale. Auf Android erhalten Sie immer Zugriffstoken, unabhängig von der limitedLogin Einstellung.

Verhalten des iOS-Tokens:

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

Ihre Einstellung wird ignoriert.: Immer Zugriffstoken, limitedLogin → JWT-Token (Android überschreibt Ihre Einstellung automatisch)

Ihr Backend muss verarbeiten → JWT-Token (Android überschreibt Ihre Einstellung automatisch) weil iOS-Nutzer entweder Zugriffstoken oder JWT-Tokens erhalten können, je nach ihrer Wahl zur App-Tracking-Transparenz, während Android-Nutzer immer Zugriffstoken erhalten.

Token-Typen nach Plattform

Plattform	Einschränkter Login	Benutzer-ATT-Wahl	Ergebnis-Tokens-Typ
iOS	true	Jeder	JWT-Token
iOS	false	Zulässige Tracking	Zugriffs-Token
iOS	false	Verweigert Tracking	JWT-Token (automatische Überschreibung)
Android	Jeder	N/A	Zugriffs-Token (immer)

Hintergrund-Implementierung

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-Beispiel für die 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

Kritischer iOS-spezifischer Verständnis:

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

Access Token (Standard-Login):

• ✅ Android: Immer verfügbar (iOS-Beschrä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
• ❌ Wird auf iOS weniger häufig verwendet da Benutzer zunehmend das Tracking verweigern

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

• ❌ Android: Nie vorkommt (nicht unterstützt)
• ✅ iOS: Wenn das Tracking verweigert oder limitedLogin: true
• ✅ Respektiert iOS-Benutzerpräferenzen für die Privatsphäre
• ❌ 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: Soll beide Zugriffstoken UND JWT-Tokens verarbeiten
• Android-Anwendungen: Soll nur Zugriffstoken verarbeiten
• Cross-Plattform-Anwendungen: Soll 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)

Kryptographische API Einschränkungen

Der aktualisierte Facebook-Login-Flow erfordert das Web-Kryptographie 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 mit HTTP-URLs unterbricht 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));
     }
   }

Hinweis zur Firebase-Integration

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

Beschränkung bei der EntwicklungWenn Sie Facebook als Anmelde-Provider verwenden ionic serve auf einem Netzwerk-IP (nicht localhost) verwenden, funktioniert die Facebook-Anmeldung aufgrund von crypto API Einschränkungen nicht. Verwenden Sie localhost oder HTTPS für Web-Tests.

Tipps

Produkt-Sicherheit: 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üsselhash-Überprüfung auf Android

   • Überprüfen Sie, ob Sie den richtigen Schlüsselhash im 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, ob alle Manifest-Einträge korrekt sind
   • Überprüfen Sie, dass Ihre Facebook-App-ID und Client-Token korrekt sind
   • Ensure you’ve properly initialized the SDK

3. Häufige iOS-Probleme

   • Stellen Sie sicher, dass alle Info.plist-Einträge korrekt sind
   • Überprüfen Sie die URL-Schemata auf korrekte Konfiguration
   • 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
   • Use these credentials for testing

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

Wenn Sie Facebook-Login verwenden Facebook-Login-Einrichtung um die Authentifizierung und die Kontenflüsse zu planen und sie mit Mit @capgo/capacitor-social-login für die native Fähigkeit in Mit @capgo/capacitor-social-login, Mit @capgo/capacitor-social-login für die Implementierungsdetails in @capgo/capacitor-social-login, Mit @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-passkey, Mit @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.