也迎接任何朋友

李秉骏:在Phonegap下实现oAuth认证

2012/07/18 · HTML5 · 2
评论 · 来源:
李秉骏     ·
HTML5

正文由李秉骏(@CashLee李秉骏)投稿于伯乐在线,也招待任何朋友投稿。提醒:投稿时记念留下网易账号哦 图片 1

如今做过四遍关于Phonegap的当场调换会议分享。基本上把Phonegap的有的特征和大家调换了一下,大家对此Phonegap的
兴趣也是不行多的。不过因为Phonegap绝对于原生应用来说,唯有一个View,这几个View正是贰个Web的容器,这使得Phonegap就存在非常多限制。当中一部分的界定我们早就因而HTML5的API以及Phonegap为大家搭建的桥去完毕了,此外一些我们就得经过Phonegap
plugins来贯彻,而其实本人个人以为Phonegap最有力的地方也在于有那么大的三个群众体育在为他提供各种各样的Plugins,以便去应对实在项
目中遇见的难点。

本身回想在和豪门调换的时候我们常常会问Phonegap如何是好地点的缓存啊(WebSQL),如何近乎原生应用(这些关系到框架结构,分界面渲染难题,这
里小编也糟糕深远讲,毕竟不是本文要讨论的剧情),还会有二个相当高烧的难点正是一旦要做三个开放平台的接纳,怎么着兑现oAuth认证。在此以前本人也遭受过类似的一
些情形,当本人再一次相遇那个老灾难的标题标时候,笔者信任一定也是有Phonegap的观者蒙受类似的情景的。于是本人就总括下来何我们斟酌一下怎样消除那么些题材吧。

率先指标:消除oAuth认证。

创建铺排:1.
知道oAuth原理;2.精通Phonegap在拍卖这一个标题时候的运营机制;3.
制订安排落实代码。

上边大家就来一步一步地深入分析,看怎样减轻这几个状态吗。(因为本身在类型中遇见的是Tencent微博开放平台的oAuth认证,那么上面作者就用TencentoAuth认证为例吧)

至于oAuth认证,相信做过开放平台应用的冤家都早已充足熟谙了,假若你还尚未做过还是对于oAuth认证流程特别不打听,那么自己建议您先理解一
下原理,在此间自身不愿意花太多的篇幅去介绍那些事物,因为在多数地点都能够找到,下边作者推荐多少个地点方便大家去读书,一定要读书,这会对您驾驭上面包车型客车篇章
有中度的佑助的。

Tencent腾讯网开放平台:

天涯论坛博客园开放平台:

自然在此间上面须要解说表明的是oAuth认证机制是五个通用的招数,不过因为种种开放平台有投机的政策,因而可能在里头稍有转移,而且最终赢得的权柄也会各分歧。而最近天涯论坛网易实在太多坑爹的政工了,实在忍受不住,于是自身转战到Tencent的阳台了。

好的,假若您看完了oAuth认证的流水生产线,就直接到那边来。无人不晓,在oAuth认证的流水生产线中,有一个授权页面,而以此授权页面是通过开放平台提供的,具体的样式见下图:

图片 2

这几个页面用于输入开放平台的帐户以及密码,通过授权获取响应的openid以及openkey,最后换取access-token(待会作者会结合Tencent新浪oAuth认证流程的性状,以及代码和豪门深入分析的)。

本条页面是弹出的,如果在Phonegap里面做的话会很想得到:1,因为属于弹窗,在Phonegap中本人正是贰个WebView假设你还弹的话
就能够飞到了Safari的浏览器中,那就跳出应用本身,跳出来认证还应该有戏呢?2,通过iFrame,首先体验十三分倒霉,其次iFrame自身又属于跨域的
难点,那就不佳消除了(为何体验不好吧,首若是因为授权页面包车型大巴体裁是不牢固的,类似腾讯果壳网开放平台,就比果壳网的授权页面做得差,根本不和手提式有线电话机包容的,
而且有个别做得好的,认证页宽度正是320px,就占了您全体应用的版面,体验很不好)那么Phonegap中该怎么着落到实处啊?

带着主题材料,大家就梦想在Phonegap中再一次引进二个WebView。刚刚提到Phonegap的兵不血刃还在于很多人以及官方的集体,为其提供了一
套很好的插件机制,以消除五颜六色的急需。在Phonegap中有叁个插件叫做ChildBrowser,循名责实正是:子浏览器。(其实自个儿在上五遍的
Phonegap专项论题技巧分享中以及聊起到让大家用那么些事物去消除,可是当下分享时间有限只好够草率带过,抱歉)子浏览器的效果其实就是令你在
Phonegap应用内部调起三个浏览器的View,让您举行pdf,图片,录制,以致网页阅读的工具。(实际上你看作者上边的截图,就是用
ChildBrowser来达成的)那就好了,那就能够令你调起浏览器而且不跳出应用自身了,能够很好地消除oAuth认证的主题素材。
ChildBrowser下载地址:

在地点上面,你应当早已看到ChildBrowser的设置情势以及选择方法了,特别简单,真正的即插即用。假让你感觉英文太难,那作者就帮不了你
了,你就活动Google翻译一下啊。相信您火速就能够做出三个ChildBrowser的德姆o的。在这几个地方下边,其实你回去上一层目录,其实您也
已经观看丰富多彩的Phonegap
Plugins,通过那几个东西,你还可以够调用起手机内部更加多有趣的财富的!这些就要靠你和煦去开采啦!(别的平台的运用也会有相应的插件的Android开采者不要骂果粉哦!)

好了逐月地我们就要涉及到代码部分了。首先大家看看调用ChildBrowser的Javascript代码:

JavaScript

cb = window.plugins.childBrowser; /* if(cb != null) {
cb.onLocationChange = function(loc){ root.locChanged(loc);
};//地址爆发改动时候执行的函数 cb.onClose =
function(){root.onCloseBrowser(); };//通过js关闭ChildBrowser的主意
cb.onOpenExternal = function(){root.onOpenExternal(); }; */
cb.showWebPage(“”);

1
2
3
4
5
6
7
8
        cb = window.plugins.childBrowser;
/*
        if(cb != null) {
        cb.onLocationChange = function(loc){ root.locChanged(loc); };//地址发生改变时候执行的函数
        cb.onClose = function(){root.onCloseBrowser(); };//通过js关闭ChildBrowser的办法
        cb.onOpenExternal = function(){root.onOpenExternal(); };
*/
        cb.showWebPage("http://google.com");

内部cb就是开始化的ChildBrowser,而showWebPage正是调起这几个页面包车型客车艺术。可知代码中要开辟的网站正是Google.com啦,这么些地球人都能够看得懂了。于是大家就足以立即想到大家要用ChildBrowser展开的网站是大家在英特网钦定的选用授权站点
了。而本身是布局在SAE上面的,所以上面的例证也用PHP来说吧,期待语言也是一律的道理,转义就足以了。在说代码以前,大家先来讲说现实通信的流程,以
及大家接下去要到达的靶子。

图片 3
在此间,我们的手提式有线电话机端是由此走访SAE服务器,由SAE服务器管理数据并与Tencent今日头条开放平台通信的,这里手提式有线电话机端并不曾直接和Tencent天涯论坛开放平台通信(作者那样
处理的由来是1,方便在服务器端处理帐户,那样的话可以洞察本身的利用的帐户情状;2,服务器端完结推送机制,方便管理token以及做api;3,服务
器端还足以和任何开放平台帐户绑定)。因而,大家的百分百认证方案会在劳务器端完成。

而故事Tencent和讯开放平台,大家首先会在开放平台下边注册自身的应用,注册的流水生产线以及艺术自身不说了,注册的地点是:,注册你的应用后,你对号入座能够获取的东西是:

JavaScript

动用名称:mobile_test_api 应用类型:客户端应用 App Key:88888888 App
Secret:ainidenideiienfeomeomroemrome

1
2
3
4
应用名称:mobile_test_api
应用类型:客户端应用
App Key:88888888
App Secret:ainidenideiienfeomeomroemrome

在这里笔者的App key以及App
Secret是假的(你懂的,你应有有你协和的),下边咱们就应用Tencent提供给我们的PHP
SDK,下载地址:。有了SDK后大家就足以把SDK放到自身的情形方面,然后配置服务器端的代码了。下图是本身大致陈设的服务端的代码,lib下存放的正是Tencent腾讯网的sdk。当然实际生育情形和那几个有例外。这里仅仅作为示范使用:

