Permitir que los usuarios accedan con Facebook

En este documento se muestra cómo usar Identity Platform para que los usuarios accedan con Facebook.

Antes de comenzar

En este instructivo, se supone que ya habilitaste Identity Platform y que tienes una aplicación web básica escrita con HTML y JavaScript. Consulta la Guía de inicio rápido para aprender a hacer esto.

Configura Facebook como proveedor

Para configurar Facebook como un proveedor de identidad, haz lo siguiente:

  1. Ve a la página Proveedores de identidad en la consola de Google Cloud.

    Ir a la página Proveedores de identidad

  2. Haz clic en Agregar un proveedor.

  3. Selecciona Facebook en la lista.

  4. Ingresa el ID de la aplicación de Facebook y el secreto de la aplicación. Si si aún no tienes un ID ni un secreto, puedes obtener uno en Facebook para desarrolladores.

  5. Configura el URI que se enumera en Configura Facebook como un URI de redireccionamiento de OAuth válido para tu app de Facebook. Si configuraste un dominio personalizado en Identity Platform, actualiza el URI de redireccionamiento en la configuración de tu app de Facebook para usar el dominio personalizado en lugar del predeterminado. Por ejemplo, cambia https://myproject.firebaseapp.com/__/auth/handler a https://auth.myownpersonaldomain.com/__/auth/handler

  6. Para registrar los dominios de tu app, haz clic en Agregar dominio en Dominios autorizados. Para fines de desarrollo, localhost ya está habilitado de forma predeterminada.

  7. En Configura tu aplicación, haz clic en Detalles de la configuración. Copia el fragmento en el código de tu app para inicializar el SDK de cliente de Identity Platform.

  8. Haga clic en Save.

Acceso de los usuarios con el SDK de cliente

  1. Crea una instancia del objeto proveedor de Facebook:

    JavaScript 

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

  2. Opcional: Agrega permisos de OAuth. Los permisos especifican qué datos solicitas de Facebook. Los datos más sensibles pueden requerir permisos específicos. Consulta el proveedor documentación para determinar los alcances que necesita tu app.

    JavaScript 

    provider.addScope('user_birthday');

  3. Opcional: Localiza el flujo de autenticación. Puedes especificar un lenguaje o usar el lenguaje predeterminado del dispositivo:

    JavaScript

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

  4. Opcional: Especifica parámetros personalizados de OAuth adicionales. Estos son específicos de Facebook y, por lo general, se usan para personalizar la experiencia de autenticación. No puedes pasar parámetros reservados por OAuth o Identity Platform.

    JavaScript 

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

  5. Usa el objeto del proveedor de Facebook para permitir que el usuario acceda. Puedes abrir una ventana emergente o redireccionar la página actual. El redireccionamiento es más sencillo para los usuarios de dispositivos móviles.

    Para mostrar una ventana emergente, llama a signInWithPopup():

    JavaScript 

    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;

    // ...
  });

    Para redireccionar la página, primero llama a signInWithRedirect().

    Sigue las prácticas recomendadas cuando uses signInWithRedirect, linkWithRedirect o reauthenticateWithRedirect.

    JavaScript 

    firebase.auth().signInWithRedirect(provider);

    Luego, llama a getRedirectResult() cuando tu página cargue para recuperar el token de Facebook:

    JavaScript

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

Una vez que tengas un token de acceso, puedes usarlo para llamar a la API de Facebook. Por ejemplo:

REST

curl "https://graph.facebook.com/me?fields=id,name&access_token=[TOKEN]"

Permite que los usuarios accedan de forma manual

Si no deseas usar el SDK de cliente, también puedes controlar el flujo de acceso manualmente.

Este método de acceso también es compatible con el Acceso con Facebook para videojuegos, como un IdP. Identity Platform no admite la implementación manual del Acceso con Facebook para videojuegos. Solo acepta tokens para intercambiar credenciales de Identity Platform.

  1. Para integrar la autenticación de Facebook o Acceso con Facebook para juegos en tu app, sigue los pasos que se indican en su documentación para desarrolladores:

  2. Permite que el usuario acceda a Facebook o Facebook Login for Gaming con el flujo que implementaste en el paso anterior.

  3. Intercambia el token que recibes de Facebook o el Acceso con Facebook por Videojuegos para una credencial de Identity Platform:

    JavaScript 

    var credential = firebase.auth.FacebookAuthProvider.credential(accessToken);

  4. Usa la credencial para que el usuario acceda con Identity Platform:

    JavaScript 

    // Sign in with the credential from the user.
firebase.auth()
  .signInWithCredential(credential)
  .then((result) => {
    // Signed in
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.email;
    // ...
  });

¿Qué sigue?