Firebase: autenticación de Facebook

En este capítulo, autenticaremos a los usuarios con la autenticación de Firebase Facebook.

Paso 1: habilitar la autenticación de Facebook

Necesitamos abrir el panel de Firebase y hacer clic Authen el menú lateral. A continuación, debemos elegirSIGN-IN-METHODen la barra de pestañas. Habilitaremos la autenticación de Facebook y dejaremos esto abierto ya que necesitamos agregarApp ID y App Secret cuando terminemos el paso 2.

Paso 2: crea la aplicación de Facebook

Para habilitar la autenticación de Facebook, necesitamos crear la aplicación de Facebook. Haga clic en este enlace para comenzar. Una vez que se crea la aplicación, necesitamos copiarApp ID y App Secret a la página de Firebase, que dejamos abierta en el paso 1. También necesitamos copiar OAuth Redirect URIdesde esta ventana a la aplicación de Facebook. Puedes encontrar+ Add Product dentro del menú lateral del panel de la aplicación de Facebook.

Escoger Facebook Loginy aparecerá en el menú lateral. Encontrarás el campo de entradaValid OAuth redirect URIs donde necesitas copiar el OAuth Redirect URI de Firebase.

Paso 3: conéctese al SDK de Facebook

Copie el siguiente código al comienzo del body etiqueta en index.html. Asegúrese de reemplazar el'APP_ID' a la identificación de su aplicación desde el panel de Facebook.

Ejemplo

Consideremos el siguiente ejemplo.

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

Paso 4: crear botones

Configuramos todo en los primeros tres pasos, ahora podemos crear dos botones para iniciar y cerrar sesión.

index.html

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

Paso 5: crear funciones de autenticación

Este es el ultimo paso. Abiertoindex.js y copie el siguiente código.

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