Facebook javascript SDK FB.login not working on Facebook iFrame

We use the Facebook JavaScript SDK to authenticate our Facebook application. The application is configured with the Canvas URL as http://facebook.elgifto.com/Home/Index/ . Below is the code we use 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 = "//connect.facebook.net/en_US/all.js"; 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 code above does not work on Facebook when accessing http://apps.facebook.com/giftguru . However, we can access it through http://facebook.elgifto.com/Home/Index

+6
source share
4 answers

The problem is with the browser blocking pop-ups. (the fact that you work outside of Facebook is probably because you are allowed to do this sometimes earlier, it is blocked for me, as well as in the application).

You should not call FB.login without user interaction (for example, a click or form submit element) so that the browser does not block the login window.

Update:
You mix a lot of things here:

  • The page at http://facebook.elgifto.com/Home/Index uses Application # 316853928368079 (this application does not have a namespace !)
  • Your OAuth dialog url has a ' (apostrophe) near client_id , which is wrong!
  • The OAuth dialog does not work (perhaps also due to the settings of the application, the application domain?)
  • Application located at http://apps.facebook.com/giftguru , Application # 83808922524 and has an invalid canvas URL! Proof :
    Facebook App Canvas wrapper
+5
source

Hope this helps you.

  <body> <div id="fb-root"></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 = "//connect.facebook.net/en_US/all.js"; 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> 
+5
source

Also check if your application on deveopers.facebook.com is in sandbox mode. I had a problem with a file that worked perfectly with my main account (which was the application administrator), but not with other facebook accounts. Later I realized that the fb application was still in sandbox mode, and I had to add every account that was tested as a tester or developer, or disable sandbox mode.

Maybe this will help someone, I spent an hour before sorting it out. :)

+2
source

Facebook has suddenly switched from using its Facebook dialog method to display an authentication window for old-fashioned pop-ups today. So far, pop-ups have only been used when launching applications outside of Facebook's tab / canvas. This means that you can no longer run FB.login on boot and use the click event instead to avoid pop-up blocking.

The only Facebook documentation we found on this is at https://developers.facebook.com/docs/concepts/login/permissions-login-dialog/ , but apparently this popup method was available for games in a few weeks.

+1
source

Source: https://habr.com/ru/post/911394/


All Articles