Facebook-Login-Einrichten
Einen Einrichtungsvorschlag mit den Installationsanweisungen und der vollständigen Markdown-Guideline für diesen Plugin kopieren.
Einführung
Abschnitt mit dem Titel „Einführung“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)
Allgemeine Einrichtung
Abschnitt mit dem Titel „Allgemeine Einrichtung“Wenn Sie noch keinen Facebook-App erstellt haben, folgen Sie diesen Schritten:
-
Erstellen Sie eine Facebook-App
Folgen Sie der Anleitung Erstellen Sie eine App
-
Zum Facebook-Login hinzufügen
Fügen Sie im Facebook-Entwickler-Portal das Produkt Facebook-Login zu Ihrer App hinzu
-
Bevor Sie Ihre App der Öffentlichkeit zugänglich machen können, folgen Sie diesem Lehrbuch um es zu veröffentlichen
Wichtige Informationen
Abschnitt mit dem Titel “Wichtige Informationen”Hier finden Sie die wichtigsten Informationen, die Sie für die Integration benötigen:
-
CLIENT_TOKEN:
-
APP_ID:
-
APP_NAME:
Android-Einrichtung
Sektion mit dem Titel “Android-Einrichtung”-
Internet-Berechtigung zu Ihrem
AndroidManifest.xmlStellen Sie sicher, dass diese Zeile vorhanden ist:
<uses-permission android:name="android.permission.INTERNET"/> -
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 -AWenn Sie nach einem Passwort gefragt werden, verwenden Sie:
android -
Fügen Sie die Schlüsselhash-ID in Ihr Facebook-App
- Gehe zu deiner App-Dashboard auf Facebook-Entwickler
- Navigiere zu Einstellungen > Grundlegend
- Rutsche nach unten zur 'Android'-Sektion
- Klicken Sie auf 'Plattform hinzufügen', wenn Android noch nicht hinzugefügt wurde und füllen Sie die Details aus
- Fügen Sie den Schlüsselhash ein, den Sie generiert haben
- Für die Produktion fügen Sie sowohl den Debug- als auch den Release-Schlüsselhash hinzu
-
Aktualisieren Sie Ihr
AndroidManifest.xmlum Folgendes zu enthalten:<application>...<activity android:name="com.facebook.FacebookActivity"android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"android:label="@string/app_name" /><activityandroid: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>
iOS-Einrichtung
Abschnitt mit dem Titel “iOS-Einrichtung”-
Fügen Sie die iOS-Plattform im Facebook-Entwicklerkonsolen hinzu
- Gehen Sie zu der App-Dashboard-Seite von Facebook Entwicklern
- Navigieren Sie zu Einstellungen > Grundlegende Einstellungen
- Scrollen Sie bis zum unteren Ende der Seite und klicken Sie auf “Plattform hinzufügen”
- Wählen Sie iOS und füllen Sie die erforderlichen Details aus
-
Öffnen Sie Ihr Xcode-Projekt und navigieren Sie zu Info.plist
-
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> -
Ändern Sie das
AppDelegate.swiftimport FBSDKCoreKit@UIApplicationMainclass AppDelegate: UIResponder, UIApplicationDelegate {func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {// Override point for customization after application launch.// Initialize Facebook SDKFBSDKCoreKit.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 callif (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
Abschnitt mit dem Titel “Facebook-Login in Ihrer App verwenden”-
Facebook-Login in Ihrer App initialisieren
import { SocialLogin } from '@capgo/capacitor-social-login';// Initialize during app startupawait SocialLogin.initialize({facebook: {appId: 'APP_ID',clientToken: 'CLIENT_TOKEN',}}) -
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}} -
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 loginasync 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
getProfileAufruf 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.
⚠️ Kritisch: Backend-Token-Verwaltung
Abschnitt mit dem Titel “⚠️ Kritisch: Backend-Token-Verwaltung”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
Sektion mit dem Titel „Token-Typen nach Plattform“| Plattform | limitedLogin-Einstellung | Benutzer-ATT-Wahl | Token-Typ im Ergebnis |
|---|---|---|---|
| iOS | true | Jeder | JWT-Token |
| iOS | false | Zulässige Tracking | Zugriffstoken |
| iOS | false | Verweigert Tracking | __CAPGO_KEEP_0__ |
| Android | Jeder | N/A | __CAPGO_KEEP_0__ (immer) |
Hintergrund-Implementierung
Abschnitt mit dem Titel „Hintergrund-Implementierung“-
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);}} -
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 validationtry {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;}} -
Hintergrund JWT-Validierung
// Backend: Validate JWT token from Facebookimport 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-claimsconst 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 JWTconst userInfo = {id: decoded.sub,email: decoded.email,name: decoded.name,isJWTAuth: true};// Create your app's session/tokenconst 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' });}}); -
Allgemeiner Backend-Token-Handler
// Handle both token types in your backendasync function authenticateFacebookUser(tokenData: any) {if (tokenData.accessToken) {// Handle access token - validate with Facebook Graph APIconst 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-claimsconst 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
Abschnitt mit dem Titel „Hinweis: Wichtige Überlegungen“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
Sicherheitskontextanforderungen (Web/Capacitor)
Sektion mit dem Titel „Sicherheitsanforderungen für den Kontext (Web/Capacitor)“Crypto API Einschränkungen
Sektion mit dem Titel „Crypto API Einschränkungen“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 // ...}Entwicklungs-Umgebung-Probleme
Sektion mit dem Titel „Entwicklungs-Umgebung-Probleme“Häufiges Problem: ionic serve mit HTTP-URLs unterbricht 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
Sektion mit dem Titel “Lösungen für Capacitor-Entwicklung”-
Verwenden Sie localhost für Web-Tests
Terminalfenster # Instead of ionic serve --host=0.0.0.0ionic serve --host=localhost -
HTTPS in Ionic aktivieren
Terminalfenster ionic serve --ssl -
Auf echten Geräten testen
Terminalfenster # Capacitor apps run in secure context on devicesionic cap run iosionic cap run android -
Alternative Nicht-Null-Wert-Generierung für Entwicklung
async function generateNonce() {if (typeof crypto !== 'undefined' && crypto.subtle) {// Secure context - use crypto.subtlereturn 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
Abschnitt mit dem Titel “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 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.
Fehlersuche
Abschnitt mit dem Titel “Fehlersuche”Häufige Probleme und Lösungen
Abschnitt mit dem Titel “Häufige Probleme und Lösungen”-
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
-
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
-
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
-
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
-
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
Weitermachen von Facebook-Login-Einrichtung
Abschnitt mit dem Titel “Weitermachen von Facebook-Login-Einrichtung”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.