适用于移动网络的 Facebook Oauth答案

【问题标题】：Facebook Oauth for mobile web适用于移动网络的 Facebook Oauth
【发布时间】：2010-09-30 21:21:01
【问题描述】：

我在弄清楚如何为移动 Web 应用程序实施 Facebook Oauth 时遇到了很多麻烦。我想使用他们开发者网站上以下代码示例中“显示”参数中指示的“触摸”界面。有没有人有使用此代码的经验？我似乎无法让它在 Javascript 中工作。还有其他方法可以让我的用户看到启用触摸的登录界面吗？

这是我所指的文档：http://developers.facebook.com/docs/guides/mobile/

【问题讨论】：

标签： facebook oauth

【解决方案1】：

是的，有一种方法可以让您的移动浏览器用户看到支持触摸的登录界面。您需要使用oauth 方法，而不是使用 FB SDK，如下所述：

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

我正在使用“服务器端流程”来完成您正在尝试做的事情，它似乎工作得很好。

首先，您重定向到 FB oauth 页面，将您的应用 ID 和登录页面作为回调传递（注意：landing_page 必须格式化为目录，不能是文档！）。如果需要，请使用 state 传入 display=touch 和可选应用数据。

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

用户成功登录后，您的用户将被重定向到带有GET 变量code 的landing_page。如果您需要查询 Open Graph API 以获取类似这样的用户信息（在 PHP 中），您可以使用此 code 获取 access_token：

$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'];

【讨论】：

【解决方案2】：

我认为基本问题是 /oauth/authorize 和 /oauth/access_token 从不设置所有 FB.Events 订阅的名为 fbs_APP_ID 的 cookie。 “JavaScript API 将登录用户的详细信息保存在名为 fbs_APP_ID 的签名 cookie 中”：这只发生在使用标准 fb:login-button 等时。有人知道如何使用 /oauth 设置 cookie fbs_APP_ID 吗？

【讨论】：

【解决方案3】：

您不能使用 Facebook 对话框登录用户，这是 Facebook 的一项安全措施。大多数移动浏览器都阻止使用弹出窗口。

您可以做的是将用户定向到http://m.facebook.com/dialog/oauth/?scope=read_stream,publish_stream,offline_access,email&client_id=YOURAPP ID&redirect_uri='+ window.location + '&response_type=token';

这会将用户定向到 m.facebook.com 以通过 facebook 移动登录，并将用户重定向回 redirect_uri，在这种情况下，我使用 javascript window.location 来获取我当前所在页面的 url。它将传回用户信息和一个令牌，该令牌将由 facebook javascript SDK 访问。

然后，您可以提示 FB.ui 之类的 facebook javascript SDK 进行其他触摸操作，例如发布到墙上，这在对话框中看起来非常棒。

但是我会告诉你，我必须在我的服务器上托管 facebook all.js 文件，并手动将宽度从 575px 更改为 290px 以适应手机屏幕。

【讨论】：