通用社區登陸組件技術分享(開源)中篇:OAuth 登陸組件流程及組件集成方法


上節內容:通用社區登陸組件技術分享(開源)上篇:OAuth 授權登陸介紹
 

本節包括以下內容:

1:第三方社區賬號登陸的授權流程

2:OAuth2 組件的下載及web.config配置

3:OAuth2 組件的5行代碼編寫流程

4 :總結與下節內容預告

 

 

一: 第三方社區賬號登陸的授權流程

1:首先從這里開始:用戶進入登陸界面

 

2:用戶點擊用新浪微博或QQ登陸,系統跳到第三方授權頁面,(QQ示例授權界面)


3:確定授權后,第三方跳轉返回你的回調頁(在應用里設置),通常仍是系統登陸頁面統一處理。授權用戶綁定您網站的賬號。

 

我們首次引導登陸並綁定賬號,當然,官方建議的比較好的用戶體驗的界面是這樣的:

connect_UI_5.png  

4:用戶正常登陸或注冊新賬號,自動實現綁定,至此流程結束,下一次用戶點用第三方賬號登陸時,系統檢測到已綁定賬號,直接用綁定的賬號進入后台。

 

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

 

1:下載OAuth2.dll組件,下載: OAuth2.rar(download times)

2:引用該dll到您的網站項目中;

3:在web.config配置您的appkey、appsercet及回調網址(通常是登陸頁面),相關的數據填寫到web.config對應key的value里。

 

PS:獲取或調置回調網址是在新浪和QQ開放者平台操作的,相關網址見上節文章。

 

接下來,我們要在登陸界面(示如Login.aspx)動點小手術: 

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

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

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

當然我們也經常喜歡在Login.aspx.cs后台代碼(通常是Page_Load事件)里輸出:div控件ID.InnerHtml=OAuth2.UI.GetHtml(); 

於是就有了剛才的登陸界面下面那兩個第三方授權鏈接圖標: 

 

 

用戶點擊第三方授權,跳到第三方授權頁面,操作完回調還會返回到這個登陸界面,只是多了兩個參數code=xxxx&state=xxx(回調頁面仍設置登陸頁)。

2:OAuth2.OAuth2Base ob = OAuth2.OAuth2Factory.Current;//獲取當前的授權類型,如果成功,則緩存到Session中。 

3:ob.Authorize(out account)//檢測是否授權成功,並返回綁定的賬號。

這兩行代碼,是寫在Page_Load事件中,判斷如果是跳轉回來的,就分析授權,然后進行分支處理:

以下是示例的分支代碼:

OAuth2.OAuth2Base ob = OAuth2.OAuth2Factory.Current; // 獲取當前的授權類型
if (ob !=  null// 說明用戶點擊了授權,並返回到登陸界面來
{
     string account =  string.Empty;
     if (ob.Authorize( out account)) // 檢測是否授權成功,並返回綁定的賬號(具體是綁定ID還是用戶名,你的選擇)
    {  
       if (! string.IsNullOrEmpty(account)) // 已綁定賬號,直接用該賬號設置登陸。
      {
           // 根據賬號,設置登陸、設置cookie,跳轉到后台管理界面。
      }
       else  //  未綁定賬號,引導提示用戶綁定賬號。
      {
           //取用戶的第三方頭像和昵稱,組裝界面顯示,像秋色園就一行提示文字           
      }

    } 

}
else // 讀取授權失敗。
{
     //提示用戶重試,或改用其它社區方法登陸。
}

如果用戶已經授權,首次未綁定賬號,通常就有了最下方的提示文字,同時“登陸”的文字就改成了“綁定賬號":

  

 

4:OAuth2.OAuth2Base ob = OAuth2.OAuth2Factory.SessionOAuth;//獲取存在Session的授權

5:ob.SetBindAccount(userName);//綁定賬號

這兩行代碼,寫在BtnLogin和BtnRegister按鈕的事件中,當用戶登陸,或注冊新賬號時,我們從Session中獲取剛剛的社區授權,然后綁定賬號:

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

} 

到這里,整個應用就完成了,就是這么簡單,除配置項,組件提供的關鍵的代碼只有5行,卻實現了相關的功能。


四:總結與下節內容預告

A:看完本文,您應該可以獲取到以下信息: 

 

1:知道OAuth授權的界面流程

2:知道怎么實現這個授權流程。

 

B:如果您認真看完本節,或自己實操下,您可能有以下問題想問:

 

1:和網站綁定授權,沒看到相關的數據庫操作,那獲取的token和openid存在哪?

2:如何修改界面,或自定義UI界面?

3:有沒有源碼?

 

也許,下面這句話給了您答案:下節,將開放源碼下載並嘗試為您講解源碼中的組件設計思路,敬請關注。

 

51cto大賽的參賽頁面,感謝路過的朋友也順手扔一票:http://blog.51cto.com/contest2012/2127378   

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM