发布在即!企业 AIGC 应用程度测评,3 步定制专属评估报告。抢首批测评权益>>> 了解详情
写点什么

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

  • 2011-11-09
  • 本文字数:6199 字

    阅读完需:约 20 分钟

目录

需求

预备知识

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 = "<your consumer="" key="">"; private var consumerSecret:String = "<your consumer="" secret="">"; 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; </your></your>

然后使用这些变量,您可以使用 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

2011-11-09 05:53861

评论

发布
暂无评论
发现更多内容

ESP32-C3入门教程 网络 篇(三、 MQTT 协议基础介绍及测试)

矜辰所致

mqtt ESP32-C3 9月月更

java培训学习应该注意什么?

小谷哥

前端线下培训学习适合哪些人群

小谷哥

100 行代码在微信公众号里集成地图搜索功能

Jerry Wang

html 微信 web开发 微信开发 9月月更

阿里云EMAS|App隐私合规“免费”自动化检测

移动研发平台EMAS

阿里云 移动测试 隐私合规 移动研发 App检测

轻量级工作流引擎的设计与实现

京东科技开发者

工作流 流程 工作流引擎 迭代 轻量级工作流引擎

IDC:云效产品能力No.1,领跑中国DevOps市场

阿里云云效

DevOps 数字化 产品研发 DevOps工具链

测试面试题集锦(四)| Linux 与 Python 编程篇(附答案)

霍格沃兹测试开发学社

隐私计算唯一代表厂商!洞见科技入选《爱分析·数据智能厂商全景报告》

洞见科技

阿里顶配版 Spring 全家桶高级笔记+学习路线图+硬核资料库,跪着啃完了。。。

Geek_0c76c3

Java 数据库 开源 程序员 架构

LP单双币双池挖矿dapp系统开发技术详情

开发微hkkf5566

深圳大数据培训哪家教的好

小谷哥

开发者有话说|我的前端开发感悟

国服第二切图仔

个人成长 程序人生

web前端培训机构怎么选择比较好呢

小谷哥

交付有价值的产品,先澄清用户故事吧!

敏捷开发

产品 项目管理 敏捷开发 软件开发 用户故事

大数据开发培训周期和方法

小谷哥

HMS Core上新啦!

HMS Core

HMS Core

如何通过C#/VB.NET代码将Excel工作表拆分为单独的文件

在下毛毛雨

C# .net Excel 拆分

基于 Apache Hudi 极致查询优化的探索实践

华为云开发者联盟

大数据 后端 华为云 企业号九月金秋榜

Flowable 流程部署与删除

江南一点雨

Java springboot flowable

一台“厉害”的打印机

华为云开发者联盟

云计算 后端 物联网 企业号九月金秋榜

牛客网扫地僧开源出来的《Java面试无敌流笔记》,Github上线两天就爆火

Geek_0c76c3

Java 数据库 开源 程序员 架构

开发者有话说|我的前端开发感悟

国服第二切图仔

个人成长

谷歌也开始裁员!谷歌CEO说出理由让人惊叹

雨果

裁员 谷歌 互联网裁员

Java面试题大全(整理版)1000+面试题附答案详解最全面看完稳了

钟奕礼

Java 面试 java; Java 面试题

Demo Day直播 | 成长计划解决方案学生挑战赛一等奖即将揭晓!

OpenHarmony开发者

Open Harmony

从0到1带你搭建一个vue3.0项目(vue-cli脚手架版)

国服第二切图仔

前端 vue3.0 9月月更

美团 3 面 (Java 后台):NIO+BIO+Zookeeper+ 线程池 +Redis+kafka

钟奕礼

Java 面试 java;

幂等设计详解

京东科技开发者

数据库 系统架构 幂等 研发 幂等设计

HUE部署

峥岳

hue 安装部署 9月月更

一文带你全面了解什么是颠覆时代的Web3.0未来互联网

echeverra

Web3.0

练习100天:在移动AIR应用程序中构建社交功能_Meta_Ryan Stewart_InfoQ精选文章