為什么80%的碼農(nóng)都做不了架構(gòu)師？>>> ??

????????Webtop 既然是用html+css+js來(lái)開(kāi)發(fā)桌面APP，那么在做一些娛樂(lè)社交應(yīng)用的時(shí)候，去整合一些開(kāi)放平臺(tái)的時(shí)候也是十分方便的。我們直接可以使用jQuery的ajax來(lái)和開(kāi)放平臺(tái)交互就可以。

????????昨天，我在嘗試整合人人網(wǎng)的開(kāi)放平臺(tái)的時(shí)候。遇到了一些小的問(wèn)題，這里給大家介紹一個(gè)解決的方案。

????????人人網(wǎng)的API提供了兩種登錄方式：一種是web服務(wù)端的應(yīng)用，另外一種是客戶(hù)端應(yīng)用。但是Webtop又不是一個(gè)真正的本地應(yīng)用(這里這樣說(shuō)的原因是目前webtop的api還是很少，不能和原生的c++,java等相比)，所以在處理登錄的時(shí)候。我們只能采用比較特殊的方法。

????????一、用iframe嵌套人人網(wǎng)的應(yīng)用授權(quán)頁(yè)面

????????我們?cè)赪ebtop的界面上面用iframe來(lái)嵌套人人網(wǎng)的應(yīng)用授權(quán)頁(yè)面，來(lái)讓用戶(hù)完成登錄授權(quán)。Webtop肯定不是一個(gè)Web服務(wù)端的應(yīng)用，所以我們這里采用客戶(hù)端的登錄方式。

$('#app_content').append('<iframe id="rriframe" width="100%" height="400" src="https://graph.renren.com/oauth/authorize?client_id=000000&redirect_uri=http://graph.renren.com/oauth/login_success.html&response_type=token" onload="Rest.rr.loginBack()"></iframe>');

????????人人網(wǎng)的 OAuth授權(quán)頁(yè)面的地址為 https://graph.renren.com/oauth/authorize ，我們需要給它傳3個(gè)參數(shù)：client_id、redirect_uri、response_type。? client_id 的值是你的應(yīng)用注冊(cè)的id，redirect_uri是用戶(hù)登陸后你的回調(diào)頁(yè)面，response_type是指定不同的登錄方式，客戶(hù)端登錄的話(huà)選擇 token 。

????????在用戶(hù)登陸以后，人人網(wǎng)會(huì)重定向到你的CallBack頁(yè)面，并傳給你access_token以及expires_in。access_token這個(gè)值我們是要保存下來(lái)的，后面請(qǐng)求用戶(hù)其他數(shù)據(jù)的時(shí)候是需要把這個(gè)值傳會(huì)給人人網(wǎng)的。

????????但是在Webtop我們的當(dāng)前頁(yè)面的地址是一個(gè)本地文件的地址? file :/// 開(kāi)頭，人人網(wǎng)會(huì)對(duì)你的CallBack URL 驗(yàn)證的，我們的 window.location 的值并不合法，所以我們當(dāng)前頁(yè)面的地址是沒(méi)法作為回調(diào)頁(yè)面?zhèn)鹘o人人網(wǎng)的。

????????二、使用人人的測(cè)試回調(diào)頁(yè)面來(lái)攔截URL獲取access_token

????????這個(gè)回調(diào)頁(yè)面的問(wèn)題糾結(jié)了我好久，既然Webtop本身是不能提供一個(gè)合法的頁(yè)面作為回調(diào)地址傳給人人網(wǎng)。我們只能通過(guò)用人人網(wǎng)的測(cè)試頁(yè)面，然后來(lái)攔截這個(gè)iframe的src的變化，截取這個(gè)access_token。

????????上面的iframe代碼中，我們加了一個(gè) onload事件，每次iframe加載頁(yè)面的時(shí)候就會(huì)觸發(fā)這個(gè)方法。當(dāng)然在用戶(hù)登錄成功以后也會(huì)觸發(fā)。登錄后，回調(diào)的地址如下格式：

