自從sina微博oauth2出來(lái)以后,第三方集成開(kāi)發(fā)簡(jiǎn)單了很多.Oauth2不像oauth1一樣需要后臺(tái)httpclient請(qǐng)求那么麻煩,一切都可以在前臺(tái)使用ajax實(shí)現(xiàn)了.很多人覺(jué)得蹊蹺,對(duì)于一個(gè)第三方應(yīng)用,如何不走后臺(tái),而在...

自從sina微博oauth2出來(lái)以后,第三方集成開(kāi)發(fā)簡(jiǎn)單了很多.Oauth2不像oauth1一樣需要后臺(tái)httpclient請(qǐng)求那么麻煩,一切都可以在前臺(tái)使用ajax實(shí)現(xiàn)了.很多人覺(jué)得蹊蹺,對(duì)于一個(gè)第三方應(yīng)用,如何不走后臺(tái),而在前臺(tái)使用ajax,來(lái)獲取accesstoken?又如何向sina發(fā)起get或post請(qǐng)求?這其中最難解決的問(wèn)題當(dāng)屬跨域問(wèn)題.這篇文章將徹底解決這些疑問(wèn).

OAuth

OAuth為一種授權(quán)認(rèn)證機(jī)制.它牽扯到服務(wù)提供方(sinaweibo),用戶(hù),第三方應(yīng)用(比如糗事百科).第三方應(yīng)用想方便用戶(hù)可以在它的應(yīng)用里面直接訪問(wèn)自己的weibo信息,還可以把第三方的信息發(fā)送到weibo,比如轉(zhuǎn)發(fā)糗事到sinaweibo.實(shí)現(xiàn)這個(gè)功能,首先需要第三方應(yīng)用擁有用戶(hù)和sina的授權(quán).在拿到授權(quán)以后,第三方應(yīng)用才能實(shí)現(xiàn)集成功能.為什么不直接給第三方用戶(hù)密碼而用授權(quán)機(jī)制,這種問(wèn)題就不羅嗦了.

拿糗百為例,授權(quán)的過(guò)程為:

1,糗百打開(kāi)一個(gè)window或iframe,location指向weibooauth授權(quán)界面.

2,weibo授權(quán)界面是在sina的域名下,是由sina的服務(wù)器控制的.授權(quán)界面要求用戶(hù)填寫(xiě)sina的賬戶(hù),并確認(rèn)授權(quán).

3,用戶(hù)確認(rèn)以后,請(qǐng)求發(fā)回給sina.sina產(chǎn)生一個(gè)accesstoken,并發(fā)回給糗百.OAuth1使用httpclient,OAuth2使用跨域方法.

4,糗百保留用戶(hù)的accesstoken.

5,用戶(hù)在糗百發(fā)起分享糗事到sina,糗百將糗事和accesstokent一并發(fā)給sina.OAuth1使用httpclient,OAuth2使用跨域方法.

以上就是授權(quán)過(guò)程.OAuth1使用類(lèi)似httpclient的方法與sina交流.這沒(méi)有什么疑問(wèn),我就不多講了.accesstoken的產(chǎn)生和驗(yàn)證也不是本文要討論的.本文要討論的是,OAuth2中實(shí)現(xiàn)的疑惑.第三方應(yīng)用是如何通過(guò)跨域方法拿到sina的accesstoken的?它又是如何通過(guò)跨域方法向sina發(fā)起get或post請(qǐng)求的?

window.postMessage與window.name

在講sina的框架的之前,先熟悉兩個(gè)常見(jiàn)的跨域方法.window.postMessage和window.name.

兩個(gè)window或iframe之間,只要能拿到對(duì)方window的句柄,就可以向?qū)Ψ桨l(fā)送消息.方法為

1otherWindow.postMessage(message,targetOrigin);

如果對(duì)方注冊(cè)了事件監(jiān)聽(tīng)就可以收到message.

1if(window.addEventLister){

2window.addEventLister("message",function(message){});

3}else{

4window.attachEvent("onmessage",function(message){});

5}

