Facebook Impostazione accesso

Introduzione

In questa guida imparerai come configurare Facebook Accedi con Capgo Accesso social. Avrai bisogno di quanto segue:

• Un account sviluppatore Facebook
• Il nome del pacchetto/l’ID bundle della tua app
• Accesso a un terminale per la generazione degli hash delle chiavi (Android)

Configurazione generale

Se non hai già creato un’app Facebook, procedi nel seguente modo:

1. Crea un’app Facebook

   Segui il tutorial per Creare un’app

2. Aggiungi Facebook Accedi alla tua app

   Nella tua Facebook Dashboard per sviluppatori, aggiungi il prodotto Facebook Login alla tua app

3. Prima di poter rilasciare la tua app al pubblico, segui questo tutorial per pubblicarla

Informazioni importanti

Ecco dove trovare le informazioni chiave necessarie per l’integrazione:

1. CLIENT_TOKEN:

   

2. APP_ID:

   

3. APP_NAME:

   

Android Configurazione

1. Aggiungi l’autorizzazione Internet al tuo AndroidManifest.xml

   Assicurati che questa riga sia presente:

   <uses-permission android:name="android.permission.INTERNET"/>

2. Genera l’hash della chiave Android

   Questo è un passaggio di sicurezza cruciale richiesto da Facebook. Apri il tuo terminale ed esegui:

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

   Quando viene richiesta una password, utilizzare: android

   Per le build di rilascio, dovrai utilizzare il tuo archivio chiavi di rilascio:

   keytool -exportcert -alias your-key-name -keystore your-keystore-path | openssl sha1 -binary | openssl base64 -A

3. Aggiungi l’hash della chiave alla tua app Facebook

   1. Vai alla dashboard della tua app su Facebook Developers
   2. Vai su Impostazioni > Base
   3. Scorri verso il basso fino alla sezione “Android”.
   4. Fai clic su “Aggiungi piattaforma” se Android non è ancora stato aggiunto e inserisci i dettagli
   5. Aggiungi l’hash della chiave che hai generato
   6. Per la produzione, aggiungere gli hash delle chiavi di debug e di rilascio

4. Aggiorna il tuo AndroidManifest.xml per includere:

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

   Assicurati di sostituire [APP_ID] con il tuo effettivo ID app Facebook nell’attributo android:scheme

iOS Configurazione

1. Aggiungi la piattaforma iOS nella Facebook Console per gli sviluppatori

   1. Vai alla dashboard della tua app su Facebook Developers
   2. Vai su Impostazioni > Base
   3. Scorri fino in fondo alla pagina e fai clic su “Aggiungi piattaforma”
   4. Seleziona iOS e inserisci i dettagli richiesti

2. Apri il tuo progetto Xcode e vai a Info.plist

3. Aggiungi le seguenti voci al tuo Info.plist:

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

   Sostituisci i seguenti valori:

   • [APP-ID] con il tuo ID app Facebook
   • [CLIENT-TOKEN] con il tuo token cliente
   • [APP-NAME] con il nome della tua app

4. Modifica 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)
           }
       }
   }

Utilizzando Facebook Accedi alla tua app:::caution

Prima di iniziare: ricorda che con il nuovo Facebook SDK, il tipo di token che ricevi dipende interamente dalla scelta di monitoraggio dell’app dell’utente, non dalla configurazione del codice. Implementa sempre sia il token di accesso che la gestione del token JWT nel tuo backend per garantire che l’autenticazione funzioni per tutti gli utenti. :::

1. Inizializza l’accesso Facebook nella tua app

   import { SocialLogin } from '@capgo/capacitor-social-login';
   
   // Initialize during app startup
   await SocialLogin.initialize({
     facebook: {
       appId: 'APP_ID',
       clientToken: 'CLIENT_TOKEN',
     }
   })

