Facebook-Login-Einrichtung
Einen Setup-Vorschlag mit den Installationsanweisungen und der vollständigen Markdown-Anleitung für diesen Plugin erstellen.
Einführung
Abschnitt mit dem Titel „Einführung“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)
Allgemeine Einstellungen
Abschnitt mit dem Titel “Allgemeine Einstellungen”Wenn Sie noch keinen Facebook-App erstellt haben, folgen Sie diesen Schritten:
-
Facebook-App erstellen
Folgen Sie dem Tutorial, um Eine App zu erstellen
-
Facebook-Login zu Ihrer App hinzufügen
In Ihrem Facebook-Entwickler-Dashboard fügen Sie dem Produkt Facebook-Login zu Ihrer App hinzu
-
Bevor Sie Ihre App der Öffentlichkeit zugänglich machen können, folgen Sie diesem Tutorial, 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
Abschnitt mit dem Titel „Android-Einrichtung“-
Internet-Zugriffsrechte zu Ihrem
AndroidManifest.xmlStellen Sie sicher, dass diese Zeile vorhanden ist:
<uses-permission android:name="android.permission.INTERNET"/> -
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 -AWenn Sie nach einem Passwort gefragt werden, verwenden Sie:
android -
Fügen Sie den Schlüsselhash zu Ihrer Facebook-App hinzu
- Gehen Sie zu Ihrem App-Dashboard auf Facebook Developers
- Navigieren Sie zu Einstellungen > Grundlegend
- Scrollen Sie nach unten zur "Android"-Sektion
- Klicken Sie auf "Add Platform", wenn Android noch nicht hinzugefügt wurde, und füllen Sie die Details aus
- Fügen Sie den von Ihnen generierten Schlüsselhash hinzu
- Für die Produktion fügen Sie sowohl den Debug- als auch den Release-Schlüsselhash hinzu
-
Aktualisieren Sie Ihren
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 Setup
Abschnitt mit dem Titel „iOS Setup”-
Fügen Sie die iOS-Plattform im Facebook-Entwicklerkonsolen hinzu
- Gehe zu deinem App-Dashboard auf Facebook Developers
- Navigiere zu Einstellungen > Grundlegend
- Rolle nach unten bis zum unteren Ende der Seite und klicke auf „Plattform hinzufügen”
- Wählen Sie iOS und füllen Sie die erforderlichen Details aus
-
Öffne dein Xcode-Projekt und navigiere zu Info.plist
-
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> -
Ä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)}}}
Verwendung von Facebook-Login in Ihrer App
Abschnitt mit dem Titel „Verwendung von Facebook-Login in Ihrer App”-
Initialize the Facebook login in your app
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 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 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 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.
⚠️ Kritisch: Backend-Handling von Tokens
Abschnitt mit dem Titel „⚠️ Kritisch: Backend-Handling von Tokens“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-Einstellung | Benutzer-ATT-Wahl | Endergebnis-Tokens-Typ | Token-Typen nach Plattform |
|---|---|---|---|
| iOS | true | Jeder | JSON Web Token |
| iOS | false | Ermöglicht Tracking | Access Token |
| iOS | false | Verweigert Tracking | JSON Web Token (auto-override) |
| Android | Jeder | N/A | Zugriffs-Token (immer) |
Hintergrundimplementierung
Abschnitt mit dem Titel „Hintergrundimplementierung“-
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);}} -
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-JSON-Web-Token-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 Hintergrund-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');}}
Hinweise zur Sicherheit
Abschnitt mit dem Titel „Hinweise zur Verwendung“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
Sicherheitskontextanforderungen (Web/Capacitor)
Abschnitt mit dem Titel „Sicherheitskontextanforderungen (Web/Capacitor)“Crypto API Einschränkungen
Abschnitt mit dem Titel „Crypto API Einschränkungen“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 // ...}Entwicklungs-Umgebungsprobleme
Abschnitt mit dem Titel “Entwicklungs-Umgebungsprobleme”Häufiges Problem: ionic serve mit HTTP-URLs bricht 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
Abschnitt mit dem Titel „Lösungen für Capacitor Entwicklung”-
Verwenden Sie localhost für Web-Testen
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 Nichtzahlen-Generierung für die 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));}}
Hinweis zur Firebase-Integration
Abschnitt mit dem Titel „Hinweis zur Firebase-Integration“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.
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 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
-
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 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
-
Bevor Sie testen, fügen Sie Testnutzer im Facebook-Entwickler-Console hinzu
- Gehe zu Rollen > Testnutzer
- Erstelle einen Testnutzer
- Verwende diese Anmeldeinformationen zum Testen
-
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
Weitermachen von Facebook-Login-Einrichtung
Abschnitt mit dem Titel “Weitermachen von Facebook-Login-Einrichtung”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.