Autenticarsi utilizzando l'accesso a Facebook con JavaScript

Puoi consentire ai tuoi utenti di autenticarsi 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 oppure 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 , ottieni l' ID app e un segreto app per la tua app.
  3. Abilita l'accesso a Facebook:
    1. Nella console Firebase , apri la sezione Autenticazione .
    2. Nella scheda Metodo di accesso , abilita il metodo di accesso Facebook e specifica l' ID app e il segreto dell'app ottenuti da Facebook.
    3. Quindi, 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 nel prodotto Impostazioni > Configurazione accesso Facebook .

Gestisci il flusso di accesso con l'SDK Firebase

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

Per gestire il flusso di accesso con l'SDK JavaScript di Firebase, procedi nel seguente modo:

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

    Web modular API

    import { FacebookAuthProvider } from "firebase/auth";

const provider = new FacebookAuthProvider();
    auth_facebook_provider_create.js

    Web namespaced API

    var provider = new firebase.auth.FacebookAuthProvider();
    facebook.js
  2. Facoltativo : specifica gli ambiti OAuth 2.0 aggiuntivi che desideri richiedere al provider di autenticazione. Per aggiungere un ambito, chiama addScope . Per esempio:

    Web modular API

    provider.addScope('user_birthday');
    auth_facebook_provider_scopes.js

    Web namespaced API

    provider.addScope('user_birthday');
    facebook.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 sull'istanza Auth prima di avviare il flusso OAuth. Per esempio:

    Web modular API

    import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();
    auth_set_language_code.js

    Web namespaced API

    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
    index.js
  4. Facoltativo : specifica parametri aggiuntivi del provider OAuth personalizzati che desideri 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. Per esempio:

    Web modular API

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

    Web namespaced API

    provider.setCustomParameters({
  'display': 'popup'
});
    facebook.js
    I parametri OAuth obbligatori e riservati non sono consentiti e verranno ignorati. Per ulteriori dettagli, vedere il riferimento al provider di autenticazione .
  5. Autenticarsi con Firebase utilizzando l'oggetto provider Facebook. Puoi chiedere ai tuoi utenti di accedere con i loro account Facebook aprendo una finestra pop-up o reindirizzando alla pagina di accesso. Il metodo di reindirizzamento è preferito sui dispositivi mobili.
    • Per accedere con una finestra pop-up, chiama signInWithPopup :

      Web modular API

      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_signin_popup.js

      Web namespaced API

      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;

    // ...
  });
      facebook.js
      Tieni inoltre presente che puoi recuperare il token OAuth del provider di Facebook che può essere utilizzato per recuperare dati aggiuntivi utilizzando le API di Facebook.

      Qui è anche possibile rilevare e gestire gli errori. Per un elenco dei codici di errore, dai un'occhiata ai documenti di riferimento sull'autenticazione .

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

      Web modular API

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

const auth = getAuth();
signInWithRedirect(auth, provider);
      auth_signin_redirect.js

      Web namespaced API

      firebase.auth().signInWithRedirect(provider);
      index.js
      Quindi, puoi anche recuperare il token OAuth del provider Facebook chiamando getRedirectResult quando viene caricata la pagina:

      Web modular API

      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_redirect_result.js

      Web namespaced API

      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;
    // ...
  });
      facebook.js
      Qui è anche possibile rilevare e gestire gli errori. Per un elenco dei codici di errore, dai un'occhiata ai documenti di riferimento sull'autenticazione .

Autenticati con Firebase in un'estensione di Chrome

Se stai creando un'app di estensione per Chrome, consulta la guida Offscreen Documents .

Prossimi passi

Dopo che un utente accede per la prima volta, viene creato un nuovo account utente e collegato alle credenziali, ovvero nome utente e password, numero di telefono o informazioni sul provider di autenticazione, con cui l'utente ha effettuato l'accesso. Questo nuovo account viene archiviato 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 dell'utente.

  • Nelle tue app, il modo consigliato per conoscere lo stato di autenticazione del tuo utente è impostare un osservatore sull'oggetto Auth . È quindi possibile ottenere le informazioni di base del profilo dell'utente dall'oggetto User . Vedi Gestisci utenti .

  • Nel tuo Firebase Realtime Database e Cloud Storage Security Rules , puoi ottenere l'ID utente univoco dell'utente che ha effettuato l'accesso dalla variabile auth e utilizzarlo per controllare a quali dati può accedere un utente.

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, chiamare signOut :

Web modular API

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

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

Web namespaced API

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