Facebook javascript SDK FB.login无法在Facebook iFrame中运行

时间:2012-03-22 10:23:31

标签: javascript facebook facebook-javascript-sdk facebook-authentication

我们正在使用Facebook JavaScript SDK来验证我们的Facebook应用程序。该应用程序使用Canvas URL配置为http://facebook.elgifto.com/Home/Index/。以下是我们用于验证Facebook用户的代码。

    <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>

上述代码在http://apps.facebook.com/giftguru访问时无法在Facebook中运行。但是,我们可以通过http://facebook.elgifto.com/Home/Index

访问它

4 个答案:

答案 0 :(得分:5)

该问题与浏览器弹出窗口阻止有关。 (在Facebook之外为你工作的事实可能是因为你有时会被允许这样做,对我而言,它被阻止以及在应用程序内)。

如果没有用户的互动(例如元素FB.login或表单click),就不应该调用submit,以确保浏览器不会阻止登录窗口。

<强>更新
你在这里混合了许多东西:

  1. http://facebook.elgifto.com/Home/Index上的网页正在使用Application #316853928368079(此应用并且没有namespace!)
  2. 您的OAuth对话框的网址'周围有client_id(撇号),这是错误的!
  3. OAuth对话框无效(可能也是由于应用设置, App Domain ?)
  4. 位于http://apps.facebook.com/giftguru的应用程序是Application #83808922524,并且有错误的Canvas URL!的证明
    Facebook App Canvas wrapper

答案 1 :(得分:3)

我希望这对你有所帮助

  <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>

答案 2 :(得分:2)

另请检查deveopers.facebook.com上的应用是否未处于沙盒模式。我有一个问题登录与我的主帐户(这是应用程序管理员)工作正常,但不与其他Facebook帐户。后来我意识到fb app仍处于沙盒模式,我不得不添加每个正在测试Tester或Developer的帐户或禁用沙盒模式。

也许这会对某人有所帮助,我花了一个小时才搞清楚。 :)

答案 3 :(得分:1)

Facebook突然从使用他们的Facebook对话框方法切换到今天的老式弹出窗口显示身份验证窗口。到目前为止,只有在Facebook标签/画布外运行应用程序时才会使用弹出窗口。这意味着您无法再在加载时运行FB.login并使用click事件来避免弹出窗口阻止程序。

我们在Facebook上发现的唯一文档是https://developers.facebook.com/docs/concepts/login/permissions-login-dialog/,但显然,这种弹出窗口方法已经可用于游戏几周了。