Estoy tratando de usar el SDK de Facebook para javascript, quiero que el usuario inicie sesión para poder obtener el token que devuelve FB, el proceso se completa con éxito pero aparece el error "NetworkError cuando intento obtener el recurso". en la consola
Este es mi código para llamar al SDK de Facebook y conectarme con mi aplicación:
export function initFacebookSdk() { return new Promise(resolve => { // wait for facebook sdk to initialize before starting the react app window.fbAsyncInit = function () { window.FB.init({ appId: <appId>, cookie: true, xfbml: true, version: 'v13.0' }); resolve() }; }); } export function loadFacebookSDK(d, s, id){ return new Promise(resolve => { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) { return; } js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); resolve() }) }Y esta es la función a la que llamo para iniciar sesión con Facebook:
export const FbLogin = () => { return new Promise( resolve => { loadFacebookSDK(document, "script", "facebook-jssdk") initFacebookSdk() window.FB.login(response => { if (response.authResponse) { resolve(response); } else { resolve(response); } }, {scope: 'email'}); }) }Esta parte del código es la que llama a la función y obtiene el token correctamente:
const getFbToken = async (e) => { e.preventDefault() const data = await FbLogin(); console.log(data); }Necesito ayuda para saber que estoy haciendo mal y como evitar que me aparezca el error, por ahora estoy realizando las pruebas en local.
NetworkError significa que la solicitud no pudo realizarse. Las causas más comunes de esto son:
En el caso de OP, su bloqueador de anuncios bloqueaba la solicitud a Facebook. Esto es común, ya que se utiliza el mismo SDK para recopilar datos de usuario y mostrar anuncios de Facebook.
Para evitar una experiencia de usuario deficiente para los usuarios con un bloqueador de anuncios, es probable que desee mostrar un mensaje de error significativo si se bloqueó la solicitud. Una buena solución a esto se describe en esta publicación .