2. Implementare la funzione di accesso

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

   Accesso limitato (solo iOS): imposta limitedLogin su true se desideri utilizzare la funzione di accesso limitato di Facebook. Questa è una funzionalità riservata solo a iOS che fornisce una maggiore privacy limitando i dati condivisi durante l’accesso.

   Limitazioni importanti:

   • iOS Solo: l’accesso limitato riguarda solo i dispositivi iOS e non ha alcun impatto su Android
   • Sostituzione ATT: anche se imposti limitedLogin: false, Facebook lo forzerà automaticamente su true se l’utente non ha concesso l’autorizzazione App Tracking Transparency (ATT)
   • Gestisci sempre entrambi i casi: la tua app deve essere sempre pronta a gestire scenari di accesso sia limitati che completi

   Verifica dello stato ATT:

   // 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'

   Implementazione consigliata se si preferisce access_token:

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

   Cosa succede con l’accesso limitato:

   • Accesso ridotto ai dati: alcuni dati utente potrebbero non essere disponibili
   • Diversi tipi di token: i token di accesso possono avere funzionalità diverse
   • Conformità alla privacy: aiuta a rispettare i requisiti sulla privacy di iOS

   Importante: testa sempre la tua app con scenari di accesso sia limitati che completi per assicurarti che l’app funzioni correttamente in entrambi i casi. Puoi trovare ulteriori informazioni sull’accesso limitato qui.

3. Ottieni i dati del profilo utente

   Dopo aver effettuato correttamente l’accesso, puoi recuperare ulteriori informazioni sul profilo:

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

   Campi profilo disponibili: puoi richiedere qualsiasi campo disponibile nel grafico Facebook API di Facebook. I campi comuni includono: id, name, email, first_name, last_name, picture, birthday, gender, location, hometown. Tieni presente che alcuni campi potrebbero richiedere autorizzazioni aggiuntive.

   Limitazione del tipo di token: la chiamata getProfile funziona solo quando si dispone di un token di accesso (accesso standard con monitoraggio consentito). Se l’utente ha negato il monitoraggio o stai utilizzando un accesso limitato (solo token JWT), questa chiamata avrà esito negativo. In tal caso, utilizzare i dati del profilo forniti nella risposta di accesso iniziale.

⚠️ Critico: gestione dei token backend

Danger

COMPORTAMENTO CRITICO iOS: accesso limitato e trasparenza del monitoraggio delle app (ATT) sono funzionalità iOS-ONLY. Su Android riceverai sempre token di accesso indipendentemente dall’impostazione limitedLogin.iOS Comportamento del token:

• limitedLogin: true → Sempre JWT token (solo iOS)
• limitedLogin: false + L’utente CONSENTE il tracciamento → Token di accesso
• limitedLogin: false + L’utente NEGA il monitoraggio → JWT token (iOS sovrascrive automaticamente l’impostazione)

Android Comportamento token: accedi sempre al token, l’impostazione limitedLogin viene ignorata.

Il tuo backend deve gestire due diversi tipi di token perché gli utenti iOS possono ricevere token di accesso o token JWT a seconda della scelta della trasparenza del monitoraggio delle app, mentre gli utenti Android ricevono sempre token di accesso.

Tipi di token per piattaforma

Piattaforma	Impostazione accesso limitato	Scelta ATT utente	Tipo token risultato
iOS	true	Qualsiasi	JWT Gettone
iOS	false	Consente il monitoraggio	Gettone di accesso
iOS	false	Nega il tracciamento	JWT Token (override automatico)
Android	Qualsiasi	N/D	Token di accesso (sempre)

Implementazione del back-end

1. Rileva il tipo di token e gestiscilo di conseguenza

   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 Esempio di integrazione

   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. Convalida JWT backend

   // 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. Gestore token backend generico

   // 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');
     }
   }

Considerazioni chiave

Danger

Critica iOS-Solo comprensione:

• iOS: la scelta del monitoraggio delle app dell’utente determina il tipo di token, NON le impostazioni del codice (anche quando limitedLogin: false)
• Android: riceve sempre i token di accesso, indipendentemente dall’impostazione limitedLogin
• L’accesso limitato è iOS-ONLY - Android ignora completamente questa impostazione

Token di accesso (accesso standard):

• ✅ Android: Sempre disponibile (non si applicano restrizioni solo su iOS)
• ✅ iOS: solo quando l’utente consente esplicitamente il monitoraggio dell’app
• ✅ Può essere utilizzato per accedere al Facebook Grafico API
• ✅ Tempi di scadenza più lunghi
• ✅ Più dati utente disponibili
• ❌ Sempre meno comune su iOS poiché gli utenti negano sempre più il tracciamento

JWT Token (iOS-Solo modalità Privacy):

