Autentica mediante el Acceso con Facebook y JavaScript

Maneja errores de cuentas que ya existen con otras credenciales

Si habilitaste la configuración Una cuenta por dirección de correo en Firebase console, aparecerá el error auth/account-exists-with-different-credential junto con un objeto AuthCredential (el token de acceso de Facebook) cuando un usuario trate de acceder a un proveedor (como Facebook) con un correo electrónico que ya está vinculado al proveedor de otro usuario de Firebase (como Google). Para completar el acceso al proveedor deseado, el usuario primero debe acceder al proveedor existente (Google) y luego establecer el vínculo con el AuthCredential anterior (el token acceso de Facebook).

Modo de elementos emergentes

Si usas signInWithPopup, puedes manejar los errores auth/account-exists-with-different-credential con un código como el siguiente:

// Step 1.
// User tries to sign in to Facebook.
auth.signInWithPopup(new firebase.auth.FacebookAuthProvider()).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Facebook credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user his password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(user) {
          // Step 4a.
          return user.link(pendingCred);
        }).then(function() {
          // Facebook account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that he already has an account
      // but with a different provider, and let him validate the fact he wants to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account he owns.
        // Step 4b.
        // Link to Facebook credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Facebook account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

Modo de redireccionamiento

Este error se maneja de manera similar en el modo de redireccionamiento, con la diferencia de que la credencial pendiente debe almacenarse en caché entre acciones de redireccionamiento de páginas (por ejemplo, el uso de almacenamiento de sesión).

Avanzado: Administra el flujo de acceso manualmente

También puedes autenticar con Firebase con una cuenta de Facebook. Para ello, debes administrar el flujo de acceso con el SDK JavaScript del Acceso con Facebook:

1. Para integrar el servicio de Acceso con Facebook en tu app, sigue las indicaciones de los documentos para programadores. Asegúrate de configurar el Acceso con Facebook con tu ID de la app de Facebook:

   <script src="//connect.facebook.net/en_US/sdk.js"></script>
   <script>
     FB.init({
       /**********************************************************************
        * TODO(Developer): Change the value below with your Facebook app ID. *
        **********************************************************************/
       appId      : '<YOUR_FACEBOOK_APP_ID>',
       status     : true,
       xfbml      : true,
       version    : 'v2.6'
     });
   </script>
   

2. También se configura un agente de escucha en el estado de autenticación de Facebook:

   FB.Event.subscribe('auth.authResponseChange', checkLoginState);
   

3. Después de integrar el Acceso con Facebook, agrega un botón de acceso con Facebook a tus páginas web:

   <fb:login-button data-auto-logout-link="true" scope="public_profile,email" size="large"></fb:login-button>
   

4. En la devolución de llamada de estado de la autenticación con Facebook, intercambia el token de autenticación de la respuesta de autenticación de Facebook por una credencial de Firebase y accede con Firebase:

   function checkLoginState(event) {
     if (event.authResponse) {
       // User is signed-in Facebook.
       var unsubscribe = firebase.auth().onAuthStateChanged(function(firebaseUser) {
         unsubscribe();
         // Check if we are already signed-in Firebase with the correct user.
         if (!isUserEqual(event.authResponse, firebaseUser)) {
           // Build Firebase credential with the Facebook auth token.
           var credential = firebase.auth.FacebookAuthProvider.credential(
               event.authResponse.accessToken);
           // Sign in with the credential from the Facebook user.
           firebase.auth().signInAndRetrieveDataWithCredential(credential).catch(function(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;
             // ...
           });
         } else {
           // User is already signed-in Firebase with the correct user.
         }
       });
     } else {
       // User is signed-out of Facebook.
       firebase.auth().signOut();
     }
   }
   

   Aquí también puedes detectar y resolver errores. Para obtener una lista de códigos de error, consulta los documentos de referencia de autenticación.
5. También debes verificar que el usuario de Facebook no haya accedido previamente a Firebase, para evitar una nueva autorización innecesaria:

   function isUserEqual(facebookAuthResponse, firebaseUser) {
     if (firebaseUser) {
       var providerData = firebaseUser.providerData;
       for (var i = 0; i < providerData.length; i++) {
         if (providerData[i].providerId === firebase.auth.FacebookAuthProvider.PROVIDER_ID &&
             providerData[i].uid === facebookAuthResponse.userID) {
           // We don't need to re-auth the Firebase connection.
           return true;
         }
       }
     }
     return false;
   }

Avanzado: Autenticación con Firebase en Node.js

Para autenticar con Firebase en una aplicación de Node.js:

1. Inicia la sesión del usuario con su cuenta de Facebook y obtén su token de acceso de Facebook. Por ejemplo, inicia la sesión del usuario en un navegador, como se describe en la sección Administra el flujo de acceso de manera manual, pero envía el token de acceso a tu aplicación de Node.js en lugar de usarlo en la app cliente.
2. Después de obtener el token de ID de Facebook del usuario, úsalo para crear un objeto de credencial y haz que el usuario acceda con la credencial:

   
   // Build Firebase credential with the Facebook access token.
   var credential = firebase.auth.FacebookAuthProvider.credential(access_token);
   
   // Sign in with credential from the Google user.
   firebase.auth().signInAndRetrieveDataWithCredential(credential).catch(function(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;
     // ...
   });
       

Cómo personalizar el dominio de redireccionamiento para acceder a Facebook

Cuando creas un proyecto, Firebase aprovisionará un subdominio único: https://my-app-12345.firebaseapp.com

También se usará como mecanismo de redireccionamiento para acceder a OAuth. Este dominio debería estar en incluido en la lista blanca para todos los proveedores de OAuth admitidos. Sin embargo, es probable que los usuarios vean ese dominio cuando accedan a Facebook antes de que se los redireccione a la aplicación; p. ej.: Continúa a https://my-app-12345.firebaseapp.com

Sigue estos pasos para que la URL del mensaje muestre un dominio personalizado; p. ej.: Continúa a https://auth.custom.domain.com

1. Crea un registro CNAME para tu dominio personalizado que dirija al subdominio del proyecto en firebaseapp.com:

   auth.custom.domain.com CNAME my-app-12345.firebaseapp.com
   

2. Agrega el dominio personalizado a la lista de dominios autorizados en Firebase console: auth.custom.domain.com.
3. Incluye la URL de la página de redireccionamiento en la lista blanca en la consola para desarrolladores de Facebook o en la página de configuración de OAuth. Podrás acceder a ella desde tu dominio personalizado: https://auth.custom.domain.com/__/auth/handler.
4. Cuando inicialices la biblioteca JavaScript, debes especificar el dominio personalizado en el campo authDomain:

   var config = {
     apiKey: '...',
     // Changed from 'my-app-12345.firebaseapp.com'.
     authDomain: 'auth.custom.domain.com',
     databaseURL: 'https://my-app-12345.firebaseio.com',
     projectId: 'my-app-12345',
     storageBucket: 'my-app-12345.appspot.com',
     messagingSenderId: '1234567890'
   };
   firebase.initializeApp(config);