Firebase - Autenticação do Facebook

Neste capítulo, iremos autenticar usuários com autenticação Firebase Facebook.

Etapa 1 - Habilite a autenticação do Facebook

Precisamos abrir o painel do Firebase e clicar Authno menu lateral. Em seguida, precisamos escolherSIGN-IN-METHODna barra de guias. Vamos habilitar a autenticação do Facebook e deixar isso em aberto, pois precisamos adicionarApp ID e App Secret quando terminarmos a etapa 2.

Etapa 2 - Criar aplicativo do Facebook

Para habilitar a autenticação do Facebook, precisamos criar o aplicativo do Facebook. Clique neste link para começar. Depois que o aplicativo é criado, precisamos copiarApp ID e App Secret à página do Firebase, que deixamos aberta na etapa 1. Também precisamos copiar OAuth Redirect URIdesta janela para o aplicativo do Facebook. Você pode encontrar+ Add Product dentro do menu lateral do painel do aplicativo do Facebook.

Escolher Facebook Logine aparecerá no menu lateral. Você encontrará o campo de entradaValid OAuth redirect URIs onde você precisa copiar o OAuth Redirect URI do Firebase.

Etapa 3 - Conecte-se ao SDK do Facebook

Copie o seguinte código no início do body marcar em index.html. Certifique-se de substituir o'APP_ID' ao id do seu aplicativo no painel do Facebook.

Exemplo

Vamos considerar o seguinte exemplo.

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

Etapa 4 - Criar botões

Configuramos tudo nas três primeiras etapas, agora podemos criar dois botões para login e logout.

index.html

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

Etapa 5 - Criar funções de autenticação

Esta é a última etapa. Abririndex.js e copie o código a seguir.

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