Javascript 如何在FB.ui（{method:'；auth.login'；…）中显示：'；iframe'；而不是'；弹出窗口'；？

我正在为一个简单的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');
        }
    }
);

问题是…我不太喜欢弹出窗口。从用户界面的角度来看，我认为它们感觉不舒服，好像它们不属于应用程序的其他部分。要通过JavaScript显示它们，还需要用户无缘无故地进行额外的点击——为了避开弹出窗口拦截器，用户必须点击登录按钮之类的东西（考虑到当应用程序知道需要显示登录按钮时，它已经知道用户需要登录，并且可能只显示权限对话框，这在很大程度上是没有意义的）

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

在最近（2.1.2）的JavaScript SDK源代码和Facebook开发者论坛上的各种其他帖子中，稍微挖掘一下，似乎可以将“display:'iframe'”作为选项的一部分传递给FB.ui

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

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

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

---

有什么办法可以让它发挥作用，还是因为某些原因而被禁止？

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

当用户已经登录时，使用登录功能获得更多权限有点违反直觉。但它可以工作。

您可以尝试以下方法：

大约6个月前，我使用了以下方法：

base_url='http/s://path/to/your/site/url'；//设置为应用程序设置
MyAuthDialog=函数（）{
ui（{method:'oauth'，
客户端id:“”，
api_密钥：“”，
应用程序id:“”，
画布：'1'，
fbconnect:“1”，
响应类型：'code token'，
perms:“电子邮件”，
范围：'电子邮件'，
重定向\u uri:base\u url，
显示：'iframe'
}，myCallback）；
}
myCallback=函数（数据）{
FB.getLoginStatus（函数（响应）{
如果（response.status===“已连接”）{
document.location=base\u url；
var uid=response.authResponse.userID；
var accessToken=response.authResponse.accessToken；
}else if（response.status===“未授权”）{
MyAuthDialog（）；
}否则{
document.location=base\u url；
}
}，对）；
}
window.fbAsyninit=函数（）{
FB.init({
appId:“”，//应用ID
channelUrl:base_url+'channel.php'，//通道文件
状态：true，//检查登录状态
cookie:true，//启用cookie以允许服务器访问会话
oauth:true，//启用oauth 2.0
xfbml:true//解析xfbml
});
};
（职能（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）；
}（文件）；

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

见：

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

FB iframe在提出问题时可以按照Mustafa的建议使用

display:“iframe”

和

FB.ui（）

，或者使用

FB.login（）

（在某些时间点，如果FB被正确初始化，它默认为“dialog”模式，其他时间你也必须显示模式）

这很可能在2014年初被关闭，原因是点击劫持。从上面链接的参考中：

如果您使用的是JavaScript SDK，则默认为弹出窗口 窗口。您还可以在使用 JavaScript SDK，如有必要。iframe和async类型对于 出于安全原因，登录对话框将关闭

---

这并不是一个真正的答案…但我已经看到了各种各样的行为，Facebook有时会显示一个，有时会显示另一个，这取决于一些我无法控制的事情。这有一个问题-在页面选项卡上，它不会是“内联”的；它将是一个弹出窗口，可能会被阻止。不再是了。随着FB api的最新更新，FB.login也将出现在标签行。

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