Autenticazione tramite Facebook Login con JavaScript

Puoi consentire agli utenti di eseguire l'autenticazione con Firebase utilizzando i loro account Facebook integrando Facebook Login nella tua app. Puoi integrare Facebook Login utilizzando l'SDK Firebase per eseguire il flusso di accesso o eseguendo manualmente il flusso di Facebook Login e passando il token di accesso risultante a Firebase.

Prima di iniziare

1. Aggiungi Firebase al tuo progetto JavaScript.
2. Nel sito Facebook for Developers, recupera l'ID app e un segreto dell'app per la tua app.
3. Attiva Facebook Login come provider di accesso per il tuo progetto Firebase:
   1. Nella console Firebase, vai a Sicurezza > Autenticazione.
   2. Nella scheda Metodo di accesso , attiva il provider di accesso Facebook e specifica l'ID app e il segreto dell'app che hai ricevuto da Facebook.
   3. Assicurati che l'URI di reindirizzamento OAuth (ad esempio, my-app-12345.firebaseapp.com/__/auth/handler) sia elencato come uno degli URI di reindirizzamento OAuth nella pagina delle impostazioni dell'app Facebook sul sito Facebook for Developers nella configurazione Impostazioni prodotto > Facebook Login.

Gestire il flusso di accesso con l'SDK Firebase

Se stai creando un'app web, il modo più semplice per autenticare gli utenti con Firebase utilizzando i loro account Facebook è gestire il flusso di accesso con l'SDK Firebase JavaScript. (Se vuoi autenticare un utente in Node.js o in un altro ambiente non browser, devi gestire manualmente il flusso di accesso.)

Per gestire il flusso di accesso con l'SDK Firebase JavaScript:

1. Crea un'istanza dell'oggetto provider Facebook:

   Web

   import { FacebookAuthProvider } from "firebase/auth";
   
   const provider = new FacebookAuthP
   rovider();auth_facebook_provider
   _create.js

   Web

   var provider = new firebase.auth.FacebookAuthProvider();
   facebook.js

