How to show the Extended Permission Dialog in FB using new Graph API?

Question

I used the old rest api for showing the Permission Dialog in Facebook before. Now, with the new graph API, what can I do? (I'm in IFrame Apps).

I know that I can cheat and popup the permission in a seperate window:

FB.login(function(response) {
                  if (response.session) {
                    if (response.perms) {
                      // user is logged in and granted some permissions.
                      // perms is a comma separated list of granted permissions
                    } else {
                      // user is logged in, but did not grant any permissions
                    }
                  } else {
                    // user is not logged in
                  }
                }, {perms:'offline_access'});

like that.. call the FB.login again (let say I want people to click on a different button and trigger the extended permisison dialog)

However,it looks ugly,and it doesn't look like a dialog.

Is there a way to generate the dialog? I try to figure out whether FB.ui can help but there is only little information about that.

In addition, I don't think the 'response' callback ever execute. Neither I click "Don't allow" or "allow", won't trigger any call back. any idea?

hihih..anyone can help me?

Answer 1

Finally. find out the solution from another website. first. after FB.init( ... ); do that:

FB.provide("UIServer.Methods",
    { 'permissions.request' : { size : {width: 575, height: 300}, 
    url: 'connect/uiserver.php',
    transform : FB.UIServer.genericTransform }
    } );

Then, whenever you need to call the permssion dialog, do that:

FB.ui({method: "permissions.request", "perms": 'email,offline_access'}, 
    callBack);

It took me so long to figure out by looking at the FB object and find out there is UIServer with permissions.request then from that, I keep searching and find this solution. and FB.ui talks nothing about it.. and FB.provide is not documented. THANKS facebook.

Answer 2

You don't need to use javascript or any SDK for this although it would make it easier. You need only to redirect the user to a url like this:

https://graph.facebook.com/oauth/authorize?
    client_id=...&
    redirect_uri=http://www.example.com/callback&
    scope=user_photos,user_videos,publish_stream

You should always redirect the user to the top window either with javascript or the link.

window.top.location = <login_url> or <a href=<login_url> target="_top">Login</a>

If you are using the PHP SDK or the C# SDK you could have the sdk generate the url for you, but the process is the same.

Also, not that the redirect_uri has to be on the same domain as your iFrame application's url. This will cause Facebook to redirect your user outside of Facebook to your website, you then should redirect the user back to the app inside of facebook. For example:

1. User clicks login
2. user goes to Facebook login page
3. User clicks allow
4. Facebook redirects the user to http://www.example.com/callback
5. Your app redirects the user to http://apps.facebook.com/myapp/loggedin