Fb graph api permissions aren't working - html

Question

I am using facebook login and its graph api to list all images of user to my website and the following code is working fine only for me that is the administrator and owner of the facebook app, it is not working for anyother person when he logged in the website using facebook login.
Explanation of code: When user logged in, a function named testAPI is called which gets user basic information and then it makes another call to FB.API for permission access and then finally for getting pictures.
The permission parameter "res" gets nothing for anyother user, but its working for me(administrator).
heres the code:
<div id="fb-root"></div>
<script>
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : MY_APP_ID, // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
login();
} else {
login();
}
});
};
function login() {
FB.login(function(response) {
if (response.authResponse) {
testAPI();
} else {
// cancelled
}
},{scope:'user_photos',perms:'user_photos'});
}
var id;
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
console.log(response);
id=response.id;
var link='/'+ id + '/permissions?access_token=FB_GENERATED_ACCESS_TOKEN';
FB.api(link,function(res){
console.log("permissons: ",res);
link='/'+ id + '/photos?fields=images';
FB.api(link, function(response) {
//placing all pictures
for(var i=0;i<response.data.length;i++)
{
var img="<img src="+response.data[i].images[0].source+" class='small' />";
$("#images").append(img);
}
console.log(response);
});
});
});}
(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));
</script></body>
<fb:login-button autologoutlink='true'
perms='email,user_birthday,status_update,publish_stream'></fb:login-button>
<div id="images"></div>

Answer 1

I got your actual problem,
<fb:login-button autologoutlink='true'
perms='email,user_birthday,status_update,publish_stream'></fb:login-button>
You missing out here , user_photos permission. your javascript function is not calling because fb:login-button do all stuff by self. your new code should be :
<fb:login-button autologoutlink='true'
perms='email,user_birthday,status_update,publish_stream,user_photos'></fb:login-button>

Answer 2

Instead of
var link='/'+ id + '/permissions?access_token=FB_GENERATED_ACCESS_TOKEN';
FB.api(link,function(res){
console.log("permissons: ",res);
link='/'+ id + '/photos?fields=images';
FB.api(link, function(response) {
//placing all pictures
for(var i=0;i<response.data.length;i++)
{
var img="<img src="+response.data[i].images[0].source+" class='small' />";
$("#images").append(img);
}
console.log(response);
});
Try this:
FB.api('/me/permissions', function (response) {
console.log("permissons: ", res);
var perms = response.data[0];
if (perms.user_photos) {
FB.api('/me/photos?fields=images', function (response) {
//placing all pictures
for (var i = 0; i < response.data.length; i++) {
var img = "<img src=" + response.data[i].images[0].source + " class='small' />";
$("#images").append(img);
}
console.log(response);
} else {
// User DOESN'T have permission. Perhaps ask for them again with FB.login?
login();
}
});