通過(guò)此種方法,可以在兩個(gè)不同域的window之間相互傳遞信息.

因低于IE8的IE瀏覽器是不支持postMessage,所以還可以使用window.name來(lái)傳值.如果寫(xiě)的復(fù)雜,則可以使用window.name來(lái)模擬postMessage的功能.window.name的局限是,只有同域下才能相互訪問(wèn)window.name,所以使用window.name來(lái)跨域傳值,要花費(fèi)不少功夫.

window.name跨域最典型的方法是使用代理頁(yè)面.比如domainA下有a,domainB下有b.a如何傳值給domainB呢?a可以先創(chuàng)建一個(gè)iframe,然后賦予新iframe的contentWindow.name一個(gè)message.然后,將iframe的src指向domainB的代理頁(yè)面b-proxy.這時(shí)候,b可以訪問(wèn)b-proxy的window.name獲取message.監(jiān)聽(tīng)window.name變化可以使用setInterval來(lái)輪詢(xún).

sinaweibo就是使用的上面方法.首選postMessage,如果不支持postMessage,則使用window.name.由于其js寫(xiě)的太復(fù)雜,壓縮以后更加難看.所以我一直沒(méi)看明白它是如何使用window.name的,但原理跟上面是一樣的.

Weibooauth2框架

1,第三方應(yīng)用首先在sina處申請(qǐng)SDK的使用.從而獲得一個(gè)JS的引用地址.

2,第三方將JS的引用放入自己的頁(yè)面,看黃色的"Weibo".

3,(授權(quán)過(guò)程沒(méi)有畫(huà)在圖上)當(dāng)?shù)谌较氲玫接脩?hù)授權(quán)的時(shí)候,調(diào)用WB2.login()函數(shù).weibojs彈出一個(gè)window,window的location指向sina的oauth2資源.用戶(hù)在window中輸入用戶(hù)密碼,提交到sina,sina返回一個(gè)自關(guān)閉頁(yè)面.自關(guān)閉頁(yè)面在關(guān)閉前,會(huì)將帶回來(lái)的accesstoken用window.opener.postMessage()的方法傳回給weibojs所注冊(cè)的message監(jiān)聽(tīng)方法.然后weibojs得到accesstoken,將其存入第三方應(yīng)用的cookie下.

4,第三方應(yīng)用開(kāi)始通過(guò)Weibojs向sina發(fā)起資源請(qǐng)求.

5,Weibojs首先創(chuàng)建一個(gè)iframe,iframe中引入了sinaclientjs.此iframe跟第三方頁(yè)面同源.

6,Clientjs又創(chuàng)建了一個(gè)iframe,iframe的src指向sinaxd.jsp,并引入了sina的xd.js.

7,xd.js跟sina同源,xd.js發(fā)起帶有accesstokent的XMLHttpRequest,從sina得到資源.

8,xd.js通過(guò)postMessage或者window.name的方式回傳給正在監(jiān)聽(tīng)等待的clientiframe.

9,clientiframejs再回傳給weibojs.

10,weibojs調(diào)用第三方頁(yè)面的callback函數(shù),并把獲得的資源傳給它.

11,callback分析資源,顯示在頁(yè)面上.

為什么使用clientiframe?去掉它好像也可以的樣子.我說(shuō)下對(duì)clientiframe的猜想,sina不想暴露太多的接口.weibojs就像接口,盡量短小精悍.將復(fù)雜的邏輯處理放在動(dòng)態(tài)創(chuàng)建的clientjs里面.其次,由于某些低版本的瀏覽器不支持postMessage,所以需要使用window.name來(lái)模擬postMessage功能,需要使用代理,我懷疑clientiframe就起到一個(gè)代理功能.不過(guò)他們的代碼本身寫(xiě)的就結(jié)構(gòu)龐大,使用了大量的閉包,再用工具對(duì)js壓縮了一遍,實(shí)在是看不清楚他們?nèi)绾问褂脀indow.name的.萬(wàn)變不離其宗吧.