Firebase - Autenticazione Facebook

In questo capitolo, autenticheremo gli utenti con l'autenticazione Facebook di Firebase.

Passaggio 1: abilita l'autenticazione di Facebook

Dobbiamo aprire la dashboard di Firebase e fare clic Authnel menu laterale. Successivamente, dobbiamo scegliereSIGN-IN-METHODnella barra delle schede. Abiliteremo l'autenticazione di Facebook e lo lasceremo aperto poiché dobbiamo aggiungereApp ID e App Secret quando finiamo il passaggio 2.

Passaggio 2: crea l'app Facebook

Per abilitare l'autenticazione di Facebook, dobbiamo creare l'app Facebook. Fare clic su questo collegamento per iniziare. Una volta creata l'app, dobbiamo copiareApp ID e App Secret alla pagina Firebase, che abbiamo lasciato aperta nel passaggio 1. Dobbiamo anche copiare OAuth Redirect URIda questa finestra nell'app di Facebook. Potete trovare+ Add Product all'interno del menu laterale della dashboard dell'app Facebook.

Scegliere Facebook Logine apparirà nel menu laterale. Troverai il campo di immissioneValid OAuth redirect URIs dove devi copiare il file OAuth Redirect URI da Firebase.

Passaggio 3: connettersi a Facebook SDK

Copia il codice seguente all'inizio del file body tag in index.html. Assicurati di sostituire il file'APP_ID' all'ID della tua app dalla dashboard di Facebook.

Esempio

Consideriamo il seguente esempio.

<script>
   window.fbAsyncInit = function() {
      FB.init ({
         appId      : 'APP_ID',
         xfbml      : true,
         version    : 'v2.6'
      });
   };

   (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
   } (document, 'script', 'facebook-jssdk'));
	
</script>

Passaggio 4: creazione di pulsanti

Abbiamo impostato tutto nei primi tre passaggi, ora possiamo creare due pulsanti per il login e il logout.

index.html

<button onclick = "facebookSignin()">Facebook Signin</button>
<button onclick = "facebookSignout()">Facebook Signout</button>

Passaggio 5: creazione di funzioni di autenticazione

Questo è l'ultimo passaggio. Apertoindex.js e copia il codice seguente.

index.js

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

function facebookSignin() {
   firebase.auth().signInWithPopup(provider)
   
   .then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;
		
      console.log(token)
      console.log(user)
   }).catch(function(error) {
      console.log(error.code);
      console.log(error.message);
   });
}

function facebookSignout() {
   firebase.auth().signOut()
   
   .then(function() {
      console.log('Signout successful!')
   }, function(error) {
      console.log('Signout failed')
   });
}