Facebook Connect via Javascript doesn't close and doesn't pass session id

Question

I'm trying to authenticate users via Facebook Connect using a custom Javascript button:

<form>
<input type="button" value="Connect with Facebook" onclick="window.open('http://www.facebook.com/login.php?api_key=XXXXX&amp;extern=1&amp;fbconnect=1&amp;req_perms=publish_stream,email&amp;return_session=0&amp;v=1.0&amp;next=http%3A%2F%2Fwww.example.com%2Fxd_receiver.htm&amp;fb_connect=1&amp;cancel_url=http%3A%2F%2Fwww.example.com%2Fregister%2Fcancel', '_blank', 'top=442,width=480,height=460,resizable=yes', true)" onlogin='window.location="/register/step2"' />
</form>

I am able to authenticate users. However after authentication, the popup window just stays open and the main window is not directed anywhere. In fact, it is the popup window that goes to "/register/step2"

How can I get the login window to close as expected, and to pass the facebook session id to /register/step2?

Thanks!

Answer 1

Are your Facebook application's settings set to redirect back to a Django-enabled URL? For example, in my URLconf I have:

url(r'^facebook/setup/$', facebook_complete_reg, name="facebook_setup"),

The 'facebook_complete_reg' view looks something like the 'setup' view in django-facebookconnect's source. I would use that file to make sure that your "return from Facebook" view does the correct action.

Finally, make sure that your templates load the correct JavaSript. In my main template I have the following loaded:

{% load facebook_tags %}
{% facebook_js %}
{% initialize_facebook_connect %}

This would enable you to use the template tag 'show_connect_button', which is what I assume you are doing.

The only other possibility I can think of is that you are using a JavaScript blocker or some similar browser plugin. Can you post some code?

Ryan

Answer 2

The thing is that, you've to close the popup window and reload the main window yourself by coding.

Here is a step by step to do this: http://bit.ly/bsBL2h

Answer 3

Hi, you can use xd_receiver.html file with following code :

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script>

put it in template folder and then put this code where you want the button should be in your app page :

    <script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US" type="text/javascript">
    </script>
    <script type="text/javascript">
      FB.init("API_KEY", "/xd_receiver.html",{ permsToRequestOnConnect : "email,publish_stream,photo_upload,offline_access" });

    function facebook_login() {
       window.location ="/register/step2"
    }
    </script>
    <fb:login-button onlogin="facebook_login();"></fb:login-button>

and add one url to get xd_receiver and create view for it as well

hope this will help you

Thanks

Ansh J

Answer 4

Looks like you might be using the old JS SDK (your code sample is confusing, but the onlogin handler makes me think you are using some SDK). Do yourself a favor and switch to the new JS SDK. Then use XFBML and the <fb:login-button>:

<fb:login-button perms="read_stream"></fb:login-button>

It will make your life much easier and do most of the hard work for you.