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 Facebook-Login-Produkt Ihrer App hinzu

3. Bevor Sie Ihre App der Öffentlichkeit zugänglich machen können, folgen Sie diesem Tutorial, um es zu veröffentlichen Um Ihre App der Öffentlichkeit zugänglich zu machen

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

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

Unterstützte Geschäftsrechte 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 die Nutzungsdaten von Seiten
• pages_manage_posts - Verwalten Sie Beiträge auf Seiten
• business_management - Verwalten Sie Geschäftsanlagen

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

Konfigurationsanforderungen:

1. Ihre 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 Geschäftsfallrichtlinien 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 Entwicklungsanwendungen 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, bevor Sie starten.
• Folgen Sie dem Facebook Business Integration Guide bei der Anwendungsconfigurierung.

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

   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 der App-Dashboard-Seite von 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 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-Console hinzu

   1. Gehen Sie zu der App-Dashboard auf Facebook Developers
   2. Navigieren Sie zu Einstellungen > Grundlegend
   3. Rollen Sie nach unten zum unteren Ende der Seite und klicken Sie auf “Add Platform”
   4. iOS auswählen und die erforderlichen Details einfüllen

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. 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 den Zugriffstoken- als auch den JWT-Tokens-Handling in Ihrem Backend, um sicherzustellen, dass die Authentifizierung für alle Benutzer funktioniert.

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): Setzen Sie limitedLogin 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
   • zwingen, wenn der Benutzer die App-Tracking-Transparenz-Berechtigung (ATT) nicht erteilt hatImmer beide Fälle behandeln

   Ü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 Daten: Einige Benutzerdaten mögen nicht verfügbar sein
   • Verschiedene Token-Typen: Access-Tokens können unterschiedliche Berechtigungen haben
   • Datenschutzkonformitä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. 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 einen Zugriffs-Token haben (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 verwenden Sie die Profildaten, die in der Anmeldeantwort 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 → Token immer JWT (nur iOS)
• limitedLogin: false + Benutzer ERLAUBT Tracking → Zugriffstoken
• limitedLogin: false + Benutzer VERWEIGERT Tracking → JWT-TOKEN (iOS überschreibt automatisch Ihre Einstellung)

Android Tokenverhalten: Zugriffstoken immer, 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-Wahl erhalten können, während Android-Nutzer immer Zugriffstoken erhalten.

Token-Typen nach Plattform

Plattform	limitedLogin-Einstellung	Benutzer ATT-Wahl	Ergebnis-Tokens-Typ
iOS	true	Jeder	JWT-Token
iOS	false	Zulässige Tracking	Zugriffs-Token
iOS	false	Keine Tracking-Aktivität	JWT-Token (automatische Überschreibung)
Android	Jeder	N/A	Access 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-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 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. Generischer 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');
     }
   }

Schlüsselüberlegungen

Gefahr

Kritischer iOS-spezifischer Verständnis:

• iOS: Die Wahl des Nutzers für die App-Tracking 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

Access Token (Standard Login):

• ✅ Android: Immer verfügbar (iOS-Beschränkungen gelten nicht)
• ✅ iOS: Nur wenn der Benutzer die App-Berechtigung explizit erlaubt
• ✅ Kann verwendet werden, um auf das Facebook-Graph API zuzugreifen
• ✅ Längere Ablaufzeiten
• ✅ Mehr Benutzerdaten verfügbar
• ❌ Becoming less common on iOS als Benutzer Tracking immer mehr ablehnen

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

• ❌ Android: Nie tritt auf (nicht unterstützt)
• ✅ iOS: Wenn Tracking abgelehnt oder limitedLogin: true
• ✅ Respektiert iOS-Benutzer-Privatsphäre-Einstellungen
• ❌ 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-platform-Anwendungen: Soll beide Token-Verarbeitungsmethoden implementieren

Tip

Wichtig für iOS: DU MUSST beide Token-Verarbeitungsmethoden implementieren. Viele iOS-Entwickler nehmen an, dass sie immer Zugriffstoken erhalten und ihre Apps brechen, wenn die Benutzer das Tracking verweigern.

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
  // ...
}

Entwicklungs-Umgebungsprobleme

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

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

Lösungen für Capacitor Entwicklung

1. Verwenden Sie localhost für Web-Tests

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

Hinweis zur Firebase-Integration

Neueste Firebase-Dokumentation erfordert JWT-Tokens mit Nonzen für die Facebook-Authentifizierung, unabhängig von den Einstellungen zum Login. 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
     }
   });

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

Tipp

Sicherheit in der Produktion: 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 in der Facebook-Dashboard-Übersicht 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-Schemata ordnungsgemäß konfiguriert sind
   • Stellen Sie sicher, dass Ihr Bundle-ID mit der im 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 zum Testen

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

   • Debug-Ausführung mit Debug-Schlüsselhash
   • Release-Ausführung 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 um die Authentifizierung und die Kontenflüsse zu planen, verbinden Sie es mit Mit @capgo/capacitor-social-login verwenden 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.