Facebook javascript SDK FB.login is not working in Facebook iFrame
Emily Wong 
We are using Facebook JavaScript SDK to authenticate our Facebook application. The application is configured with the Canvas URL as . Following is the code we are using to authenticate the Facebook user.
<script type="text/javascript"> window.fbAsyncInit = function() { debugger; FB.init({ appId: '<%= ViewData["AppId"].ToString() %>', // App ID channelUrl: '<%= ViewData["ChannelUrl"].ToString() %>', // Channel File status: true, // check login status cookie: true, // enable cookies to allow the server to access the session xfbml: true, // parse XFBML oauth: true }); FB.Event.subscribe('auth.login', function(response) { if (response.status === 'connected') { // the user is logged in and connected to 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; startApp(uid, accessToken); } }); }; // Load the SDK Asynchronously (function(d) { var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; } js = d.createElement('script'); js.id = id; js.async = true; js.src = "//"; d.getElementsByTagName('head')[0].appendChild(js); } (document)); function startApp(uid, accessToken) { var baseUrl = '<%= ViewData["AppBaseURL"].ToString() %>'; var redirectUrl = baseUrl + '?uid=' + uid + '&accessToken=' + accessToken; window.top.location.href = redirectUrl; //document.location = redirectUrl; } </script>
<fb:login-button onlogin="initiateLogin()" perms="email,user_about_me,user_birthday,friends_about_me,friends_birthday">Login with Facebook</fb:login-button>The above code is not working in the Facebook when accessed as . However we are able to access it through
24 Answers
The issue is related to pop-up blocking by browser. (the fact that is working for you outside of Facebook is probably because you're allowed to do so sometimes before, for me it's blocked as well as within application).
You should never call FB.login without interaction from user (like element click or form submit) to ensure browser isn't blocking log-in window.
Update:
You mixing many things here:
- Page on is using Application #316853928368079 (this app and have no
namespace!) - Your URL for OAuth Dialog have
'(apostrophe) aroundclient_idwhich is wrong! - OAuth Dialog isn't working (probably also due to app settings, App Domain?)
- Application located on is Application #83808922524 and have wrong Canvas URL! Proof:
<body> <div></div> <script> window.fbAsyncInit = function() { FB.init({ appId : 'xxxxxxx', status : true, cookie : true, xfbml : true, oauth : true, }); }; (function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); //LOGIN FUNCTION function login() { FB.login(function(response) { if (response.authResponse) { alert('Success!'); }else{ alert('Login Failed!'); } }, {scope: 'email'}); } </script> <div onclick="login();">Login with Facebook</div> </body>Also check if your app on deveopers.facebook.com isn't in sandbox mode. I had an issue login worked fine with my main account (which was app admin), but not with other facebook accounts. Later I realized fb app was still in sandbox mode and I had to add each account who was testing as Tester or Developer or disable sandbox mode.
Facebook suddenly switched from using their Facebook dialog method to display the authentication window to old-fashioned popup-windows today. Until now, popup windows have only been used when running apps outside a Facebook tab/canvas. This means that you can no longer run FB.login on load and use a click event instead to avoid popup blockers.
The only documentation from Facebook we've found on this is at , but apparently, this popup-window method has been available for games for several weeks now.
