Facebook javascript SDK FB.login is not working in Facebook iFrame

Question

We are using Facebook JavaScript SDK to authenticate our Facebook application. The application is configured with the Canvas URL as http://facebook.elgifto.com/Home/Index/. 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 = "//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 above code is not working in the Facebook when accessed as http://apps.facebook.com/giftguru. However we are able to access it through http://facebook.elgifto.com/Home/Index

Answer 1

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:

1. Page on http://facebook.elgifto.com/Home/Index is using Application #316853928368079 (this app and have no namespace!)
2. Your URL for OAuth Dialog have ' (apostrophe) around client_id which is wrong!
3. OAuth Dialog isn't working (probably also due to app settings, App Domain?)
4. Application located on http://apps.facebook.com/giftguru is Application #83808922524 and have wrong Canvas URL! Proof: