Inicio de sesión de usuarios con Facebook

En este documento se explica cómo usar Identity Platform para permitir que los usuarios inicien sesión con Facebook.

Antes de empezar

En este tutorial se da por hecho que ya has habilitado Identity Platform y que tienes una aplicación web básica escrita en HTML y JavaScript. Consulta la guía de inicio rápido para saber cómo hacerlo.

Configurar Facebook como proveedor

Para configurar Facebook como proveedor de identidades, sigue estos pasos:

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

    Ir a la página Proveedores de identidades

  2. Haz clic en Add A Provider (Añadir proveedor).

  3. Selecciona Facebook en la lista.

  4. Introduce tu ID de aplicación y tu secreto de aplicación de Facebook. Si aún no tienes un ID y un secreto, puedes obtenerlos en la página Facebook for Developers.

  5. Configura el URI que aparece en Configurar Facebook como un URI de redirección de OAuth válido para tu aplicación de Facebook. Si has configurado un dominio personalizado en Identity Platform, actualiza el URI de redirección en la configuración de tu aplicación de Facebook para que use el dominio personalizado en lugar del dominio predeterminado. Por ejemplo, cambia https://myproject.firebaseapp.com/__/auth/handler por https://auth.myownpersonaldomain.com/__/auth/handler.

  6. Para registrar los dominios de tu aplicación, haz clic en Añadir dominio en Dominios autorizados. Para las actividades 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 aplicación para inicializar el SDK de cliente de Identity Platform.

  8. Haz clic en Guardar.

Inicio de sesión de usuarios con el SDK de cliente

  1. Crea una instancia del objeto de proveedor de Facebook:

    JavaScript 

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

  2. Opcional: Añade permisos de OAuth. Los permisos especifican los datos que solicitas a Facebook. Es posible que los datos más sensibles requieran ámbitos específicos. Consulta la documentación del proveedor para determinar qué ámbitos necesita tu aplicación.

    JavaScript 

    provider.addScope('user_birthday');

  3. Opcional: Localiza el flujo de autenticación. Puedes especificar un idioma o usar el idioma 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 de OAuth personalizados adicionales. Son específicas de Facebook y se suelen usar para personalizar la experiencia de autenticación. No puedes transferir parámetros reservados por OAuth o Identity Platform.

    JavaScript 

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

  5. Usa el objeto del proveedor de Facebook para iniciar la sesión del usuario. Puedes abrir una ventana emergente o redirigir la página actual. La redirección es más sencilla 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 redirigir la página, primero llama a signInWithRedirect().

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

    JavaScript 

    firebase.auth().signInWithRedirect(provider);

    A continuación, recupera el token de Facebook llamando a getRedirectResult() cuando se cargue tu página:

    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, podrás usarlo para llamar a la API de Facebook. Por ejemplo:

REST

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

Inicio de sesión de usuarios de forma manual

Si no quieres usar el SDK de cliente, también puedes gestionar el flujo de inicio de sesión manualmente.

Este método de inicio de sesión también admite el inicio de sesión con Facebook para juegos como IdP. Identity Platform no admite la implementación manual de Inicio de sesión con Facebook para juegos. Solo acepta los tokens para intercambiar credenciales de Identity Platform.

  1. Integra la autenticación de Facebook o Inicio de sesión con Facebook para juegos en tu aplicación siguiendo los pasos que se indican en su documentación para desarrolladores:

  2. Inicia sesión con Facebook o Inicio de sesión con Facebook para juegos con el flujo que has implementado en el paso anterior.

  3. Intercambia el token que recibes de Facebook o Inicio de sesión con Facebook para juegos por una credencial de Identity Platform:

    JavaScript 

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

  4. Usa la credencial para iniciar la sesión del usuario 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;
    // ...
  });

Siguientes pasos