BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

练习100天:在移动AIR应用程序中构建社交功能

| 作者 Ryan Stewart 关注 0 他的粉丝 发布于 2011年11月10日. 估计阅读时间: 27 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

目录

需求

预备知识

ActionScript和Flex知识。

需要的其他产品

用户水平

中级

需要的产品

将社交服务和功能(比如Twitter和Facebook)整合到移动应用程序中,可以使你接触更多用户,同时迅速添加个性化特征。它还使您能够访问有关您用户的信息。您可以使用来自Facebook的真实用户姓名向用户祝贺,或者基于他们的兴趣自定义应用程序。与这些功能挂钩还使您能够将应用程序整合到他们的社交渠道中,发布到他们的公告栏或发布非他们的Twitter好友。我在我的应用程序“练习100天”中同时添加了对Facebook和Twitter的支持,希望分享我实现它们的方法,以便您也可以在您的应用程序中使用它们。

添加社交内容时的技巧

我希望与您分享以下技巧:

处理凭据

当添加Facebook和Twitter等社交内容时,您需要处理这些网站的用户名和密码。在几乎所有情况下,这些服务都不允许您仅从您的应用程序传递用户名/密码来验证用户。大部分服务都使用一种称为Oauth的服务的变体,该服务交换令牌,而不是直接交换用户名和密码。

Oauth可能是一个非常深入的主题,但出于本文的用途。我将简短介绍一下它的工作原理。要做的第一件事是向您计划使用的服务(比如Facebook)注册。然后,您将有一系列令牌和密钥,您将它们传递给登录URL,以便该服务可确定您的应用程序是所请求的信息。然后会经历以下过程:

  • 用户使用他们的凭据登录服务的网站。
  • 用户授权应用程序访问他的数据。
  • 服务将用户重定向回拥有访问令牌的应用程序。
  • 应用程序保存访问令牌并代表用户访问服务。

此过程涉及到传递大量具体的URL参数并遵守Oauth的规范。Shannon Hicks为ActionScript开发人员创建了一个,可在此过程中提供很大帮助。我将在Twitter集成一节中更详细地介绍。

使用StageWebView

因为我们的应用程序无法直接登录服务,所以我们使用StageWebView提供直接登录服务的能力。这会阻止用户在我们的应用程序中键入用户名/密码,而直接在网站上键入它。

Facebook集成

Adobe与Facebook合作创建了一个SDK,它专门用于在Flash和Adobe AIR应用程序内使用Facebook Graph API。该SDK可帮助处理该过程的所有步骤,包括登录、询问具体的权限,以及发布到用户的Facebook公告栏。首先,访问Facebook应用程序门户并创建一个新应用程序。Facebook将为您提供一个应用程序ID/API密钥和一个应用程序秘密,您可以使用它们将Facebook与该SDK集成。

设置之后,使用上面的链接下载Facebook ActionScript SDK,并将它添加到您的项目中。

连接到Facebook

对于移动应用程序,您可以使用FacebookMobile类,它提供了用于从移动应用程序验证和访问数据的挂钩。在“练习100天”中,我有一个初始视图供用户用于连接Facebook和Twitter。当加载该视图时,我调用FacebookMobile的init()方法传入我的应用程序ID并附加一个onLogin事件处理函数。

来自Facebook的事件比大部分ActionScript开发人员所习惯的事件更加通用。只有一个事件处理函数,它包含两个对象——success或fail。如果success为空,则表明初始化失败。否则,表明初始化成功。如果初始化调用成功,与用户相关的所有信息作为success对象的一部分返回,

我的“练习100天”中的代码仅仅检查我们是否已连接到Facebook,如果是,我将禁用“Connect to Facebook”按钮并更改该标签。

protected function view1_viewActivateHandler(event: ViewNavigatorEvent): void {
    saveToDatabase(thisProfile);
    FacebookMobile.init("261265497221657", onLogin);
}
private function onLogin(success: Object,fail: Object): void {
    if (success) {
        btnFacebook.label = "Facebook Connected";
        btnFacebook.enabled = false;
    } else {
        trace('facebook error');
    }
} 

登录到Facebook

整个过程最重要的部分是让用户登录。Facebook ActionScript SDK采用的方式是,它创建一个StageWebView实例,该实例具有一个使用应用程序ID构建的特定URL,所以它将该Facebook登录调用与您的应用程序相关联。然后用户使用在SDK中构造的URL直接登录到Facebook。Facebook处理授权过程并提示用户向您的应用程序授权。

在这里,您也可以请求具体的权限。默认情况下,一旦用户向您的应用程序授权,您就可以访问与用户相关的一些基本信息。对于任何提升的权限,比如发布到公告栏,您需要专门请求这些权限。这是使用传递给login()方法的权限数组完成的。这个页面描述了可请求的具体权限。

login()方法也可获取StageWebview实例的一个特定的视口。默认情况下,StageWebview会占据整个屏幕,但如果您出于任何原因(比如显示ActionBar)而需要修改它,可以创建一个具体的视口矩形,FacebookMobile窗口将使用该矩形。