• ❌ Android: non si verifica mai (non supportato)
• ✅ iOS: quando il monitoraggio è negato o limitedLogin: true
• ✅ Rispetta le preferenze sulla privacy dell’utente iOS
• ❌ Contiene solo informazioni utente di base
• ❌ Tempi di scadenza più brevi
• ❌ Nessun accesso al Facebook Grafico API
• ⚠️ Ora lo scenario più comune per gli utenti di iOS

Comportamento specifico della piattaforma:

• iOS app: deve gestire sia i token di accesso CHE i token JWT
• Android app: è necessario gestire solo i token di accesso
• App multipiattaforma: devono implementare entrambi i metodi di gestione dei token

Tip

Essenziale per iOS: DEVI implementare entrambi i metodi di gestione dei token. Molti sviluppatori iOS presumono che riceveranno sempre token di accesso e che le loro app si interrompano quando gli utenti negano il monitoraggio.

Requisiti del contesto sicuro (Web/Capacitor)

Limitazioni API Criptovaluta

Il flusso di accesso Facebook aggiornato richiede Web Crypto API per la generazione di nonce, che è disponibile solo in contesti sicuri:

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

Problemi relativi all’ambiente di sviluppo

Problema comune: ionic serve con URL HTTP interrompe l’autenticazione Facebook

Ambiente	Criptovaluta API Disponibile	Facebook Accedi Funziona
http://localhost:3000	✅ Sì	✅ Sì
http://127.0.0.1:3000	✅ Sì	✅ Sì
http://192.168.1.100:3000	❌No	❌No
https://any-domain.com	✅ Sì	✅ Sì

Soluzioni per lo sviluppo Capacitor

1. Utilizza localhost per i test web

   # Instead of ionic serve --host=0.0.0.0
   ionic serve --host=localhost

2. Abilita HTTPS in Ionic

   ionic serve --ssl

3. Test su dispositivi reali

   # Capacitor apps run in secure context on devices
   ionic cap run ios
   ionic cap run android

4. Generazione di nonce alternativi per lo sviluppo

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

Firebase Nota di integrazione

La recente documentazione Firebase richiede token JWT con nonce per l’autenticazione Facebook, indipendentemente dalle impostazioni di accesso. Questo approccio funziona sia con limitedLogin: true che con 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
     }
   });

Limitazione di sviluppo: se utilizzi ionic serve su un IP di rete (non localhost), l’accesso a Facebook fallirà a causa delle restrizioni crittografiche API. Utilizza localhost o HTTPS per i test web.

Tip

Sicurezza della produzione: le app Capacitor su iOS/Android vengono sempre eseguite in contesti sicuri, quindi questa limitazione riguarda solo gli ambienti di sviluppo web.

Risoluzione dei problemi

Problemi comuni e soluzioni

1. Errori hash chiave su Android

   • Controlla di aver aggiunto l’hash della chiave corretto alla dashboard Facebook
   • Per le build di rilascio, assicurati di aver aggiunto sia gli hash delle chiavi di debug che quelli di rilascio
   • Verifica di utilizzare il keystore corretto durante la generazione dell’hash

2. Facebook il pulsante di accesso non viene visualizzato

   • Verificare che tutte le voci del manifest siano corrette
   • Controlla che l’ID app Facebook e il token client siano corretti
   • Assicurati di aver inizializzato correttamente SDK

3. Problemi comuni di iOS

   • Assicurati che tutte le voci Info.plist siano corrette
   • Verificare che gli schemi URL siano configurati correttamente
   • Controlla che l’ID del tuo pacchetto corrisponda a quanto registrato nel dashboard Facebook

Test

1. Prima del test, aggiungi utenti di prova nella Facebook Console per gli sviluppatori

   • Vai su Ruoli > Utenti di prova
   • Creare un utente di prova
   • Utilizzare queste credenziali per i test

2. Testa sia le build di debug che quelle di rilascio

   • Compilazione di debug con hash della chiave di debug
   • Rilascio build con hash della chiave di rilascio
   • Test sia sull’emulatore che sui dispositivi fisiciRicordati di testare l’intero flusso di accesso, incluso:

• Accesso riuscito
• Cancellazione dell’accesso
• Gestione degli errori
• Funzionalità di disconnessione