Google 致力于为黑人社区推动种族平等。查看具体举措。

Autenticati utilizzando Facebook Login 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 Firebase SDK per eseguire il flusso di accesso o eseguendo manualmente il flusso di accesso Facebook e passando il token di accesso risultante a Firebase.

Prima di iniziare

  1. Aggiungi Firebase al tuo progetto JavaScript .
  2. Sul sito Facebook for Developers , ottieni l' App ID e un App Secret per la tua app.
  3. Abilita accesso Facebook:
    1. Nella console Firebase , apri la sezione Auth .
    2. Nella scheda Metodo di accesso, abilita il metodo di accesso a Facebook e specifica l' ID app e il segreto app che hai ricevuto da Facebook.
    3. Quindi, assicurati che il tuo URI di reindirizzamento OAuth (ad es. my-app-12345.firebaseapp.com/__/auth/handler ) sia elencato come uno dei tuoi 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 Firebase SDK

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 vuoi autenticare un utente in Node.js o in un altro ambiente non browser, devi gestire il flusso di accesso manualmente.)

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

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

    Web version 9

    import { FacebookAuthProvider } from "firebase/auth";

const provider = new FacebookAuthProvider();
    auth_facebook_provider_create.js

    Web version 8

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

    Web version 9

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

    Web version 8

    provider.addScope('user_birthday');
    facebook.js
    Vedere la documentazione del provider di autenticazione .
  3. Facoltativo : per localizzare il flusso OAuth del provider nella lingua preferita dell'utente senza passare in modo esplicito i parametri OAuth personalizzati pertinenti, aggiornare il codice della lingua nell'istanza Auth prima di avviare il flusso OAuth. Per esempio:

    Web version 9

    import { getAuth } from "firebase/auth";

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

    Web version 8

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

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

    Web version 8

    provider.setCustomParameters({
  'display': 'popup'
});
    facebook.js
    I parametri OAuth obbligatori riservati non sono consentiti e verranno ignorati. Per ulteriori dettagli, vedere il riferimento del provider di autenticazione .
  5. Autenticati con Firebase utilizzando l'oggetto provider di 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 version 9

      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;

    // ...
  })
  .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 version 8

      firebase
  .auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // The signed-in user info.
    var user = result.user;

    // 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
      Si noti inoltre che è possibile recuperare il token OAuth del provider di Facebook che può essere utilizzato per recuperare dati aggiuntivi utilizzando le API di Facebook.

      Questo è anche il punto in cui puoi catturare e gestire gli errori. Per un elenco dei codici di errore, dai un'occhiata a Auth Reference Docs .

    • Per accedere reindirizzando alla pagina di accesso, chiama signInWithRedirect :

      Web version 9

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

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

      Web version 8

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

      Web version 9

      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;
  }).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 version 8

      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;
  }).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
      Questo è anche il punto in cui puoi catturare e gestire gli errori. Per un elenco dei codici di errore, dai un'occhiata a Auth Reference Docs .

Autenticati con Firebase in un'estensione di Chrome

Se stai creando un'app per l'estensione di Chrome, devi aggiungere l'ID dell'estensione di Chrome:

  1. Apri il tuo progetto nella console di Firebase .
  2. Nella sezione Autenticazione , apri la pagina Metodo di accesso.
  3. Aggiungi un URI come il seguente all'elenco dei domini autorizzati: 
    chrome-extension://CHROME_EXTENSION_ID

Solo le operazioni popup ( signInWithPopup , linkWithPopup e reauthenticateWithPopup ) sono disponibili per le estensioni di Chrome, poiché le estensioni di Chrome non possono utilizzare i reindirizzamenti HTTP. Dovresti chiamare questi metodi da uno script di pagina in background anziché da un popup di azione del browser, poiché il popup di autenticazione cancellerà il popup di azione del browser. I metodi popup possono essere utilizzati solo nelle estensioni che utilizzano Manifest V2 . Il più recente Manifest V3 consente solo script in background sotto forma di operatori di servizio, che non possono eseguire affatto le operazioni di popup.

Nel file manifest dell'estensione di Chrome assicurati di aggiungere l'URL https://apis.google.com alla lista consentita content_security_policy .

Prossimi passi

Dopo che un utente accede per la prima volta, un nuovo account utente viene creato e collegato alle credenziali, ovvero il nome utente e la password, il numero di telefono o le 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 da come l'utente effettua l'accesso.

  • 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 sul profilo di base User dall'oggetto Utente. Vedere Gestisci utenti .

  • Nelle regole di sicurezza del database in tempo reale e dell'archiviazione cloud di Firebase, puoi ottenere l'ID utente univoco dell'utente che ha eseguito 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, chiama signOut :

Web version 9

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

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