Zum Inhalt springen

Facebook-Login-Einrichtung

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

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

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

  1. Facebook-App erstellen

    Folgen Sie dem Tutorial, um Eine App zu erstellen

  2. Facebook-Login zu Ihrer App hinzufügen

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

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

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

  1. CLIENT_TOKEN:

    Facebook-Entwicklerdashboard, auf dem der Client-Token zu finden ist
  2. APP_ID:

    Facebook-Entwicklerdashboard, auf dem die App-ID zu finden ist
  3. APP_NAME:

    Facebook-Entwicklerdashboard, auf dem die App-Bezeichnung zu finden ist
  1. Internet-Zugriffsrechte zu Ihrem 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 entscheidender Sicherheitsschritt, der von Facebook erforderlich ist.

    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 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. 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 von Ihnen generierten Schlüsselhash hinzu
    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>
  1. Fügen Sie die iOS-Plattform im Facebook-Entwicklerkonsolen hinzu

    1. Gehe zu deinem App-Dashboard auf Facebook Developers
    2. Navigiere zu Einstellungen > Grundlegend
    3. Rolle nach unten bis zum unteren Ende der Seite und klicke auf „Plattform hinzufügen”
    4. Wählen Sie iOS und füllen Sie die erforderlichen Details aus
  2. Öffne dein Xcode-Projekt und navigiere zu Info.plist

  3. Fügen Sie die folgenden Einträge zu 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. Initialize the Facebook login in your 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
    }
    }
  3. Benutzerprofil-Daten 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);
    }
    }
    }

    Token-Typ-Begrenzung: Der getProfile Aufruf funktioniert nur, wenn Sie ein Zugriffstoken (Standard-Login mit Tracking erlaubt) besitzen. Wenn der Benutzer das Tracking abgelehnt hat oder Sie ein eingeschränktes Login (JWT-Token nur) verwenden, funktioniert dieser Aufruf nicht. In diesem Fall sollten Sie die Profildaten verwenden, die in der Initialanmeldeantwort bereitgestellt werden.

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

Abschnitt mit dem Titel “Token-Typen nach Plattform”

Plattform
limitedLogin-EinstellungBenutzer-ATT-WahlEndergebnis-Tokens-TypToken-Typen nach Plattform
iOStrueJederJSON Web Token
iOSfalseErmöglicht TrackingAccess Token
iOSfalseVerweigert TrackingJSON Web Token (auto-override)
AndroidJederN/AZugriffs-Token (immer)
  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');
    }
    }

Zugriffstoken (Standard-Login):

  • Android: Immer verfügbar (iOS-Beschränkungen gelten nicht)
  • iOS: Nur wenn der Benutzer die App-Tracking-Erlaubnis erteilt
  • ✅ Kann verwendet werden, um den Facebook-Graphen API zu zugreifen
  • ✅ Längere Ablaufzeiten
  • ✅ Mehr Benutzerdaten verfügbar
  • Im iOS wird es weniger häufig verwendet da Benutzer zunehmend die Tracking-Erlaubnis verweigern

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

  • Android: Nie (nicht unterstützt)
  • iOS: Wenn die Verfolgung abgelehnt oder limitedLogin: true
  • ✅ Respektiert iOS-Benutzereinstellungen für Datenschutz
  • ❌ Enthält grundlegende Informationen über den Benutzer
  • ❌ Kürzere Ablaufzeiten
  • ❌ Kein Zugriff auf Facebook-Graph API
  • ⚠️ Jetzt ist die häufigste Szenario für iOS-Nutzer

Plattform-spezifische Verhaltensweisen:

  • iOS-Anwendungen: Muss sowohl Zugriffstoken als auch JWT-Tokens verarbeiten
  • Android-Anwendungen: Braucht nur Zugriffstoken zu verarbeiten
  • Plattform-unabhängige Apps: Muss beide Token-Verwaltungsmethoden implementieren

Der aktualisierte Facebook-Login-Flow erfordert das Web Crypto API für die Nichtzweck-Generierung, die nur in sichere Kontexte:

// 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 bricht die Facebook-Authentifizierung

UmgebungKryptographie 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-Testen

    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 Nichtzahlen-Generierung für die 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));
    }
    }

Die jüngste 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 In die Zwischenablage kopieren limitedLogin: false:

// Both modes can return JWT tokens depending on user choice
const loginResult = await SocialLogin.login({
provider: 'facebook',
options: {
permissions: ['email', 'public_profile'],
limitedLogin: false, // true = always JWT, false = depends on user tracking choice
nonce: nonce
}
});

Entwicklungsbeschränkung: Wenn Sie auf einem Netzwerk-IP (nicht localhost) arbeiten, ionic serve Wegen der API-Beschränkungen aufgrund von Kryptographie funktioniert Facebook-Login nicht. Verwenden Sie localhost oder HTTPS für Web-Tests.

  1. Fehler bei der Schlüsselhashung auf Android

    • Stellen Sie sicher, dass Sie die richtige Schlüsselhash-ID in der Facebook-Dashboard hinzugefügt haben
    • Für Release-Builds stellen Sie sicher, dass Sie sowohl die Debug- als auch die Release-Schlüsselhash-ID hinzugefügt haben
    • Überprüfen Sie, ob Sie den richtigen Keystore verwenden, wenn Sie die Hash-ID 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 Info.plist-Einträge korrekt sind
    • Überprüfen Sie, ob die URL-Schemata korrekt konfiguriert sind
    • Stellen Sie sicher, dass Ihre Bundle-ID mit der in der Facebook-Dashboard registrierten übereinstimmt
  1. Bevor Sie testen, fügen Sie Testnutzer im Facebook-Entwickler-Console hinzu

    • Gehe zu Rollen > Testnutzer
    • Erstelle einen Testnutzer
    • Verwende diese Anmeldeinformationen zum Testen
  2. Teste sowohl Debug- als auch Release-Builds

    • Debug-Build mit Debug-Schlüsselhash
    • Release-Build mit Release-Schlüsselhash
    • Teste auf beiden Emulatoren und physischen Geräten

Denken Sie daran, den gesamten Anmeldeprozess zu testen, einschließlich:

  • Erfolgreicher Anmeldung
  • Anmeldeabsage
  • Fehlerbehandlung
  • Abmeldefunktion

Wenn Sie " Facebook-Login-Einrichtung" zum Planen der Authentifizierung und der Kontoflows verwenden, verbinden Sie sie mit Mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login für die native Fähigkeit in Mit @capgo/capacitor-social-login, @capgo/capacitor-social-login für die Implementierungsdetail in @capgo/capacitor-social-login, @capgo/capacitor-passkey Mit @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-Passkey, @capgo/capacitor-native-biometrisch für die Implementierungsdetails in @capgo/capacitor-native-biometrisch, und Zwei-Faktor-Authentifizierung für die Implementierungsdetails in Zwei-Faktor-Authentifizierung.