We Keep Coding

What redirect uri to use on Cordova with the Deezer Javascript SDK?

I am working on a mobile application, using Cordova. I want to implement the Deezer Javascript SDK. Everything is fine except for one thing: I cannot implement the login method (DZ.login).
DZ.login method uses the oauth2 protocol. When I call it, I access the Deezer connection interface, so I can write my credentials. But it comes to redirection, I only get a white screen.
The fact is that I don't know, and I did not find what redirect_url to use.
Indeed, when you register an application on Deezer Developers, you have to give an application domain, and a redirect uri. I tried lots:
localhost / http: //localhost/index.html (Gives me a white screen)
com.company.app / http: //app.company.com/index.html (Gives me an invalid redirect uri)
company / "http: //company.com/index.html" (Gives me an invalid redirect uri)
(I put spaces between http: and // as my reputation is not high enough to post more than 2 links)
This is the SDK initialization function:
initDeezerSDK: function() {
DZ.init({
appId : 'myAppId',
channelUrl : 'http://localhost/channel.html',
player: {
onload: function () {
alert("yo");
}
}
});
},
This is the Deezer login function:
DZ.login(function(response) {
if (response.authResponse) {
DZ.api('/user/me', function(response) {
$('deezer-name').val(response.name);
window.location.href = '#profile';
alert(response.name);
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
},
{
perms: 'basic_access,email'
});
Thanks for your help guys, this part is really critical for my app... Cheers!
Deezer developers interface

FB.getLoginStatus doesn't work in Chrome even sandbox disable

I follow railscast to add "sign in with Facebook" feature in my site, there is no problem to login. But when try to logout, it seems that FB.getLoginStatus never got fire even when I disable Sandbox Mode in facebook developer app settings (as suggested in some other discussion):
(function() {
jQuery(function() {
$('body').prepend('<div id="fb-root"></div>');
return $.ajax({
url: "" + window.location.protocol + "//connect.facebook.net/en_US/all.js",
dataType: 'script',
cache: true
});
});
window.fbAsyncInit = function() {
FB.init({
appId: 'xxxxxomittedxxxxx',
cookie: true,
status: true,
xfbml: true,
oauth: true
});
$('#sign_in').click(function(e) {
e.preventDefault();
return FB.login(function(response) {
if (response.authResponse) {
return window.location = '/auth/facebook/callback';
}
});
});
return $('#sign_out').click(function(e) {
FB.getLoginStatus(function(response) {
if (response.authResponse) {
return FB.logout(response.authResponse);
}
});
return true;
});
};
}).call(this);
The reason I know the FB.getLoginStatus never get in (or doesn't work) is I replace the body with:
FB.getLoginStatus(function(response) {
return alert("I am here!");
});
and I cannot see my alert while "sign_out" click.
I am running both Chrome and Firefox having the same behaviour. Could anybody help to spot what am I missing? Thanks a lot.
Let me describe more specific about the "behaviour" I encountered:
sign in with Facebook from mysite.com the first time a Facebook login window will popup and ask for email and password, and I can sign in to my site perfectly ok and work as expected
then I click on sign_out button from mysite.com/users/1, it looks like it sign out ok.
then sign in with Facebook from mysite.com again, now it won't popup the Facebook login window anymore and login to mysite.com/users/1 directly without asking email and password!
if I open another browser window and go to facebook.com and logout from there, then when I sign in with Facebook from mysite.com, it will popup a Facebook login window now and ask for my email and password.
I would like my site to behave: "when logout from mysite.com/users/n and sign in with Facebook again from mysite.com, the Facebook login window shall popup"
Anyone could be of help? Thanks a lot.
EDIT:
Further investigation found the "root" cause might be still: the sign out is under the different route (or page) of the sign in route and FB.getLoginStatus just cannot be fire under the mysite.com/signout. The error message from firebug indicates that "Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains."
To proof it is the route issue, I put a sign out link in the same route (page) as sign in route which is the root route mysite.com as specified in the "Website with Facebook Login", everything works and can logout as expected:
<%= link_to "sign out facebook", "#" , id: "sign_out" %>
by the way the sign_out js is revised to get rid of FB.logout(response.authResponse) uncaught [object Object] error, because FB.logout expects function as parameter:
return $('#sign_out').click(function(e) {
FB.getLoginStatus(function(response) {
if (response.authResponse) {
FB.logout();
}
}, true);
});
};
So, the bottom line: FB.getLoginStatus might still have a bug which cannot handle the call from a different route than sign in route. (I tested with Chrome, Firefox and Safari and all behave the same but not true for IE10. Somehow IE10 works even sign out at different route.)
Any comment from people who have similar problem? Please advise. Thank you very much in advance.

Try adding true as second parameter to getLoginStatus, as stated in FB dev doc:
FB.getLoginStatus(function(response) {
// this will be called when the roundtrip to Facebook has completed
}, true);
This should avoid caching.
Another option is to subscribe to events:
FB.Event.subscribe('auth.login', function(response) {
// do something with response
});
All from here
Comment if you have questions.
EDIT:
I modified your script a little bit, removed unneeded code parts. You had too many returns that are not needed. I tried sign out within this modified script, it works as you need it.
Events subscription is for check purposes.
<head>
<title>Exam entry</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<div id="fb-root"></div>
<input type="button" value="Sign in" id="sign_in" />
<input type="button" value="Sign out" id="sign_out" />
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({
appId: '586844044669652',
cookie: true,
status: true,
xfbml: true
});
// Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
// for any authentication related change, such as login, logout or session refresh. This means that
// whenever someone who was previously logged out tries to log in again, the correct case below
// will be handled.
FB.Event.subscribe('auth.authResponseChange', function (response) {
// Here we specify what we do with the response anytime this event occurs.
if (response.status === 'connected') {
// The response object is returned with a status field that lets the app know the current
// login status of the person. In this case, we're handling the situation where they
// have logged in to the app.
testAPI();
} /*else if (response.status === 'not_authorized') {
// In this case, the person is logged into Facebook, but not into the app, so we call
// FB.login() to prompt them to do so.
// In real-life usage, you wouldn't want to immediately prompt someone to login
// like this, for two reasons:
// (1) JavaScript created popup windows are blocked by most browsers unless they
// result from direct interaction from people using the app (such as a mouse click)
// (2) it is a bad experience to be continually prompted to login upon page load.
FB.login();
} else {
// In this case, the person is not logged into Facebook, so we call the login()
// function to prompt them to do so. Note that at this stage there is no indication
// of whether they are logged into the app. If they aren't then they'll see the Login
// dialog right after they log in to Facebook.
// The same caveats as above apply to the FB.login() call here.
FB.login();
}*/
});
$('#sign_in').click(function (e) {
e.preventDefault();
FB.login(function (response) {
if (response.authResponse) {
//return window.location = '/auth/facebook/callback';
}
});
});
$('#sign_out').click(function (e) {
FB.logout(function (response) {
console.log("Here logout response", response);
});
});
};
// Here we run a very simple test of the Graph API after login is successful.
// This testAPI() function is only called in those cases.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function (response) {
console.log('Good to see you, ' + response.name + '.');
});
}
// 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));
</script>
</body>

