关于javascript：如何使用显示：\\’iframe\\’而不是\\’popup\\’来做FB.ui({方法：\\’auth.login\\’ …)？


How to do FB.ui({ method: 'auth.login' ...) with display: 'iframe' instead of 'popup'?

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 的angular来看，我认为他们感觉不舒服，就像他们不属于应用程序的其余部分一样。让它们通过 JavaScript 显示还需要用户无缘无故地进行一次额外的点击——为了绕过弹出窗口拦截器，用户必须点击登录按钮之类的东西(基本上没有意义，因为到那时应用程序知道它需要显示一个登录按钮，它已经知道用户需要登录并且还可以只显示权限对话框)。

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

在最近的 (2.1.2) JavaScript SDK 源代码和 Facebook 开发者论坛上的各种其他帖子中稍作挖掘似乎表明可以将"display: 'iframe'"作为选项的一部分传递给 FB.ui。

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

"An error occurred with . Please try again later."

(注意：稍后再试会产生相同的结果。)

有什么技巧可以让它工作，还是因为某种原因被禁止？

相关讨论

不再可能(2014 年 7 月)，但您始终可以并且仍然可以创建自己的 iframe，并使用从您的服务器重定向到完整页面 FB 登录的页面填充它。

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

If you are using the URL redirect dialog implementation, then this
will be a full page display, shown within Facebook.com. This display
type is called page.

FB iframe 在提出问题时工作，要么按照 Mustafa 的建议将 display: 'iframe' 与 FB.ui() 一起使用，要么使用 FB.login()(在某些时间点，如果 FB 被正确启动，它默认为"对话"模式，其他时候你也必须显示模式)。

此功能已关闭，很可能是 2014 年初

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

在用户已经登录的情况下使用登录功能获得更多权限有点违反直觉。但它确实有效。

相关讨论

你可以试试这个：

我大约在 6 个月前使用了以下方法。 :)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
    outh dialog



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);
}


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