图片 4

上面就依靠Tencent博客园表达的流水生产线,逐个批注一下这么些文件以及中间的代码吧。

index.php

PHP

<?php require_once ‘app_config.php’;
$url=”
header(‘Location:’.$url);

1
2
3
4
5
6
<?php
require_once ‘app_config.php’;
 
$url="https://open.t.qq.com/cgi-bin/oauth2/authorize?client_id=".$client_id."&APP_KEY=".$app_key."&wap=2&response_type=code&redirect_uri=http://yoururl.com/get_auth.php";//指定URL地址
 
header(‘Location:’.$url);

此处引进的app_config.php

PHP

<?php $client_id = ‘8888888888’; $app_key =
‘anienineiienrieireowq2839289’;

1
2
3
4
5
<?php
 
$client_id = ‘8888888888’;
 
$app_key = ‘anienineiienrieireowq2839289’;

因为根据Tencent新浪开放平台,大家率先步要得到的是Code,如下所述,大家要做的正是搞活布署,获取那几个Code

JavaScript

首先步:央求code 诉求方法: GET 伏乞地址:

再次回到结果:
固然授权成功,授权服务器会将用户的浏览珍视定向到redirect_uri,并带上code,openid和openkey等参数,重定向的url如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
第一步:请求code
 
请求方法:
GET
 
请求地址:
 
https://open.t.qq.com/cgi-bin/oauth2/authorize?client_id=APP_KEY&response_type=code&redirect_uri=http://www.myurl.com/example
 
返回结果:
如果授权成功,授权服务器会将用户的浏览器重定向到redirect_uri,并带上code,openid和openkey等参数,重定向的url如下:
 
http://www.myurl.com/example?code=CODE&openid=OPENID&openkey=OPENKEY

实际须求乞请附带的参数,必须要遵照oAuth2.0鉴权的页面提醒的开始展览。()

然后大家再来看看大家所铺排的文书:

get_auth.php

PHP

<?php require_once ‘app_config.php’; $code = $_REQUEST[‘code’];
$openid = $_REQUEST[‘openid’]; $openkey = $_REQUEST[‘openkey’];
$url =
“”;
$message = file_get_contents($url); /* success to print the access
token message *也迎接任何朋友。/ $access = explode(“=”,$message); print_r(“<br
/>”); $access_message = explode(“&”,$access[1]); $access_token =
$access_message[也迎接任何朋友。0]; $user_name = $access[4];
print_r($access_token .” ” . $user_name);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
 
require_once ‘app_config.php’;
 
$code = $_REQUEST[‘code’];
 
$openid = $_REQUEST[‘openid’];
 
$openkey = $_REQUEST[‘openkey’];
 
$url = "https://open.t.qq.com/cgi-bin/oauth2/access_token?client_id=".$client_id."&client_secret=".$app_key."&grant_type=authorization_code&code=".$code."&redirect_uri=http://yoururl.com/get_auth.php";
 
$message = file_get_contents($url);
 
/* success to print the access token message */
 
$access = explode("=",$message);
 
print_r("<br />");
 
$access_message = explode("&",$access[1]);
 
$access_token = $access_message[0];
 
$user_name = $access[4];
 
print_r($access_token ."   " . $user_name);

事实上到上述结束,我们的配备文件已经弄好了。在那么些布局文件中,实际上大家要做的便是Tencent新浪开放平高雄聊起的第二步:

JavaScript

也迎接任何朋友。其次步:央浼accesstoken 诉求地址:

再次来到结果: 再次来到字符串:
access_token=ACCESS_也迎接任何朋友。TOKEN&expires_也迎接任何朋友。in=60&refresh_token=REFRESH_TOKEN

1
2
3
4
5
6
7
8
9
第二步:请求accesstoken
 
请求地址:
 
https://open.t.qq.com/cgi-bin/oauth2/access_token?client_id=APP_KEY&client_secret=APP_SECRET&redirect_uri=http://www.myurl.com/example&grant_type=authorization_code&code=CODE
 