因为init()函数已调用,所以应用程序已注册,您可以继续调用login()函数。Facebook ActionScript SDK将创建正确的登录URL,以便登录页面与应用程序相关联。以下是登录代码:

protected function view1_viewActivateHandler(event: ViewNavigatorEvent): void

{

    facebookWebView = new StageWebView();

    var view: Rectangle = new Rectangle(0, actionBar.height, stage.width, stage.height - 100 - actionBar.height);

    facebookWebView.viewPort = view;

    var permissions: Array = ["publish_stream"];

    FacebookMobile.login(onLogin, this.stage, permissions, facebookWebView);

}

上面的代码首先创建StageWebView,然后创建一个矩形,该矩形考虑了actionBar的高度,所以FacebookLogin不会将它占满。然后我创建了一个权限数组,在本例中,我想要的唯一的提升权限是能够发布到用户的公告栏,我最后使用FacebookMobile类并调用login()方法。登录函数接受一个事件处理函数onLogin,然后是StageWebView实例(也就是舞台)的父对象的引用,最后是我请求的任何提升的权限和一个具体的StageWebView实例。

onLogin方法具有相同的输入,那就是success/fail对象,所以我可以检测登录是否成功。这个登录函数只有在整个过程完成后才会调用,所以用户必须登录到Facebook,然后向应用程序授权。如果它们单击“Allow”按钮,onLogin方法将使用一个success对象触发。如果它们单击“Deny”,那么它将使用fail对象触发。

private function onLogin(success: Object,fail: Object): void {
    if (success) {
        thisProfile.facebookConnected = true;
        thisProfile.facebookAccessToken = success.accessToken;
    } else {
        trace('error logging into Facebook');
    }
    btnContinue.enabled = true;
    btnContinue.label = "FINISHED";
}

如果验证成功,success对象将包含一个accessToken。这个accessToken就是您用于对Facebook API进行经过验证的调用的信息,包括发布到用户的公告栏。在“练习100天”中,我将accessToken存储在一个本地数据库中,以便我可以继续调用Facebook API,而无需用户再次登录。

发布到用户的公告栏

用户验证并授权您的应用程序执行它需要的操作之后,您就可以开始直接调用Facebook API并与内容交互了。SDK中支持完整的图形API,但我将展示的发布到Facebook公告栏。

SDK使用api()方法构造正确的Facebook URL并调用该API。在本例中,我使用/me/feed API来发布到用户的源。以下是您调用的API的完整列表。api()方法还接受一个事件处理函数来处理调用的剩余部分,以及一个params对象。这个params对象使您确保API需要的任何参数(在本例中为公告栏发布的消息对象以及访问令牌)都已包含的地方。

var params: Object = new Object()
params.message = taStatus.text;
params.action_token = thisProfile.facebookAccessToken;
FacebookMobile.api("/me/feed", onPostStatus, params, "POST");

事件处理函数onPostStatus与您目前应该熟悉的监听器属于同一类型。它有两个相同的对象,success和fail,调用的结果就是哪个对象为空。

Twitter集成

有许多用于ActionScript的第三方Twitter库,但因为Twitter仅适用标准的OAuth协议,所以Shannon创建的oauth-as3库的使用最简单。它可以完美地运行,可应用于使用OAuth的任何网站。

登录到Twitter

取决于您使用移动/桌面应用程序还是Web应用程序,Twitter验证可采用一些不同的形式。我使用的解决方案不一定是最完美的,但我感觉它是最符合OAuth协议的方式,同时也是一种不错的用户体验。在这个示例中,我使用Twitter基于PIN的验证,创建一个StageWebView窗口来登录并处理授权。然后用户将PIN键入到StageWebView上的一个TextInput框中,对Twitter进行一次API调用来获得一个可用于执行操作的accessToken。

当您在Twitter开发网站上设置一个Twitter应用程序时,您会获得一系列API URL和密钥,在验证过程中需要使用它们。我在我的代码中将它们设置为静态变量:

private var consumerKey:String = ""; private var consumerSecret:String = ""; private var twitterRequestURL:String = "https://api.twitter.com/oauth/request_token"; private var twitterAuthURL:String = "https://api.twitter.com/oauth/authorize"; private var twitterTokenURL:String = "https://api.twitter.com/oauth/access_token"; private var requestToken:OAuthToken; 

然后使用这些变量,您可以使用oauth-as3 API生成一个OauthConsumer,它将为您提供一个可供用户用于登录的用户令牌。设置用户也就是使用从Twitter指定的consumerKey和consumerSecret创建一个OauthConsumer实例。然后您可以使用一个请求加载器构建请求并调用它。

consumer = new OAuthConsumer(consumerKey,consumerSecret);
var oauth:OAuthRequest = new OAuthRequest(OAuthRequest.HTTP_MEHTOD_GET,twitterRequestURL,null,consumer);
var request:URLRequest = new URLRequest(oauth.buildRequest(new OAuthSignatureMethod_HMAC_SHA1()));
var loader:URLLoader = new URLLoader(request);
loader.addEventListener(Event.COMPLETE,onLoaderComplete);

