上節(jié)內(nèi)容：通用社區(qū)登陸組件技術(shù)分享（開源）上篇：OAuth 授權(quán)登陸介紹

本節(jié)包括以下內(nèi)容： 

第三方社區(qū)賬號(hào)登陸的授權(quán)流程  
OAuth2 組件的下載及web.config配置  
OAuth2 組件的5行代碼編寫流程  
總結(jié)與下節(jié)內(nèi)容預(yù)告 

一： 第三方社區(qū)賬號(hào)登陸的授權(quán)流程

1：首先從這里開始：用戶進(jìn)入登陸界面

2：用戶點(diǎn)擊用新浪微博或QQ登陸，系統(tǒng)跳到第三方授權(quán)頁(yè)面，（QQ示例授權(quán)界面）

3：確定授權(quán)后，第三方跳轉(zhuǎn)返回你的回調(diào)頁(yè)（在應(yīng)用里設(shè)置），通常仍是系統(tǒng)登陸頁(yè)面統(tǒng)一處理。授權(quán)用戶綁定您網(wǎng)站的賬號(hào)。

我們首次引導(dǎo)登陸并綁定賬號(hào)，當(dāng)然，官方建議的比較好的用戶體驗(yàn)的界面是這樣的：

4：用戶正常登陸或注冊(cè)新賬號(hào)，自動(dòng)實(shí)現(xiàn)綁定，至此流程結(jié)束，下一次用戶點(diǎn)用第三方賬號(hào)登陸時(shí)，系統(tǒng)檢測(cè)到已綁定賬號(hào)，直接用綁定的賬號(hào)進(jìn)入后臺(tái)。

二：OAuth2 組件的下載及web.config配置 

PS：獲取或調(diào)置回調(diào)網(wǎng)址是在新浪和QQ開放者平臺(tái)操作的，相關(guān)網(wǎng)址見上節(jié)文章。

接下來(lái)，我們要在登陸界面（示如Login.aspx)動(dòng)點(diǎn)小手術(shù)： 

三：OAuth2 組件的5行代碼編寫流程

OAuth2.UI.GetHtml() //獲取界面顯示 

代碼示例：通常我們可能會(huì)在Login.aspx的html里寫上這么一行代碼來(lái)顯示： <%=OAuth2.UI.GetHtml()%>

當(dāng)然我們也經(jīng)常喜歡在Login.aspx.cs后臺(tái)代碼（通常是Page_Load事件）里輸出：div控件ID.InnerHtml=OAuth2.UI.GetHtml(); 

于是就有了剛才的登陸界面下面那兩個(gè)第三方授權(quán)鏈接圖標(biāo)：

用戶點(diǎn)擊第三方授權(quán)，跳到第三方授權(quán)頁(yè)面，操作完回調(diào)還會(huì)返回到這個(gè)登陸界面，只是多了兩個(gè)參數(shù)code=xxxx&state=xxx（回調(diào)頁(yè)面仍設(shè)置登陸頁(yè)）。

OAuth2.OAuth2Base ob = OAuth2.OAuth2Factory.Current;//獲取當(dāng)前的授權(quán)類型，如果成功，則緩存到Session中。   
ob.Authorize(out account)//檢測(cè)是否授權(quán)成功，并返回綁定的賬號(hào)。 

這兩行代碼，是寫在Page_Load事件中，判斷如果是跳轉(zhuǎn)回來(lái)的，就分析授權(quán)，然后進(jìn)行分支處理：

以下是示例的分支代碼：

OAuth2.OAuth2Base ob = OAuth2.OAuth2Factory.Current;//獲取當(dāng)前的授權(quán)類型  
if (ob != null) //說(shuō)明用戶點(diǎn)擊了授權(quán)，并返回到登陸界面來(lái)  
{  
    string account = string.Empty;  
    if (ob.Authorize(out account))//檢測(cè)是否授權(quán)成功，并返回綁定的賬號(hào)（具體是綁定ID還是用戶名，你的選擇）  
    {    
      if (!string.IsNullOrEmpty(account))//已綁定賬號(hào)，直接用該賬號(hào)設(shè)置登陸。  
      {  
          //根據(jù)賬號(hào)，設(shè)置登陸、設(shè)置cookie，跳轉(zhuǎn)到后臺(tái)管理界面。  
      }  
      else // 未綁定賬號(hào)，引導(dǎo)提示用戶綁定賬號(hào)。  
      {  
           //取用戶的第三方頭像和昵稱，組裝界面顯示，像秋色園就一行提示文字             
      }  
}  
else // 讀取授權(quán)失敗。  
{  
     //提示用戶重試，或改用其它社區(qū)方法登陸。  
 
} 

如果用戶已經(jīng)授權(quán)，首次未綁定賬號(hào)，通常就有了最下方的提示文字，同時(shí)“登陸”的文字就改成了“綁定賬號(hào)"：

4：OAuth2.OAuth2Base ob = OAuth2.OAuth2Factory.SessionOAuth;//獲取存在Session的授權(quán)

5：ob.SetBindAccount(userName);//綁定賬號(hào)

這兩行代碼，寫在BtnLogin和BtnRegister按鈕的事件中，當(dāng)用戶登陸，或注冊(cè)新賬號(hào)時(shí)，我們從Session中獲取剛剛的社區(qū)授權(quán)，然后綁定賬號(hào)：

//用戶登陸，或注冊(cè)完賬號(hào)（這時(shí)我們可以拿到ID或者username，綁定哪個(gè)就看使用哪個(gè)方便了，我們添加以下三行代碼，  
OAuth2.OAuth2Base ob = OAuth2.OAuth2Factory.SessionOAuth;//獲取剛剛的授權(quán)（授權(quán)后存在Session中）  
if (ob != null && !string.IsNullOrEmpty(ob.openID))  
{  
   ob.SetBindAccount(userName);//綁定賬號(hào)username或id都可以  
｝ 

到這里，整個(gè)應(yīng)用就完成了，就是這么簡(jiǎn)單，除配置項(xiàng)，組件提供的關(guān)鍵的代碼只有5行，卻實(shí)現(xiàn)了相關(guān)的功能。

四：總結(jié)與下節(jié)內(nèi)容預(yù)告

A：看完本文，您應(yīng)該可以獲取到以下信息：

知道OAuth授權(quán)的界面流程  
知道怎么實(shí)現(xiàn)這個(gè)授權(quán)流程。 

B：如果您認(rèn)真看完本節(jié)，或自己實(shí)操下，您可能有以下問(wèn)題想問(wèn)：

和網(wǎng)站綁定授權(quán)，沒(méi)看到相關(guān)的數(shù)據(jù)庫(kù)操作，那獲取的token和openid存在哪？  
如何修改界面，或自定義UI界面？  
有沒(méi)有源碼？ 

也許，下面這句話給了您答案：下節(jié)，將開放源碼下載并嘗試為您講解源碼中的組件設(shè)計(jì)思路，敬請(qǐng)關(guān)注。

51cto大賽的參賽頁(yè)面，感謝路過(guò)的朋友也順手扔一票：http://blog.51cto.com/contest2012/2127378

原文鏈接：http://www.cnblogs.com/cyq1162/archive/2012/11/06/2756247.html