返回结果:
返回字符串:
access_token=ACCESS_TOKEN&amp;expires_in=60&amp;refresh_token=REFRESH_TOKEN

设若你今后早已布置好您的劳务端口,已经配备好手提式有线电话机端的ChildBrowser,你就曾经得以在四弟大方面看看整个认证的流水生产线了。未来的办事早就实现了抢先四分之二了,但是留神的相爱的人只怕会意识,对啊,认证是达成了,手提式有线电话机上依然不曾获得授权啊,因为授权后的音信还不可见通过手机去取得。不要
急,ChildBrowser有意思的地方还并未有完呢。在手提式有线电话机端方面大家成功了oAuth认证,总有一点点参数重临,不管accesstoken是不是留存手机端,你不能够不有个帐户机制和服务端通信。笔者的服务端在SAE上边,小编就确立二个唯一id给手机,于是自身就确立了一个帐户机制,存在服务端上,服务端上囤积的东西是:

MySQL

CREATE TABLE IF NOT EXISTS `auth_user` ( `id` int(10) NOT NULL
AUTO_INCREMENT, `muser` varchar(255) COLLATE utf8_unicode_ci NOT
NULL, `access_token` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`openid` varchar(255) COLLATE utf8_unicode_ci NOT NULL, `openkey`
varchar(255) COLLATE utf8_unicode_ci NOT NULL, `name` varchar(255)
COLLATE utf8_unicode_ci NOT NULL, `create_time` timestamp NOT NULL
DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT
CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;

1
2
3
4
5
6
7
8
9
10
CREATE TABLE IF NOT EXISTS `auth_user` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `muser` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `access_token` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `openid` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `openkey` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;

实际那个表也还尚未全面,作者不可能不还要纪录那几个用户是不是在线(要是有推送机制)。此后手提式有线电话机端和服务端通讯就因此地点的id以及token等的新闻进行通信,再经过服务端想Tencent天涯论坛实行api的简报,获取我们想要的新闻。那么申明后大家通过怎么样路线得到表达后回去的消息吗?大家看看下面JS调节ChildBrowser的代码。会发觉在那之中有二个方法:

JavaScript

cb.onLocationChange = function (loc){ console.warn(loc); };

1
cb.onLocationChange = function (loc){ console.warn(loc); };

即使您在xCode上边跑这段代码的话,你会意识loc打出去的是历次ChildBrowser里面浏览的网页改造的地址。那个时候大家就能够相机行事,依据这里提供的章程,用url的章程把地方重临到Phonegap担负逻辑处理的JS代码中,同临时候将有关必要通信的新闻也回到。重临后还是能通过回
调的不二秘籍进行关闭ChildBrowser的代码:

JavaScript

cb.close();

1
cb.close();

当然,你还足以实施更加多异步供给的代码。至于说还是能透过哪些的艺术开展电视发表其实还应该有好些个办法,作者这里仅仅是提供一下思路教导以及艺术。具体的
话,还要实践出真理论,做到极度安全的简报还值得我们后续深刻斟酌。那么小编要介绍的大约就到这里截止。因为其实项目中大家还可能有push
notification的建制,所以事后本身应该还或然会联同@Jeff_Kit

实现一下Phonegap的推送方案,并整治出sdk,成文后开放出来方便大家交流。

对于本文即便有啥疑难仍然提议都得以一直向自个儿陈述,笔者的新浪网易是:@CashLee李秉骏 ,笔者还时不经常分享部分代码片段在github上边(开源的活力没多少,所以开源项目比较少,希望现在加多吗。)笔者的Github账号,
款待您和自身时刻举行调换,也希望Phonegap的华夏开垦者社区会变得进一步杰出。

注意:ChildBrowser控件在事实上条件中因为安全主题材料恐怕需求修改,通信进度中参数也提出加密。:-)

 

正文由李秉骏(@CashLee李秉骏)投稿于伯乐在线,也款待任何朋友投稿。提示:投稿时记得留下今日头条账号哦 图片 5

【如需转发,请标明并保留原来的文章链接和笔者等消息,多谢合作!】

 

 

1 赞 收藏 2
评论

图片 6

发表评论

电子邮件地址不会被公开。 必填项已用*标注