http://YOUR_CALLBACK_URL#access_token=1000%7C5.a6b7dbd428f731035f771b8d15063f61.86400.1292922000-222209506&expires_in=64090

我們對(duì)這個(gè)地址進(jìn)行截取，去除access_token的值：

var frame = document.getElementById("rriframe"); var url = frame.contentWindow.location.href; Log.info(url); var _s = url.split('#'); var _ss = _s[1].split('&'); var token = _ss[0].split('=')[1]; RR.token = token.replace('%7C', '|');

這里的地址是UTF8編碼的，所以要將 %7C 替換成 | 。這個(gè)要注意，耽誤了我很久。

????????三、計(jì)算sig的值

????????基于OAuth的開(kāi)發(fā)平臺(tái)的每次請(qǐng)求，都會(huì)要求簽名認(rèn)證。人人API 服務(wù)器使用了簽名機(jī)制（即sig參數(shù)）來(lái)認(rèn)證應(yīng)用。簽名是由請(qǐng)求參數(shù)和應(yīng)用的私鑰Secret Key經(jīng)過(guò)MD5加密后生成的字符串。應(yīng)用在調(diào)用人人API之前，要計(jì)算出簽名，并追加到請(qǐng)求參數(shù)中。

????????人人網(wǎng)提供了一個(gè)計(jì)算sig的 js demo。這個(gè)地址我一時(shí)又找不到了，人人網(wǎng)的開(kāi)發(fā)平臺(tái)上面有。它里面有一個(gè)md5.js 文件，我們就用它提供的方法來(lái)計(jì)算sig的值。

var params = []; params.push('api_key='+RR.api_key); params.push('method=users.getInfo'); var callid = new Date().valueOf(); params.push('call_id=' + callid); params.push('v=1.0'); params.push('format=json'); params.push('access_token=' + RR.token); Log.info(params); var sig = Rest.rr.generateSigFromArray(params, RR.secret_key); generateSigFromArray : function(a, secret_key) {//數(shù)組a按字典序排序a.sort(function(a, b) {//取得各參數(shù)名a_k = (a.split("="))[0];b_k = (b.split("="))[0];return (a_k < b_k) ? -1 : 1;})//按序連接所有key=value與secret_keyvar str = a.join('') + secret_key;//計(jì)算md5return hex_md5(str);}

這里 RR.api_key 是你注冊(cè)人人網(wǎng)應(yīng)用是分配給你的key，RR.secret_key是應(yīng)用的secret key。RR.token的值是剛才我們截取的access_token 的值。

這里傳給md5計(jì)算的字符串的順序貌似是固定的，這里要注意一下。每次請(qǐng)求的參數(shù)都要參與sig的計(jì)算哦！

????????四、請(qǐng)求用戶(hù)信息

????????計(jì)算出sig的值，我們就可以請(qǐng)求用戶(hù)的信息。這里請(qǐng)求的參數(shù)必須都參與sig值的計(jì)算，然后再加上sig的值，一起post給人人網(wǎng)開(kāi)發(fā)平臺(tái)。他的請(qǐng)求地址為：http://api.renren.com/restserver.do?。都使用POST方式。

$.ajax({url : RR.rrq,type : "post",data : {'method' : 'users.getInfo','v' : '1.0','format' : 'json','call_id' : callid,'access_token' : RR.token,'sig' : sig,'api_key' : RR.api_key},success : function(data) {RR.user = JSON.parse(data)[0];Log.info(RR.user);Rest.rr.showRenRen();}});

我們這里選擇了 format的方式為json，所以會(huì)接受到j(luò)son格式的數(shù)據(jù)。同時(shí)也支持xml。

?

????????后面我們都使用這種方式來(lái)請(qǐng)求數(shù)據(jù)就可以了。Webtop 整合人人網(wǎng)開(kāi)發(fā)平臺(tái)應(yīng)該來(lái)說(shuō)還是比較方便。

?

?

?

?

轉(zhuǎn)載于:https://my.oschina.net/FengJ/blog/87682

總結(jié)

以上是生活随笔為你收集整理的Webtop Html5 桌面App开发 -- 整合人人网登陆的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。