FB.getLoginStatus() return "unknown" in Firefox when user is logged

In my site I test if a user is logged on Facebook in order to suggest him/her to like my Facebook site page.
Then, I use the conventional Facebook Js SDK function to understand if the user is logged or not:
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
var accessToken = response.authResponse.accessToken;
fbuid = response.authResponse.userID;
status = 'connected';
} else if (response.status === 'not_authorized') {
fbuid = null;
status = 'not_authorized';
} else { // the user isn't logged in to Facebook.
status = 'generic';
fbuid = 1;
}
that.evaluateFbStatus(status, fbuid);
}
It works perfectly with every browsers except Firefox.
In Firefox it returns always unknown even if the user is logged on Facebook and the status is not_authorized or connected.
Any help is accepted.

The problem is due to third party cookies.
To use Facebook SDK functions in Firefox, is necessary to open setting and able third party cookies Preferences > Privacy > Accept-third-party cookies
Have a look on this page for more details.

Facebook error when like button pressed

I get this, when clicking on the like button.
Unsafe JavaScript attempt to access frame with URL http://www.facebook.com/dialog/oauth?api_key=248753205242460&app_id=248753205242460&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D9%23cb%3Dfedecb848%26origin%3Dhttp%253A%252F%252Flocalhost%252Ff2ad19772%26domain%3Dlocalhost%26relation%3Dparent.parent&client_id=248753205242460&display=none&domain=localhost&locale=en_US&origin=1&redirect_uri=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D9%23cb%3Df99e53428%26origin%3Dhttp%253A%252F%252Flocalhost%252Ff2ad19772%26domain%3Dlocalhost%26relation%3Dparent%26frame%3Df2c40b1914&response_type=token%2Csigned_request%2Ccode&sdk=joey from frame with URL http://www.facebook.com/plugins/like.php?action=like&api_key=248753205242460&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D9%23cb%3Df458cef1c%26origin%3Dhttp%253A%252F%252Flocalhost%252Ff2ad19772%26domain%3Dlocalhost%26relation%3Dparent.parent&colorscheme=light&extended_social_context=false&font=segoe%20ui&href=http%3A%2F%2Fecommercedeveloper.com&layout=standard&locale=en_US&node_type=link&sdk=joey&show_faces=true&width=400#. Domains, protocols and ports must match.
Unsafe JavaScript attempt to access frame with URL https://s-static.ak.facebook.com/connect/xd_arbiter.php?version=9#channel=f2ad19772&origin=http%3A%2F%2Flocalhost&channel_path=%2FDummy%2FFBplugin%2Ffb.php%3Ffb_xd_fragment%23xd_sig%3Dfe951f208%26 from frame with URL http://www.facebook.com/plugins/like.php?action=like&api_key=248753205242460&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D9%23cb%3Df458cef1c%26origin%3Dhttp%253A%252F%252Flocalhost%252Ff2ad19772%26domain%3Dlocalhost%26relation%3Dparent.parent&colorscheme=light&extended_social_context=false&font=segoe%20ui&href=http%3A%2F%2Fecommercedeveloper.com&layout=standard&locale=en_US&node_type=link&sdk=joey&show_faces=true&width=400#. Domains, protocols and ports must match.
I dont know why I get that error, it could be because the code that checks the login is triggered..
This my html:
<!DOCTYPE html>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
$(document).ready(function(){
FB.init({
appId : '248753205242460', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
window.fbAsyncInit = function() {
console.log('Sdk is loaded');
FB.getLoginStatus(function(response) {
console.log('GEtting logged in status');
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
console.log('User is connected');
var accessToken = response.authResponse.accessToken;
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
console.log('User not authorized');
} else {
// the user isn't logged in to Facebook.
console.log('User inst logged in');
}
});
};
FB.Event.subscribe('edge.create',
function(response) {
console.log('You liked the URL: ' + response.status);
});
});
</script>
</body>
</html>

The error messages Unsafe JavaScript attempt to access frame with URL and Domains, protocols and ports must match usually imply that your http protocols are faulty.
Should you be using HTTPS for these calls instead of normal HTTP?
when i see these errors i usually test out if i'm missing an https somewhere...
Also see if your app has all it's secure URLs set up in the developer management panel on facebook!

The other event that I am using is "getLoginStatus", which will show me if the user is logged in to facebook or not..
That’s not an “event” in itself – it’s just an asynchronous method, and it gets you the login status.
console.log('FB.getLoginStatus: '+FB.getLoginStatus);
At this point you are not even calling the method – you are just stating it’s name. (I know, you’re calling it before – but this debug output does not make much sense.)
I want to trigger edge.create
How exactly did you implement your like button? This event is not fired if you’re using the iframe version of the button.
[from comments] I think I need to have my own app id... can it be the cause? it is my facebook name and not a number
Of course you do. Your user name is not an app id in any way.

How to detect user logging out of Facebook after logging into my app?

My application uses Facebook authentication:
FB.init({
appId: config.fbAppId,
status: true,
cookie: true,
// xfbml: true,
// channelURL : 'http://WWW.MYDOMAIN.COM/channel.html', // TODO
oauth : true
});
// later...
FB.login(function(response)
{
console.log(response);
console.log("authId: " + response.authResponse.userID);
gameSwf.setLoginFacebook(response.authResponse.accessToken);
}, {scope:'email,publish_actions,read_friendlists'});
And when using it, people can post to their wall:
var obj = {
method: 'feed',
link: linkUrl,
picture: pictureUrl,
name: title,
caption: "",
description: message
};
function callback(response) {
// console.log("Post on wall: " + response);
}
FB.ui(obj, callback);
This works fine, but there is one little hickup. If people:
Log in on the app.
Log out of Facebook.
Attempt to make a wall post from the app.
The opening of the wall post dialog fails. The console says "Refused to display document because display forbidden by X-Frame-Options.".
Can I instead get Facebook to show a login prompt to the user. Or can I detect the error and tell the user that he's no longer logged in on Facebook?

Just recall getLoginStatus BUT forcing a roundtrip to Facebook. Look following code:
FB.getLoginStatus(function(response) {
// some code
}, true);
Look the last parameter set to true to force the roundtrip.
From JS SDK documentation:
To improve the performance of your application, not every call to
check the status of the user will result in request to Facebook's
servers. Where possible, the response is cached. The first time in the
current browser session that FB.getLoginStatus is called, or the JS
SDK is init'd with status: true, the response object will be cached by
the SDK. Subsequent calls to FB.getLoginStatus will return data from
this cached response.
This can cause problems where the user has logged into (or out of)
Facebook since the last full session lookup, or if the user has
removed your application in their account settings.
To get around this, you call FB.getLoginStatus with the second
parameter set to true to force a roundtrip to Facebook - effectively
refreshing the cache of the response object.
(http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/)

What you could try and use is the FB.getLoginStatus where if the user is connected this would allow them to complete the wall post.
If they aren't connected then call the FB.login method before they can post on the wall.
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
} else {
// the user isn't logged in to Facebook.
}
});
http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
There are also the events for login and logout that you can watch for and do something with those responses.
FB.Event.subscribe('auth.login', function(response) {
// do something with response
});
FB.Event.subscribe('auth.logout', function(response) {
// do something with response
});
http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/