Develop Reference

Displaying authorization dialog in case user is signed in Facebook

When I use the following link from my app in case the user is not logged in Facebook the Facebook login shows and then user authenticate the app and then the app shows.
Facebook
If user is logged in and search for the app from the Facebook search box then it shows the default.aspx with a Facebook login button.
How can I show the user the authorization dialog instead of the Login button ?
Following is the default.aspx javascript -
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({
appId: '521577774587246', // App ID
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
// Additional initialization code here
FB.Event.subscribe('auth.authResponseChange', 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;
// TODO: Handle the access token
// Do a post to the server to finish the logon
// This is a form post since we don't want to use AJAX
var form = document.createElement("form");
form.setAttribute("method", 'post');
form.setAttribute("action", 'loadMainPage.ashx');
var field = document.createElement("input");
field.setAttribute("type", "hidden");
field.setAttribute("name", 'accessToken');
field.setAttribute("value", accessToken);
form.appendChild(field);
// alert(accessToken);
document.body.appendChild(form);
form.submit();
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
window.top.location = "https://www.facebook.com/dialog/oauth?client_id=521599834587246&redirect_uri=http://localhost:55549/fb/&scope=email,read_stream";
} else {
// the user isn't logged in to Facebook.
}
});
};
// 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>

As suggested in this post I used FB.login instead the FB.Event.subscribe('auth.authResponseChange' and now it asks for authorization.

Facebook Tab / Page Authentication issues: getLoginStatus always returns not_authorized

I have the following code for my Facebook Application:
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXX', // App ID
channelUrl : '/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
//***************************************************
//* FanGate for Facebook
//***************************************************
var hideLogin = function(){
$("#login-fb").hide();
}
var showLogin = function(){
$("#login-fb").show();
}
var doLogin = function(){
FB.login(function(response) {
if (response.session) {
hideLogin();
checkLike(response.session.uid)
} else {
// user is not logged in
}
});
}
var checkLike = function(user_id){
var page_id = "XXXXXXXXX"; //coca cola
var fql_query = "SELECT uid FROM page_fan WHERE page_id = "+page_id+"and uid="+user_id;
var the_query = FB.Data.query(fql_query);
the_query.wait(function(rows) {
if (rows.length == 1 && rows[0].uid == user_id) {
$("#thirsty_thursdays").show();
} else {
$("#fan_gate").show();
}
});
}
FB.getLoginStatus(function(response) {
console.log(response.status);
if (response.status == 'connected') {
hideLogin();
checkLike(response.authResponse.userID)
} else {
showLogin();
}
}, true);
$("#login-fb a").click(doLogin);
};
// 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));
response.status always returns not_authorized and I am really unclear why. I am logged into Facebook and the application is a simple Page Tab. I have recently added App on Facebook to the setting to see if that helps but no luck.
I have not seen any additional info on the Facebook JS SDK docs that give any info.
I am basically looking to show content if the user is logged in and is a fan of a certain page and hide the content if not. (commonly called fan gate)

Would have posted this as a comment but I cant yet...
After your tab loads and the FB.getLoginStatus() response indicates "not_authorized" (and therefore, I assume, shows your login button) -- what happens if you then click your login button? Is it giving the facebook pop-up prompt to authorize the app? (I'm hesitant to ask this but are you in fact sure that you've authorized the app?) Or does it just do nothing?
-In the callback for FB.login.. what does it output if you add a console.log(response.authResponse) ?
-I believe the channelUrl is supposed to be fully qualified whereas you have it root relative.. Not sure that would have any impact on your issue but might want to try it.. see https://developers.facebook.com/docs/javascript/gettingstarted/#channel

Facebook Login behaving weird

I have a site that has a login through facebook option
I can't figure out what's wrong, I'm getting two kinds of errors
The first, even though for me it works (Chrome, Explorer) my friend receives a "new_fb_login() not defined" error
And just now I started getting those ambiguous errors (chrome debug):
Unsafe JavaScript attempt to access frame with URL **facebooky URL** from
frame with URL http://site.co.il/. The frame being accessed set
'document.domain' to 'facebook.com', but the frame requesting access did not.
Both must set 'document.domain' to the same value to allow access.
I thought it might have something to do with my site currently password protected, because now when I put the password back I just started getting them, but after disabling back they didn't stop, maybe takes some time to refresh?...
I'd appreciate some light upon this, thanks!
this is my code, right after the tag
<div id="fb-root"></div>
<script>
function new_fb_login() { //
if(!fb_connected){
FB.login(function(response) {
if (response.authResponse) {
fb_connected = true;
console.log('connected'); //Approved the app just now
login(true);
} else {
fb_connected = false;
console.log('cancelled');
}
});
}
else{
FB.api('/me', function(response) {
login(true);
});
}
}
function testAPI() {
console.log('Logged');
FB.api('/me', function(response) {
console.log('Welcome, ' + response.name + '.');
});
}
window.fbAsyncInit = function() {
FB.init({
appId : 'MyActualCode', // App ID
channelUrl : '//WWW.site.CO.IL/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional init code here
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
console.log('connected');
fb_connected = true;
//testAPI();
} else if (response.status === 'not_authorized') {
fb_connected = false;
console.log('not_authorized');
//login();
} else {
console.log('not_logged_in');
fb_connected = false;
//login();
}
});
};
// 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));

Facebook Authentication no longer works - Doesn't render the login button

My Facebook authentication has stopped working all of a sudden. Has FB changed something? I am running the site from localhost at the moment using FB Javascript SDK. None of the following FB code is working?
alert("got here");
window.fbAsyncInit = function () {
alert("didn't get here");
FB.init({
appId: '102671026556892', // App ID
//appId: '384834001576531', // App ID
channelUrl: '//localhost/channel.html', // Channel File
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
FB.Event.subscribe('auth.authResponseChange', 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;
FB.api('/' + uid, function (user) {
if (user) {
loginUser(uid, user.email, user.name);
window.location = "/users/index.html";
}
});
// check an load DB
// TODO: Handle the access token
} 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.
}
});
};
alert("got here too");
// 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));
alert("got here as well");
The alert that are not in the window.fbAsyncInit display fine. The one in the window.fbAsyncInit does not. It doesn't render the login button (code below)
<!-- START of Facebook LOGIN BUTTON -->
<div id="fb-root"></div>
<div class="fb-login-button" data-show-faces="false" data-width="400" data-max-rows="1" data-size="medium" data-colorscheme="light" scope="user_about_me, email, read_stream, publish_actions">Login with Facebook</div>
<!-- END of Facebook LOGIN BUTTON -->
Any help greatly appreciated. It all worked at the end of last week. :(

how to access javascript variables in python

I am creating a facebook app and it uses Javascript API to store username and other details in js variables. And this app is created under Python(using Google App Engine). I want to access the js variables in Python and store the values in Db. How to do this?
class MainPage(webapp2.RequestHandler):
def get(self):
self.response.out.write("""
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Captain Pandey</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '185318768251247',
channelURL : 'http://localhost:8080/channel.html',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
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;
FB.api('/me', function(apiResponse) {
var name = apiResponse.name;
});
}
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.
}
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1" scope="email">Login to Facebook</div>
</body>
</html>
""")
and template used is webapp2

Design the Javascript code so that it makes an AJAX request that sends the data, and write a Python handler for that request.