2. Facoltativo: specifica gli ambiti OAuth 2.0 aggiuntivi che vuoi richiedere al provider di autenticazione. Per aggiungere un ambito, chiama addScope. Ad esempio:

   Web

   provider.addScope('user_birthda
   y');auth_facebook_provider_s
   copes.js

   Web

   provider.addScope('user_birthda
   y');fac
   ebook.js

   Consulta la documentazione del provider di autenticazione.
3. Facoltativo: per localizzare il flusso OAuth del provider nella lingua preferita dell'utente senza passare esplicitamente i parametri OAuth personalizzati pertinenti, aggiorna il codice della lingua nell'istanza Auth prima di avviare il flusso OAuth. Ad esempio:

   Web

   import { getAuth } from "firebase/auth";
   
   const auth = getAuth();
   auth.languageCode = 'it';
   // To apply the default browser preference instead of explicitly setting it.
   // auth.us
   eDeviceLanguage();auth_se
   t_language_code.js

   Web

   firebase.auth().languageCode = 'it';
   // To apply the default browser preference instead of explicitly setting it.
   // firebase.auth().useDeviceLan
   guage();
   index.js

4. Facoltativo: specifica i parametri del provider OAuth personalizzati aggiuntivi che vuoi inviare con la richiesta OAuth. Per aggiungere un parametro personalizzato, chiama setCustomParameters sul provider inizializzato con un oggetto contenente la chiave come specificato dalla documentazione del provider OAuth e il valore corrispondente. Ad esempio:

   Web

   provider.setCustomParameters({
     'display': 
   9;popup'
   });auth_facebook_pr
   ovider_params.js

   Web

   provider.setCustomParameters({
     'display': 
   9;popup'
   ;
   });facebook.js

   I parametri OAuth obbligatori riservati non sono consentiti e verranno ignorati. Per maggiori dettagli, consulta il riferimento del provider di autenticazione.
5. Esegui l'autenticazione con Firebase utilizzando l'oggetto provider Facebook. Puoi chiedere agli utenti di accedere con i loro account Facebook aprendo una finestra popup o reindirizzando alla pagina di accesso. Il metodo di reindirizzamento è preferibile sui dispositivi mobili.
   • Per accedere con una finestra popup, chiama signInWithPopup:

     Web

     import { getAuth, signInWithPopup, FacebookAuthProvider } from "firebase/auth";
     
     const auth = getAuth();
     signInWithPopup(auth, provider)
       .then(>(result) = {
         // The signed-in user info.
         const user = result.user;
     
         // This gives you a Facebook Access Token. You can use it to access the Facebook API.
         const credential = FacebookAuthProvider.credentialFromResult(result);
         const accessToken = credential.accessToken;
     
         // IdP data available using getAdditionalUserInfo(result)
         // ...
       })
       .catch>((error) = {
         // Handle Errors here.
         const errorCode = error.code;
         const errorMessage = error.message;
         // The email of the user's account used.
         const email = error.customData.email;
         // The AuthCredential type that was used.
         const credential = FacebookAuthProvider.credentialFromError(error);
     
       
       // ...
       });auth_facebook_s
     ignin_popup.js

     Web

     firebase
       .auth()
       .signInWithPopup(provider)
       .then((result) => {
         /** @type {firebase.auth.OAuthCredential} */
         var credential = result.credential;
     
         // The signed-in user info.
         var user = result.user;
         // IdP data available in result.additionalUserInfo.profile.
           // ...
     
         // This gives you a Facebook Access Token. You can use it to access the Facebook API.
         var accessToken = credential.accessToken;
     
         // ...
       })
       .catch((error) => {
         // Handle Errors here.
         var errorCode = error.code;
         var errorMessage = error.message;
         // The email of the user's account used.
         var email = error.email;
         // The firebase.auth.AuthCredential type that was used.
         var credential = error.credential;
     
         // ...
      
      });faceboo
     k.js

     Tieni presente che puoi recuperare il token OAuth del provider Facebook, che può essere utilizzato per recuperare dati aggiuntivi utilizzando le API di Facebook.

     Qui puoi anche rilevare e gestire gli errori. Per un elenco dei codici di errore, consulta la documentazione di riferimento di Auth.

   • Per accedere reindirizzando alla pagina di accesso, chiama signInWithRedirect: segui le best practice quando utilizzi `signInWithRedirect`.

     Web

     import { getAuth, signInWithRedirect } from "firebase/auth";
     
     const auth = getAuth();
     signInWithRedirect(auth, 
     provider);auth_signin_r
     edirect.js

     Web

     firebase.auth().signInWithRedirect(provider);
     index.js

     Poi, puoi anche recuperare il token OAuth del provider Facebook chiamando getRedirectResult quando la pagina viene caricata:

     Web

     import { getAuth, getRedirectResult, FacebookAuthProvider } from "firebase/auth";
     
     const auth = getAuth();
     getRedirectResult(auth)
       .then(>(result) = {
         // This gives you a Facebook Access Token. You can use it to access the Facebook API.
         const credential = FacebookAuthProvider.credentialFromResult(result);
         const token = credential.accessToken;
     
         const user = result.user;
         // IdP data available using getAdditionalUserInfo(result)
         // ...
       }).catch>((error) = {
         // Handle Errors here.
         const errorCode = error.code;
         const errorMessage = error.message;
         // The email of the user's account used.
         const email = error.customData.email;
         // AuthCredential type that was used.
         const credential = FacebookAuthProvider.credentialFromError(error);
       
       // ...
       });auth_facebook_signin_redi
     rect_result.js

     Web

     firebase.auth()
       .getRedirectResult()
       .then((result) => {
         if (result.credential) {
           /** @type {firebase.auth.OAuthCredential} */
           var credential = result.credential;
     
           // This gives you a Facebook Access Token. You can use it to access the Facebook API.
           var token = credential.accessToken;
           // ...
         }
         // The signed-in user info.
         var user = result.user;
         // IdP data available in result.additionalUserInfo.profile.
           // ...
       }).catch((error) => {
         // Handle Errors here.
         var errorCode = error.code;
         var errorMessage = error.message;
         // The email of the user's account used.
         var email = error.email;
         // The firebase.auth.AuthCredential type that was used.
         var credential = error.credential;
         // ...
      
      });faceboo
     k.js

     Qui puoi anche rilevare e gestire gli errori. Per un elenco dei codici di errore, consulta la documentazione di riferimento di Auth.

Nota: Facebook applica HTTPS e non consente l'accesso con host non sicuri. Quando utilizzi Facebook in modalità di sviluppo con un'origine http://localhost, devi assicurarti che la modalità di sviluppo sia attivata per questa app Facebook. Inoltre, l'accesso sarà consentito solo con gli account di test di Facebook.

Gestire gli errori account-exists-with-different-credential

Se hai attivato l'impostazione Un account per indirizzo email nella Firebase console, quando un utente tenta di accedere a un provider (ad esempio Facebook) con un'email già esistente per il provider di un altro utente Firebase (ad esempio Google), viene generato l'errore auth/account-exists-with-different-credential insieme a un AuthCredential oggetto (token di accesso di Facebook). Per completare l'accesso al provider previsto, l'utente deve prima accedere al provider esistente (Google) e poi collegarsi al precedente AuthCredential (token di accesso di Facebook).

Modalità popup

Se utilizzi signInWithPopup, puoi gestire gli errori auth/account-exists-with-different-credential con un codice simile all'esempio seguente:

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  FacebookAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Facebook.
  let result = await signInWithPopup(getAuth(), new FacebookAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Facebook credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Facebook credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

Modalità di reindirizzamento

Questo errore viene gestito in modo simile nella modalità di reindirizzamento, con la differenza che le credenziali in attesa devono essere memorizzate nella cache tra i reindirizzamenti delle pagine (ad esempio, utilizzando l'archiviazione della sessione).

Opzione avanzata: gestire manualmente il flusso di accesso

Puoi anche eseguire l'autenticazione con Firebase utilizzando un account Facebook gestendo il flusso di accesso con l'SDK JavaScript di Facebook Login:

1. Integra Facebook Login nella tua app seguendo la documentazione per gli sviluppatori. Assicurati di configurare Facebook Login con l'ID app Facebook:

   <script src="//connect.facebook.net/en_US/sdk.js"></script>
   <script>
     FB.init({
       /**********************************************************************
        * TODO(Developer): Change the value below with your Facebook app ID. *
        **********************************************************************/
       appId: '<YOUR_FACEBOOK_APP_ID>',
       status: true,
       xfbml: true,
       version: 'v2.6',
     });
   </script>

2. Abbiamo anche configurato un listener sullo stato di autenticazione di Facebook:

   FB.Event.subscribe('auth.authResponseChange', checkLoginState);

3. Dopo aver integrato Facebook Login, aggiungi un pulsante Facebook Login alle tue pagine web:

   <fb:login-button
     data-auto-logout-link="true"
     scope="public_profile,email"
     size="large"
   ></fb:login-button>

4. Nel callback dello stato di autenticazione di Facebook, scambia il token di autenticazione dalla risposta di autenticazione di Facebook con una credenziale Firebase e accedi a Firebase:

   Web

   import { getAuth, onAuthStateChanged, signInWithCredential, signOut, FacebookAuthProvider } from "firebase/auth";
   const auth = getAuth();
   
   function checkLoginState(response) {
     if (response.authResponse) {
       // User is signed-in Facebook.
       const unsubscribe = onAuthStateChanged(auth, (fireb>aseUser) = {
         unsubscribe();
         // Check if we are already signed-in Firebase with the correct user.
         if (!isUserEqual(response.authResponse, firebaseUser)) {
           // Build Firebase credential with the Facebook auth token.
           const credential = FacebookAuthProvider.credential(
               response.authResponse.accessToken);
   
           // Sign in with the credential from the Facebook user.
           signInWithCredential(auth, credential)
             .catch>((error) = {
               // Handle Errors here.
               const errorCode = error.code;
               const errorMessage = error.message;
               // The email of the user's account used.
               const email = error.customData.email;
               // The AuthCredential type that was used.
               const credential = FacebookAuthProvider.credentialFromError(error);
               // ...
             });
         } else {
           // User is already signed-in Firebase with the correct user.
         }
       });
     } else {
       // User is signed-out of Facebook.
       signOu
   t(auth);
     }
   }auth_facebo
   ok_callback.js

   Web

   function checkLoginState(response) {
     if (response.authResponse) {
       // User is signed-in Facebook.
       var unsubscribe = firebase.auth().onAuthStateChanged((firebaseUser) => {
         unsubscribe();
         // Check if we are already signed-in Firebase with the correct user.
         if (!isUserEqual(response.authResponse, firebaseUser)) {
           // Build Firebase credential with the Facebook auth token.
           var credential = firebase.auth.FacebookAuthProvider.credential(
               response.authResponse.accessToken);
   
           // Sign in with the credential from the Facebook user.
           firebase.auth().signInWithCredential(credential)
             .catch((error) => {
               // Handle Errors here.
               var errorCode = error.code;
               var errorMessage = error.message;
               // The email of the user's account used.
               var email = error.email;
               // The firebase.auth.AuthCredential type that was used.
               var credential = error.credential;
               // ...
             });
         } else {
           // User is already signed-in Firebase with the correct user.
         }
       });
     } else {
       // User is signed-out of Facebook.
       firebase.auth().signOut();
    
    }
   }faceboo
   k.js

   Qui puoi anche rilevare e gestire gli errori. Per un elenco dei codici di errore, consulta la documentazione di riferimento di Auth.
5. Inoltre, devi verificare che l'utente di Facebook non abbia già eseguito l'accesso a Firebase per evitare una riautenticazione non necessaria:

   Web

   import { FacebookAuthProvider } from "firebase/auth";
   
   function isUserEqual(facebookAuthResponse, firebaseUser) {
     if (firebaseUser) {
       const providerData = firebaseUser.providerData;
       for (let< i = 0; i  providerData.length; i++) {
         if (providerData[i].providerId === FacebookAuthProvider.PR&&OVIDER_ID 
             providerData[i].uid === facebookAuthResponse.userID) {
           // We don't need to re-auth the Firebase connection.
           return true;
         }
       }
     }
     r
   eturn false;
   }auth_facebook_ch
   ecksameuser.js

   Web

   function isUserEqual(facebookAuthResponse, firebaseUser) {
     if (firebaseUser) {
       var providerData = firebaseUser.providerData;
       for (var i = 0; i < providerData.length; i++) {
         if (providerData[i].providerId === firebase.auth.FacebookAuthProvider.PROVIDER_ID &&
             providerData[i].uid === facebookAuthResponse.userID) {
           // We don't need to re-auth the Firebase connection.
           return true;
         }
       }
     }
     return fals
   e;
   }faceboo
   k.js

Opzione avanzata: eseguire l'autenticazione con Firebase in Node.js

Per eseguire l'autenticazione con Firebase in un'applicazione Node.js:

1. Accedi all'utente con il suo account Facebook e recupera il token di accesso di Facebook dell'utente. Ad esempio, accedi all'utente in un browser come descritto in la sezione Gestire manualmente il flusso di accesso, ma invia il token di accesso alla tua applicazione Node.js anziché utilizzarlo nell'app client.
2. Dopo aver recuperato il token di accesso di Facebook dell'utente, utilizzalo per creare un oggetto Credential e poi accedi all'utente con la credenziale:

   Web

   import { getAuth, signInWithCredential, FacebookAuthProvider } from "firebase/auth";
   
   // Sign in with the credential from the Facebook user.
   const auth = getAuth();
   signInWithCredential(auth, credential)
     .then(>(result) = {
       // Signed in 
       const credential = FacebookAuthProvider.credentialFromResult(result);
     })
     .catch>((error) = {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
       // The email of the user's account used.
       const email = error.customData.email;
       // The AuthCredential type that was used.
       const credential = FacebookAuthProvider.credentialFromError(error);
     
     // ...
     });auth_facebook_signin
   _credential.js

   Web

   // Sign in with the credential from the Facebook user.
   firebase.auth().signInWithCredential(credential)
     .then((result) => {
       // Signed in       
       var credential = result.credential;
       // ...
     })
     .catch((error) => {
       // Handle Errors here.
       var errorCode = error.code;
       var errorMessage = error.message;
       // The email of the user's account used.
       var email = error.email;
       // The firebase.auth.AuthCredential type that was used.
       var credential = error.credential;
       // ...
    
    });faceboo
   k.js

Eseguire l'autenticazione con Firebase in un'estensione di Chrome

Se stai creando un'app di estensione di Chrome, consulta la guida ai documenti offscreen.

Personalizzare il dominio di reindirizzamento per l'accesso a Facebook

Al momento della creazione del progetto, Firebase eseguirà il provisioning di un sottodominio univoco per il tuo progetto: https://my-app-12345.firebaseapp.com.

Questo verrà utilizzato anche come meccanismo di reindirizzamento per l'accesso OAuth. Questo dominio deve essere consentito per tutti i provider OAuth supportati. Tuttavia, ciò significa che gli utenti potrebbero visualizzare questo dominio durante l'accesso a Facebook prima di essere reindirizzati all'applicazione: Continua a: https://my-app-12345.firebaseapp.com.

Per evitare di visualizzare il sottodominio, puoi configurare un dominio personalizzato con Firebase Hosting:

1. Segui i passaggi da 1 a 3 in Configurare il dominio per Hosting. Quando verifichi la proprietà del dominio, Hosting esegue il provisioning di un certificato SSL per il tuo dominio personalizzato.
2. Aggiungi il tuo dominio personalizzato all'elenco dei domini autorizzati nella Firebase console: auth.custom.domain.com.
3. Nella console per sviluppatori di Facebook o nella pagina di configurazione di OAuth, inserisci nella lista consentita l'URL della pagina di reindirizzamento, a cui sarà possibile accedere sul tuo dominio personalizzato: https://auth.custom.domain.com/__/auth/handler.
4. Quando inizializzi la libreria JavaScript, specifica il tuo dominio personalizzato con il authDomain campo:

   var config = {
     apiKey: '...',
     // Changed from 'PROJECT_ID.firebaseapp.com'.
     authDomain: 'auth.custom.domain.com',
     databaseURL: 'https://PROJECT_ID.firebaseio.com',
     projectId: 'PROJECT_ID',
     storageBucket: 'PROJECT_ID.firebasestorage.app',
     messagingSenderId: 'SENDER_ID'
   };
   firebase.initializeApp(config);

Passaggi successivi

La prima volta che un utente accede, viene creato un nuovo account utente collegato alle credenziali con cui ha eseguito l'accesso, ovvero nome utente e password, numero di telefono o informazioni del provider di autenticazione. Questo nuovo account viene memorizzato come parte del tuo progetto Firebase e può essere utilizzato per identificare un utente in ogni app del tuo progetto, indipendentemente dalla modalità di accesso.

• Nelle tue app, il modo consigliato per conoscere lo stato di autenticazione dell'utente è impostare un observer sull'oggetto Auth. Puoi quindi ottenere le informazioni di base del profilo dell'utente dall'oggetto User. Consulta Gestire gli utenti.

• Nelle regole di sicurezza di Firebase Realtime Database e Cloud Storage , puoi ottenere l'ID utente univoco dell'utente che ha eseguito l'accesso dalla variabile auth, e utilizzarlo per controllare i dati a cui un utente può accedere.

Puoi consentire agli utenti di accedere alla tua app utilizzando più provider di autenticazione collegando le credenziali del provider di autenticazione a un account utente esistente.

Per disconnettere un utente, chiama signOut:

Web

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth)>.then(() = {
  // Sign-out successful.
}).catch>((error) = {
  // An error hap
pened.
});auth_s
ign_out.js

Web

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js