Question

我正在为一个简单的Facebook应用程序登录。我可以使用JavaScript SDK在弹出窗口中使用FB.login或以下代码成功显示登录/扩展权限对话框：

FB.ui({ method: 'auth.login',
    perms: 'read_stream,publish_stream',
    display: 'popup' },
    function (rsp) {
        fg_log('on login');                             
        if(rsp.session) { 
            if(rsp.perms) {
                fg_log('PERMS: ',rsp.perms);
            } else {
                fg_log('Hmm. No permissions');
            }
        } else {
            fg_log('Hmm. No login');
        }
    }
);

问题是......我不太喜欢弹出窗口。从UI的角度来看，我认为他们感觉不对，就像他们不属于应用程序的其余部分一样。让它们通过JavaScript显示也需要用户无缘无故地点击 - 为了绕过弹出窗口阻止程序，用户必须点击类似登录按钮的东西（基本上没有意义，因为到时候应用知道它需要显示一个登录按钮，它已经知道用户需要登录，并且可能只是出现权限对话框）。

所以，我想，为什么不是iframe呢？没有弹出窗口拦截器的问题，在页面中很好地嵌入，而Facebook似乎很喜欢它们。

最近（2.1.2）JavaScript SDK源代码和Facebook开发人员论坛上的各种其他帖子的一点点挖掘似乎表明可以将“display：'iframe'”作为FB.ui选项的一部分。

但是当我尝试它时，虽然iframe确实出现了，而不是获得权限对话框，我得到：

“发生错误。请稍后再试。”

（注意：稍后再次尝试会产生相同的结果。）

是否有一个技巧可以让它发挥作用，或者出于某种原因它是否被禁止？

Answer 1

尝试使用FB.login而不是FB..ui。如果用户已经登录，并通过FB.login授予您要求的权限，则没有对话框。否则，将显示“内联”，请求额外的权限/登录。

当用户已经登录时，使用登录功能获取更多权限有点违反直觉。但它确实有效。

Answer 2

不再可能（2014年7月），但您始终可以并且仍然可以创建自己的iframe，并将其填入从服务器重定向到整页FB登录的页面。

请参阅https://developers.facebook.com/docs/reference/dialogs/oauth/：

如果您正在使用URL重定向对话框实现，那么这个将是一个完整的页面显示，显示在Facebook.com中。这个显示类型称为页面。

根据Mustafa建议使用display: 'iframe' FB.ui()或使用FB.login()（在某些时间点默认为＆＃39），FB iframe会在问题出现时工作;如果FB被正确插入，则为对话框模式，其他时候你也必须显示模式）。

关闭，很可能是2014年初＆amp;由于点击劫持。从上面链接的参考文献：

如果您使用的是JavaScript SDK，则默认为弹出窗口窗口。您还可以在使用时强制使用弹出窗口或页面类型 JavaScript SDK，如有必要。 iframe和async类型无效出于安全原因，登录对话框。

Answer 3

你可以试试这个：

我大约6个月前使用以下方法。：）

<div>
    <a href="#_" onclick="myOuthDialog();">outh dialog</a>
</div>
<div id="fb-root"></div>
<script>
base_url = 'http/s://path/to/your/site/url';  //Which is set into app setting
myOuthDialog = function(){
    FB.ui({method: 'oauth',
        client_id:'<!--YOUR APP ID-->',
        api_key:'<!--YOUR APP ID-->',
        app_id:'<!--YOUR APP ID-->',
        canvas:'1',
        fbconnect:'1',
        response_type:'code token',
        perms:'email',
        scope:'email',
        redirect_uri:base_url,
        display:'iframe'
    }, myCallback);
}

myCallback = function(data){
    FB.getLoginStatus(function(response) {
      if (response.status === 'connected') {
        document.location = base_url;
        var uid = response.authResponse.userID;
        var accessToken = response.authResponse.accessToken;
      } else if (response.status === 'not_authorized') {
        myOuthDialog();
      } else {
        document.location = base_url;
      }
    }, true);
}
</script>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '<!--YOUR APP ID-->', // App ID
      channelUrl : base_url+'channel.php', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      oauth      : true, // enable OAuth 2.0
      xfbml      : true  // parse XFBML
    });
  };
  (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));
</script>

FB.ui（{method：'auth.login'...）如何用display：'iframe'代替'popup'？

3 个答案: