javascript - How to do FB.ui({ method: 'auth.login' ...) with display: 'iframe' instead of &

admin管理员组

文章数量:1287888

I'm working on a login for a simple Facebook app. I'm able to use the JavaScript SDK to successfully present a login / extended permissions dialog in a popup window with either FB.login or the following code:

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

The problem is... I don't like popup windows much. From a UI standpoint, I think they feel off, like they don't belong to the rest of the app. And getting them to show up via JavaScript also require an extra click from the user for no reason -- in order to get around popup blockers, the user has to click on something like a login button (largely pointless, given that by the time the app knows it needs to display a login button, it already knows the user needs to log in and may as well just present the permissions dialog).

So, I thought, why not an iframe instead? No issues with popup blockers, embedded nicely in the page, and Facebook seems to love 'em.

A little digging in the recent (2.1.2) JavaScript SDK source and various other posts on the Facebook developers forum seems to indicate one can pass "display: 'iframe'" as part of the options to FB.ui.

But when I try it, though the iframe does e up, instead of getting the permissions dialog, I get:

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

(Note: trying again later produces the same results.)

is there a trick to get this to work, or is it forbidden for some reason?

I'm working on a login for a simple Facebook app. I'm able to use the JavaScript SDK to successfully present a login / extended permissions dialog in a popup window with either FB.login or the following code:

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

The problem is... I don't like popup windows much. From a UI standpoint, I think they feel off, like they don't belong to the rest of the app. And getting them to show up via JavaScript also require an extra click from the user for no reason -- in order to get around popup blockers, the user has to click on something like a login button (largely pointless, given that by the time the app knows it needs to display a login button, it already knows the user needs to log in and may as well just present the permissions dialog).

So, I thought, why not an iframe instead? No issues with popup blockers, embedded nicely in the page, and Facebook seems to love 'em.

A little digging in the recent (2.1.2) JavaScript SDK source and various other posts on the Facebook developers forum seems to indicate one can pass "display: 'iframe'" as part of the options to FB.ui.

But when I try it, though the iframe does e up, instead of getting the permissions dialog, I get:

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

(Note: trying again later produces the same results.)

is there a trick to get this to work, or is it forbidden for some reason?

• javascript
• facebook
• facebook-iframe

Share Improve this question Follow asked Nov 30, 2010 at 7:00 Weston CWeston C 3,64222 gold badges2727 silver badges3333 bronze badges 1

• This isn't really an answer... but I've seen varying behavior where Facebook will sometimes show one and sometimes show the other, depending on several things beyond my control. – philfreo Commented Nov 30, 2010 at 8:02

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Try using FB.login instead of FB..ui. If the user is already logged in, and granted the permissions you are asking for via FB.login, then there is no dialog. Otherwise an "inline" one is displayed requesting the extra permissions/login.

It's a little counterintuitive to use a login function to get more permissions when the user is already logged in. But it works.

Not possible anymore (Jul 2014), but you always could and still can create your own iframe and fill it with a page that redirects from your server to a full page FB login.

See https://developers.facebook./docs/reference/dialogs/oauth/ :

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

The FB iframe worked at the time the question was asked by either using display: 'iframe' with FB.ui() as Mustafa suggested or using FB.login() (at some points in time it defaulted to 'dialog' mode if FB was properly inited, other times you had to display mode as well).

This was turned off, most likely early 2014 & due to clickjacking. From the reference linked above:

If you are using the JavaScript SDK, this will default to a popup window. You can also force the popup or page types when using the JavaScript SDK, if necessary. iframe and async types are not valid for the Login Dialog for security reasons.

You can try this:

I use following method approx 6 month ago. :)

<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/en_US/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
   }(document));
</script>

本文标签：