如果调用成功,返回对象包含构建requestToken所需的信息。使用该requestToken,应用程序可构建一个授权请求,它将用户转到Twitter.com并要求它们登录。当它们登录时,它们将被提示向应用程序授权,然后将显示PIN编号。

protected function onLoaderComplete(event: Event): void {
    requestToken = OAuthUtil.getTokenFromResponse(event.currentTarget.data);
    var authRequest: URLRequest = new URLRequest('http://api.twitter.com/oauth/authorize?oauth_token=' + requestToken.key);

    twitterWebView = new StageWebView();
    twitterWebView.viewPort = new Rectangle(0, baseHeight, stage.width, stage.height - baseHeight);
    twitterWebView.stage = this.stage;
    twitterWebView.assignFocus();
    twitterWebView.loadURL(authRequest.url);
}

在这个函数中,我设置将显示Twitter网站的StageWebView。使用requestToken,我构建用于授权的URL,并将该URL加载到StageWebView实例中。

现在,验证过程无需我们负责了。用户将通过Twitter网站上的步骤授权应用程序访问它们的数据,当该过程完成时,Twitter.com将显示一个PIN编号。用户必须将该PIN键入到应用程序中,然后应用程序使用该PIN调用Twitter,以显示用户已授权它。

var params:Object = new Object();
params.oauth_verifier = tiPinNumber.text;

accessRequest = new OAuthRequest(OAuthRequest.HTTP_MEHTOD_GET,twitterTokenURL,params,consumer,requestToken);
var accessUrlRequest:URLRequest = new URLRequest(accessRequest.buildRequest(new OAuthSignatureMethod_HMAC_SHA1()));
var accessLoader:URLLoader = new URLLoader(accessUrlRequest);
accessLoader.addEventListener(Event.COMPLETE,onAccessRequestComplete);

我使用来自一个TextInput框(用户在其中键入PIN)的文本值创建了一个params对象。然后,我使用该params对象、用户信息和请求令牌调用twitterTokenURL。如果调用成功,Twitter将为我们提供一个访问令牌,我们可以存储它并在后续API调用中使用它访问Twitter。

protected function onAccessRequestComplete(event: Event): void {
    accessToken = OAuthUtil.getTokenFromResponse(event.currentTarget.data);
    thisProfile.twitterAccessKey = accessToken.key;
    thisProfile.twitterAccessSecret = accessToken.secret;
}

在“练习100天”中,我将访问密钥和访问秘密存储在数据库中,所以我随时可以在应用程序中使用它。下一步是使用这些信息向用户的Twitter渠道发布应用程序。

发布到Twitter

发布到Twitter的过程需要构建一个用户(提供我们的应用程序特定的信息)和一个访问令牌(使用来自上面的调用的访问密钥和访问秘密),然后使用该信息创建一个OAuthRequest。在该OAuthRequest内,您还需要传入状态更新文本。

params.status = taStatus.text;
var consumer:OAuthConsumer = new OAuthConsumer(consumerKey,consumerSecret);
var token:OAuthToken = new OAuthToken(thisProfile.twitterAccessKey,thisProfile.twitterAccessSecret);
var postRequest:OAuthRequest = new OAuthRequest(OAuthRequest.HTTP_MEHTOD_POST,twitterPostUrl,{status:taStatus.text},consumer,token);

var urlRequest:URLRequest = new URLRequest(postRequest.buildRequest(new OAuthSignatureMethod_HMAC_SHA1()));
urlRequest.method = URLRequestMethod.POST;

urlRequest.url = urlRequest.url.replace("&status=" + URLEncoding.encode(params.status),"");
urlRequest.data = new URLVariables( "status=" + taStatus.text );

var loader:URLLoader = new URLLoader(urlRequest);
loader.addEventListener(Event.COMPLETE,onTwitterPostComplete);
loader.addEventListener(IOErrorEvent.IO_ERROR,onTwitterIOError);
loader.addEventListener(HTTPStatusEvent.HTTP_STATUS,onTwitterHttpStatus);

上面的代码中包含大量信息,但首先是设置OAuth调用。为了使该调用生效,您必须将状态变量添加到一个URLVariables对象中,所以我剥离出URL加密的状态,然后作为一个URLVariable附加到URLRequest的数据对象。

延伸阅读

现在您应该掌握了如何将Facebook和Twitter功能集成到您的移动应用程序中。验证工作流可能稍微有点复杂,但借助Facebook,该SDK抽象了它的大部分内容,oauth-as3库会负责Twitter的主要工作。

以下是一些有用的链接:

clip_image004+clip_image005

本作品依据Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License授权。与本作品中包含的示例相关,但超出本许可的权限可在Adobe上找到。

查看原文:100 Days of Exercise: Building social features into mobile AIR apps

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT