I have been trying to get Facebook API to load my photos. I just keep getting array[0].
I am very new to Facebook Developer, so any help would be great.
Thanks
My code:
if(response.status == "connected"){
FB.api("/me/", function(resp2){
console.log(resp2);
$("#userinfo").append("<br/>Welcome "+resp2.name+"!");
// store info in object
userinfo.name = resp2.name;
//userinfo.gender = resp2.name;
//userinfo.id = resp2.id;
//alert(resp2.id)
});
FB.api("/me/picture", function(pic_resp){
console.log(pic_resp);
$("#userinfo").append("<img src='"+pic_resp.data.url+"' />");
// store info in object
userinfo.pic = pic_resp.data.url;
});
FB.api("/me/photos", function(photos_resp){
console.log(photos_resp);
});
} else{
FB.login(function(response){
},{scope: 'user_photos'});
}
If user_photos does not work in the authorization process, you are most likely trying with a user that is not an App Admin/Developer/Tester. Before you can make that permission work for any other user, you have to go through a review process: https://developers.facebook.com/docs/apps/review/login
If that is not the case, if you still don´t get asked for the permission, there´s something wrong with your login process.
According to the FB API Docs there's an "error" property in the response. Please check that out.
Quote:
/* make the API call */
FB.api(
"/me/photos",
function (response) {
if (response && !response.error) {
/* handle the result */
}
}
);
Related
I've got following code for user authorization using Firebase but I'm not able to understand the code. Below the code I've mentioned the doubts I'm facing. Plase someone clarify them.
var ref = new Firebase("https://prj_name.firebaseio.com");
var loggedInUser = [];
$(document).ready(function() {
authData=ref.getAuth();
if(authData == null){
//TODO find an elegant way to manage authorization
// window.location = "../index.html";
}else{
ref.child("users").child(authData.uid).on("value", function(snapshot){
$( "span.user-name").html(snapshot.val().displayName);
loggedInUser.displayName = snapshot.val().displayName;
});
}
$("#cPassword").focusout(function() {
validatePassword($("#cPassword"), $("#password"));
});
$(document).on("click", ".clickable-row" ,function(){
window.document.location = $(this).data("href");
});
});
function validatePassword(password, cPassword) {
if (cPassword.val() != password.val()) {
cPassword.css('border-color', 'red');
password.css('border-color', 'red');
return false;
}
return true;
}
All the necessary libraries like firebase have been included and above code is working absolutely fine, the only concern is I'm not able to understand it.
My doubts are as follows :
What does the line authData=ref.getAuth(); do and what authData contains after it get execute?
In else block, what is value and snapshot. I didn't understand at all the line. ref.child("users").child(authData.uid).on("value", function(snapshot)
Can someone please clarify my doubts? Thanks.
Ok here goes:
Firstly you should update your firebase security rules first if you haven't already: Firebase security rules guide
ref.getAuth() returns a value that will either be null if you haven't been authorised yet or it will contain an object with some info about how the user was authorised (custom token, facebook id, email etc.)
This line: ref.child("users").child(authData.uid).on("value", function(snapshot). Here you're basically requesting some data from your users collection: '/users/{some unique id}'. When you request the data from firebase, as soon as the data is ready to be used, Firebase triggers the "value" callback and passes the data (snapshot) using this callback.
The firebase docs are very good, I would advise reading through the entire web guide. Firebase web guide
I hope I've been able to clear some things up for you!
I'm trying to use hello.js to allow users to login using their social media accounts. I seem to be successfully getting the allow page to show, and a redirect is happening but I don't understand how my system is supposed to know who that person is. I'm assuming it's via the access token but I can't seem to print it to the console at any point of the login process.
$('#facebookLogin').on('click', function(e){
e.preventDefault();
hello('facebook').login({display:'page'});
return false;
});
This "works" as in, I see the app connected in my Facebook apps. I've tried to follow the instructions here in order to show the object after login but I see nothing with console.log(token).
$('#facebookLogin').on('click', function(e){
e.preventDefault();
hello( 'facebook' ).login({display: 'page'} function() {
var token = hello( 'facebook' ).getAuthResponse().access_token;
console.log(token);
});
return false;
});
I humbly request that if you have answer to post working code. There's a lot of text trying to explain this and I really don't understand it. I need to see something that works.
Try this code.
$('#facebookLogin').on('click', function(event) {
event.preventDefault();
hello('facebook').login({display: 'page'},
function() {
hello('facebook').api("me")
.then(function(userDetails) {
console.log("hello api success");
console.log(userDetails);
}, function(e) {
console.log(e);
});
});
return false;
});
userDetails contains user credentials.
Hope it helps.
I am developing an app using angularjs and this is my first hands on using angular. Although, I have started understanding it and have developed some part of the app but I am stuck at one particular point.
I am trying to implement login functionality, so as the page loads, I am authenticating user and redirecting him to login page. On successful login, I am storing some values of user in one of the config provider.
Now I am using an API which has their own method of authentication and they have expose the ajax method which I can use to authenticate a user.
I have provided a snippet below. What I am primarily doing is using the external API, authenticating the user and once authenticated, I am getting roles associated to that user using another ajax method of the API, called "GetUserDetails".
And inside the response of the "GetUserDetails", I am injecting a provider and setting some values, so I can use this across my app.
The problem here is the app.config method is never called/executded. I mean the ajax request is returning response, and the alert is displayed on my page, but app.config is never executed.
But the same app.config if I call inside the done() of GetUser method, the app.config gets executed and stores values in my provider. But I want the GetuserDetails values also to be stored before I do anything in my app as I want to execute certain functionality based on user.
Below is my function in main.js file
function(angular,angularRoute,app,routes,configService){
var $html = angular.element(document.getElementsByTagName('html')[0]);
angular.element().ready(function() {
$.c.authentication.getUser()
.done(function(response){
if(response.userName!="anonymous"){
$.c.ajax({
method: "GetUserDetails",
parameters: {
User: response.user
}
})
.done(function(res) {
alert("I have reached the destination").
app.config(['configServiceProvider', function(configServiceProvider){
configServiceProvider.setLoginStatus(true);
configServiceProvider.setUserName(response.userName);
configServiceProvider.setUserObject(response);
configServiceProvider.setUserRoleDetails(res);
}]);
})
.fail(function(res) {
alert("Error while getting user roles ."+res);
});
angular.resumeBootstrap([app['name']]);
}
else
{
app.config(['configServiceProvider', function(configServiceProvider){
configServiceProvider.setLoginStatus(false);
configServiceProvider.setUserName(response.userName);
}]);
//Show Login Screen
var url = window.location.href.split("#")[0];
window.location.href = url + "#/Login";
angular.resumeBootstrap([app['name']]);
}
})
.fail(function(response){
$rootScope.isLoggedIn=false;
});
});
Here is my configServiceProvider
define(['../app'],function(app){
return app.provider('configService', function(){
var options={};
this.setLoginStatus = function(status){
//$rootScope.isLoggedIn = status;
options.isLoggedIn=status;
};
this.setPreLoginInfo=function(info){
options.preLoginInfo=info;
};
this.setUserName=function(name){
options.username=name;
}
this.setUserObject = function(userObject) {
options.userObject = userObject;
}
this.setUserRoleDetails = function(userRoleDetails) {
options.userRoleDetails = userRoleDetails;
}
this.$get=[function(){
if(!options){
}
return options;
}];
});
})
Can anyone please explain me what's going wrong here or what I am missing ?
Also, is there any alternative to achieve the same functionality ?
No luck in figuring out why the above scenario was not working. Since I had already spent lot of time behind this, I have found a workaround to achieve the same with the use of services.
I'm having trouble getting a logged in facebook user in my parse.com application to log out. What is wrong with the code below?
function logOff() {
function thisSuccess(e) {
console.log(1);
}
function thisError(e) {
console.log(0);
}
var u = Parse.User.current();
Parse.FacebookUtils.unlink(u, {success: thisSuccess,error: thisError});
u.logOut();
}
I've searched everywhere, the best response I got was that the facebook account linked to the user needs to be unlinked as well - I'm not entirely sure whether this is so.
All you need is Parse.User.logOut();
Don't unlink the Facebook account, as that use won't be able to log in again. Next time they try to log in with Facebook Parse will create a new user for them.
I've been experimenting with the Facebook API using the Javascript SDK. Whenever I'm logged into Facebook I can pretty reliably call:
function init() {
// Called after loading the Facebook SDK
FB.api("/me", function(response) {
console.log(response.first_name); // "John" (always works)
});
}
But I also want to get a users photo albums (when they click a link) and for some reason this call only works intermittently:
$(document).ready(function) {
$("#get-albums-link").click(function() {
var accessToken = "456"; // Just an example
FB.api("/me/albums?access_token=" + accessToken, function(response) {
console.log(response); // An empty object about 40% of the time
});
});
});
When this happens I can open up a new tab and verify that even direct queries return this same empty result (note that although this could be an authorizations issue, there is no obvious indication that it is; it is simply an empty JSON object):
<!-- An HTTPS GET at https://graph.facebook.com/me/albums?access_token=456 -->
{
"data": [
]
}
As Felipe pointed out above, the access token can be the issue, as not having permissions set will return {"data":[]}. Try it yourself: https://developers.facebook.com/tools/explorer/?method=GET&path=me%2Falbums
Also, even if it is a valid auth_token, the SDK doesn't require one, so don't use it. You might end up with something like graph.facebook.com/me/albums?access_token=123423&access_token=981234 (second access token added by SDK). I, personally, don't know how the FB.api function is built, but just follow the docs: https://developers.facebook.com/docs/reference/javascript/FB.api/
Let me know if you still have issues.