Menu
I'm using the FB javascript driver for the Graph API to allow a user to pick photos from their Facebook account. The first time they connect they're prompted to login with:
FB.login(function(res) {
if (res.status == 'connected') {
auth = res.authResponse; // cache auth response
getAlbums();
}
});
If successful, I cache the returned auth object and immediately fetch the user's albums with:
function getAlbums() {
FB.api('/me/albums', function(res) {
albums = res.data;
});
}
Using the returned object I iterate over the albums and display their cover_photo with:
https://graph.facebook.com/{{album.cover_photo}}/picture?type=normal&access_token={{auth.accessToken}}
The first time a user logs in, all the cover photos are the question mark icons. However, if the user refreshes, or returns to the page, the app re-authenticates, recognizes the user is already logged in, and displays the proper cover_photo thumbnails.
How can I get newly authenticated users to be able to see their cover photos?
572
I'm not sure, but I think you have not subscribed to authResponseChange event.
The following piece of simple code does the same that you are looking for-
<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>
Hope it helps, good luck!
86
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
