CODEWITHSUNDEEP
facebookoauth
Sachin
Sachin

Reputation: 2697

Facebook Oauth for mobile web

I am having a lot of trouble figuring out how to implement Facebook Oauth for mobile web applications. I would like to use the "touch" interface as indicated in the "display" parameter in the following code example on their developer website. Does anyone have experience using this code? I can't seem to get it working in Javascript. Are there other ways of using getting my users to see the touch enable login interface?

Here is the documentation that I am referring to: http://developers.facebook.com/docs/guides/mobile/

Upvotes: 3

Views: 8964

Answers (3)

Michael Phillips
Michael Phillips

Reputation: 156

Yes, there is a way to enable your mobile browser users to see the touch-enabled login interface. Instead of using the FB SDK, you need need to use the oauth method as described here:

http://developers.facebook.com/docs/authentication/

I'm using the 'Server Side Flow' to do exactly what you're trying to do and it seems to work great.

First you redirect to the FB oauth page, passing your app ID and your landing page as a callback (NOTE: landing_page MUST be formatted as a directory and cannot be a document!). Pass in display=touch and optional app data if you need it using state.

document.location='http://www.facebook.com/dialog/oauth?client_id=' + appid + 
    '&redirect_uri=http://' + landing_page + '/&display=touch&state=' + 
     optional_app_data;

After the user logs in successfully, your user will be redirected to landing_page with a GET variable of code. You can use this code to get an access_token if you need to query the Open Graph API for user info like this (in PHP):

$response = file_get_contents("https://graph.facebook.com/oauth/access_token?"
    ."client_id=FACEBOOK_ID."&redirect_uri=http://". landing_page
    ."/oauth/&client_secret=".FB_APPSECRET."&code=$authcode"); 

parse_str($response, $params);

$graph_url = "https://graph.facebook.com/me?access_token=".$params['access_token'];

Upvotes: 5

Corey Snyder
Corey Snyder

Reputation: 21

You can not login a user using the Facebook dialogs, it is a security measure from facebook. And using popups is blocked by most mobile browsers.

What you can do is direct the user to http://m.facebook.com/dialog/oauth/?scope=read_stream,publish_stream,offline_access,email&client_id=YOUR APP ID&redirect_uri='+ window.location + '&response_type=token';

This will direct the user to m.facebook.com to log in via facebook mobile, and redirect the user back to the redirect_uri, in this case i use javascript window.location to get the url of the page im currently on. It will pass back the user info and a token that will be accessed by facebook javascript SDK.

You can then prompt facebook javascript SDK like FB.ui for other touch actions like post to wall, which looks really sweet in a dialog.

However I will tell you that I had to host the facebook all.js file on my servers and manually change the width from 575px to 290px to fit the screen of the mobile phone.

Upvotes: 1

huge
huge

Reputation: 11

I think the basic problem is that the /oauth/authorize and /oauth/access_token never sets the cookie named fbs_APP_ID which all the FB.Events subscribe to. "The JavaScript API saves the details for the logged in user in a signed cookie named fbs_APP_ID":This only happens using the standard fb:login-button, etc. Anyone know how to set the cookie fbs_APP_ID using /oauth ?

Upvotes: 1

Related Questions