7

Sto utilizzando il driver javascript FB per l'API Graph per consentire a un utente di selezionare le foto dal proprio account Facebook. La prima volta che si collegano hanno richiesto di effettuare il login con:Perché l'API Graph restituisce le foto di copertina dei punti interrogativi per i miei album al primo accesso e le immagini corrette sugli accessi successivi?

FB.login(function(res) { 
    if (res.status == 'connected') { 
     auth = res.authResponse; // cache auth response 
     getAlbums(); 
    } 
}); 

In caso di successo, ho cache l'oggetto auth tornato e subito prelevo album dell'utente con:

function getAlbums() { 
    FB.api('/me/albums', function(res) { 
     albums = res.data; 
    }); 
} 

Utilizzando l'oggetto restituito I iterare nel corso degli album e visualizzare il loro cover_photo con:

https://graph.facebook.com/{{album.cover_photo}}/picture?type=normal&access_token={{auth.accessToken}} 

La prima volta che un utente si collega, tutte le foto di copertina sono le icone punto interrogativo. Tuttavia, se l'utente si aggiorna o ritorna alla pagina, l'app si autentica di nuovo, riconosce che l'utente ha già effettuato l'accesso e visualizza le miniature di cover_photo corrette.

Come posso ottenere utenti appena autenticati per poter vedere le loro foto di copertina?

+0

L'immagine di copertina è un punto interrogativo quando non ci sono immagini nel tuo album. Penso che per qualche ragione, il tuo oggetto non venga caricato correttamente per la prima autenticazione. Stai utilizzando le callback correttamente nel tuo codice? –

+0

Ho riprodotto questo problema con un token di accesso vuoto, https://graph.facebook.com/10200952202073231/picture?type=normal&access_token= Provare a console.log il parametro che si ottiene sul callback FB.login – Bnaya

risposta

4

Non sono sicuro, ma penso che non ti sei iscritto a authResponseChangeevent.

il seguente pezzo di codice semplice fa lo stesso che si sta cercando per-

<html> 
<head></head> 
<body> 
<div id="fb-root"></div> 
<script> 
var access_token = ""; 
window.fbAsyncInit = function() 
{ 
    FB.init({ 
     appId  : '<APP-ID>', 
     status  : true, 
     cookie  : true, 
     xfbml  : true 
    }); 

    FB.Event.subscribe('auth.authResponseChange', function(response) 
    { 
     access_token = response.authResponse.accessToken; 
     if (response.status === 'connected') 
     { 
      FetchUserPhotos(); 
     } 
     else if (response.status === 'not_authorized') 
     { 
      FB.login('scope: user_photos'); 
     } 
     else 
     { 
      FB.login('scope: user_photos'); 
     } 
    }); 
}; 

// Load the SDK asynchronously 
(function(d){ 
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; 
if (d.getElementById(id)) {return;} 
js = d.createElement('script'); js.id = id; js.async = true; 
js.src = "//connect.facebook.net/en_US/all.js"; 
ref.parentNode.insertBefore(js, ref); 
}(document)); 

function FetchUserPhotos() 
{ 
    FB.api('/me/albums', function(response) 
    { 
     var albums = response.data; 
     for(var i=0; i<albums.length; i++) 
     { 
      var album = albums[i]; 
      if(album.cover_photo != undefined) 
      { 
       FB.api("/"+album.cover_photo+"?access_token="+access_token, function(cover_photo) 
       { 
        console.log(cover_photo.source); 
       });  
       //console.log("https://graph.facebook.com/"+album.cover_photo+"/picture?type=normal&access_token="+access_token); 
      } 
     }   
    }); 
} 
</script> 

<fb:login-button scope="user_photos" show-faces="true" width="200" max-rows="1"></fb:login-button> 
</body> 
</html> 

Speranza che aiuta, buona fortuna!

+0

Interessante per quanto riguarda gli eventi auth, tuttavia, il problema non è il recupero degli album, ma il recupero delle cover_photos da quegli album la prima volta che l'utente accede all'app. Una volta restituite le cover_photos appaiono come al solito. – Soviut

+0

Ok, ma le foto di copertina sono anche scaricate in una volta sola, giusto? Ho modificato il codice per ottenere le foto di copertina e il suo funzionamento corretto –

+0

Grazie, tuttavia, sto recuperando le immagini, ma stanno mostrando l'immagine "predefinita" del punto interrogativo, quindi un semplice console.log potrebbe non essere sufficiente per Dimostrare che sta funzionando. – Soviut