為什么80%的碼農都做不了架構師？>>> ??

????????Webtop 既然是用html+css+js來開發桌面APP，那么在做一些娛樂社交應用的時候，去整合一些開放平臺的時候也是十分方便的。我們直接可以使用jQuery的ajax來和開放平臺交互就可以。

????????昨天，我在嘗試整合人人網的開放平臺的時候。遇到了一些小的問題，這里給大家介紹一個解決的方案。

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

????????一、用iframe嵌套人人網的應用授權頁面

????????我們在Webtop的界面上面用iframe來嵌套人人網的應用授權頁面，來讓用戶完成登錄授權。Webtop肯定不是一個Web服務端的應用，所以我們這里采用客戶端的登錄方式。

$('#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>');

????????人人網的 OAuth授權頁面的地址為 https://graph.renren.com/oauth/authorize ，我們需要給它傳3個參數：client_id、redirect_uri、response_type。? client_id 的值是你的應用注冊的id，redirect_uri是用戶登陸后你的回調頁面，response_type是指定不同的登錄方式，客戶端登錄的話選擇 token 。

????????在用戶登陸以后，人人網會重定向到你的CallBack頁面，并傳給你access_token以及expires_in。access_token這個值我們是要保存下來的，后面請求用戶其他數據的時候是需要把這個值傳會給人人網的。

????????但是在Webtop我們的當前頁面的地址是一個本地文件的地址? file :/// 開頭，人人網會對你的CallBack URL 驗證的，我們的 window.location 的值并不合法，所以我們當前頁面的地址是沒法作為回調頁面傳給人人網的。

????????二、使用人人的測試回調頁面來攔截URL獲取access_token

????????這個回調頁面的問題糾結了我好久，既然Webtop本身是不能提供一個合法的頁面作為回調地址傳給人人網。我們只能通過用人人網的測試頁面，然后來攔截這個iframe的src的變化，截取這個access_token。

????????上面的iframe代碼中，我們加了一個 onload事件，每次iframe加載頁面的時候就會觸發這個方法。當然在用戶登錄成功以后也會觸發。登錄后，回調的地址如下格式：

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

我們對這個地址進行截取，去除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 替換成 | 。這個要注意，耽誤了我很久。

????????三、計算sig的值

????????基于OAuth的開發平臺的每次請求，都會要求簽名認證。人人API 服務器使用了簽名機制（即sig參數）來認證應用。簽名是由請求參數和應用的私鑰Secret Key經過MD5加密后生成的字符串。應用在調用人人API之前，要計算出簽名，并追加到請求參數中。

????????人人網提供了一個計算sig的 js demo。這個地址我一時又找不到了，人人網的開發平臺上面有。它里面有一個md5.js 文件，我們就用它提供的方法來計算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) {//數組a按字典序排序a.sort(function(a, b) {//取得各參數名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;//計算md5return hex_md5(str);}

這里 RR.api_key 是你注冊人人網應用是分配給你的key，RR.secret_key是應用的secret key。RR.token的值是剛才我們截取的access_token 的值。

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

????????四、請求用戶信息

????????計算出sig的值，我們就可以請求用戶的信息。這里請求的參數必須都參與sig值的計算，然后再加上sig的值，一起post給人人網開發平臺。他的請求地址為：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，所以會接受到json格式的數據。同時也支持xml。

?

????????后面我們都使用這種方式來請求數據就可以了。Webtop 整合人人網開發平臺應該來說還是比較方便。

?

?

?

?

轉載于:https://my.oschina.net/FengJ/blog/87682

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。