Zum Inhalt springen

Facebook-Login-Einrichten

GitHub

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

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

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

  1. Erstellen Sie eine Facebook-App

    Folgen Sie der Anleitung Erstellen Sie eine App

  2. Zum Facebook-Login hinzufügen

    Fügen Sie im Facebook-Entwickler-Portal das Produkt Facebook-Login zu Ihrer App hinzu

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

Hier finden Sie die wichtigsten Informationen, die Sie für die Integration benötigen:

  1. CLIENT_TOKEN:

    Facebook-Entwickler-Portal, wo der Client-Token gefunden wird
  2. APP_ID:

    Facebook-Entwickler-Portal, wo die App-ID gefunden wird
  3. APP_NAME:

    Facebook-Entwickler-Portal, wo der App-Name gefunden wird
  1. Internet-Berechtigung zu Ihrem AndroidManifest.xml

    Stellen Sie sicher, dass diese Zeile vorhanden ist:

    <uses-permission android:name="android.permission.INTERNET"/>
  2. Erstellen Sie Ihre Android-Schlüsselhash

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

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

    Wenn Sie nach einem Passwort gefragt werden, verwenden Sie: android

  3. Fügen Sie die Schlüsselhash-ID in Ihr Facebook-App

    1. Gehe zu deiner App-Dashboard auf Facebook-Entwickler
    2. Navigiere zu Einstellungen > Grundlegend
    3. Rutsche nach unten zur 'Android'-Sektion
    4. Klicken Sie auf 'Plattform hinzufügen', 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 Ihr 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>
  1. Fügen Sie die iOS-Plattform im Facebook-Entwicklerkonsolen hinzu

    1. Gehen Sie zu der App-Dashboard-Seite von Facebook Entwicklern
    2. Navigieren Sie zu Einstellungen > Grundlegende Einstellungen
    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>
  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)
    }
    }
    }
  1. Facebook-Login in Ihrer App initialisieren

    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
    }
    }
  3. Benutzerprofil-Daten abrufen

    Nach erfolgreichem Login können Sie weitere Profildaten 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);
    }
    }
    }

    Token-Typ-Begrenzung: Der getProfile Aufruf funktioniert nur, wenn Sie ein Zugriffs-Token (Standard-Login mit Tracking erlaubt). Wenn der Benutzer das Tracking abgelehnt hat oder Sie den eingeschränkten Login (nur JWT-Token) verwenden, schlägt diese Anfrage fehl. In diesem Fall verwenden Sie die im Login-Antwort bereitgestellten Profil-Daten.

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.

PlattformlimitedLogin-EinstellungBenutzer-ATT-WahlToken-Typ im Ergebnis
iOStrueJederJWT-Token
iOSfalseZulässige TrackingZugriffstoken
iOSfalseVerweigert Tracking__CAPGO_KEEP_0__
AndroidJederN/A__CAPGO_KEEP_0__ (immer)
  1. Token-Typ erkennen und entsprechend behandeln

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

    import { OAuthProvider, FacebookAuthProvider, signInWithCredential } from 'firebase/auth';
    async function handleAccessToken(accessToken: string, nonce: string) {
    // For access tokens, use OAuthProvider (new method)
    const fbOAuth = new OAuthProvider("facebook.com");
    const credential = fbOAuth.credential({
    idToken: accessToken,
    rawNonce: nonce
    });
    try {
    const userResponse = await signInWithCredential(auth, credential);
    return userResponse;
    } catch (error) {
    console.error('Firebase OAuth error:', error);
    return false;
    }
    }
    async function handleJWTToken(jwtToken: string) {
    // For JWT tokens, send to your backend for validation
    try {
    const response = await fetch('/api/auth/facebook-jwt', {
    method: 'POST',
    headers: {
    'Content-Type': 'application/json',
    },
    body: JSON.stringify({ jwtToken })
    });
    const result = await response.json();
    return result;
    } catch (error) {
    console.error('JWT validation error:', error);
    return false;
    }
    }
  3. Hintergrund JWT-Validierung

    // Backend: Validate JWT token from Facebook
    import jwt from 'jsonwebtoken';
    import { Request, Response } from 'express';
    app.post('/api/auth/facebook-jwt', async (req: Request, res: Response) => {
    const { jwtToken } = req.body;
    try {
    // Verify JWT token with Facebook's public key
    // See: https://developers.facebook.com/docs/facebook-login/limited-login/token/validating/#standard-claims
    const decoded = jwt.verify(jwtToken, getFacebookPublicKey(), {
    algorithms: ['RS256'],
    audience: process.env.FACEBOOK_APP_ID,
    issuer: 'https://www.facebook.com' // From: https://www.facebook.com/.well-known/openid-configuration/?_rdr
    });
    // Extract user info from JWT
    const userInfo = {
    id: decoded.sub,
    email: decoded.email,
    name: decoded.name,
    isJWTAuth: true
    };
    // Create your app's session/token
    const sessionToken = createUserSession(userInfo);
    res.json({
    success: true,
    token: sessionToken,
    user: userInfo
    });
    } catch (error) {
    console.error('JWT validation failed:', error);
    res.status(401).json({ success: false, error: 'Invalid token' });
    }
    });
  4. Allgemeiner Backend-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');
    }
    }

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 seltener verwendet da Benutzer Tracking immer häufiger ablehnen

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

  • Android: Nie vorkommt (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 der häufigste Szenario für iOS-Benutzer

Plattform-spezifische Verhaltensweisen:

  • iOS-Anwendungen: Soll beide Zugriffstoken UND JWT-Tokens handhaben können
  • Android-Anwendungen: Nur Zugriffstoken handhaben müssen
  • Cross-Plattform-Anwendungen: Beide Token-Handling-Methoden implementieren müssen

Die aktualisierte Facebook-Anmeldeablauf 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
// ...
}

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

UmgebungCrypto API verfügbarFacebook-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
  1. Verwenden Sie localhost für Web-Tests

    Terminalfenster
    # Instead of ionic serve --host=0.0.0.0
    ionic serve --host=localhost
  2. HTTPS in Ionic aktivieren

    Terminalfenster
    ionic serve --ssl
  3. Auf echten Geräten testen

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

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 auf einem Netzwerk-IP (nicht localhost) arbeiten, 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.

  1. Fehler bei der Hash-Berechnung auf Android

    • Doppelchecken Sie, ob Sie den richtigen Hash in der Facebook-Dashboard hinzugefügt haben
    • Für Release-Builds stellen Sie sicher, dass Sie sowohl den Debug- als auch den Release-Hash 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
    • Stellen Sie sicher, dass Ihre Facebook-App-ID und Client-Token korrekt sind
    • Stellen Sie sicher, dass Sie den SDK korrekt 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
  1. Bevor Sie testen, fügen Sie Testnutzer im Facebook-Entwickler-Console hinzu

    • Gehen Sie zu Rollen > Testnutzer
    • Erstellen Sie einen Testnutzer
    • 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 Anmeldeflow zu testen, einschließlich:

  • Erfolgreiche Anmeldung
  • Anmeldeabbruch
  • Fehlerbehandlung
  • Abmeldefunktion

Wenn Sie Facebook-Login-Einrichtung zur Planung der Authentifizierung und Kontoflows verwenden, verbinden Sie sie 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.