上節內容:通用社區登陸組件技術分享(開源)上篇:OAuth 授權登陸介紹
本節包括以下內容:
1:第三方社區賬號登陸的授權流程
2:OAuth2 組件的下載及web.config配置
3:OAuth2 組件的5行代碼編寫流程
4 :總結與下節內容預告
一: 第三方社區賬號登陸的授權流程
1:首先從這里開始:用戶進入登陸界面
2:用戶點擊用新浪微博或QQ登陸,系統跳到第三方授權頁面,(QQ示例授權界面)

3:確定授權后,第三方跳轉返回你的回調頁(在應用里設置),通常仍是系統登陸頁面統一處理。授權用戶綁定您網站的賬號。
我們首次引導登陸並綁定賬號,當然,官方建議的比較好的用戶體驗的界面是這樣的:
4:用戶正常登陸或注冊新賬號,自動實現綁定,至此流程結束,下一次用戶點用第三方賬號登陸時,系統檢測到已綁定賬號,直接用綁定的賬號進入后台。
二:OAuth2 組件的下載及web.config配置
1:下載OAuth2.dll組件,下載:
OAuth2.rar(
)
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事件中,判斷如果是跳轉回來的,就分析授權,然后進行分支處理:
以下是示例的分支代碼:
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中獲取剛剛的社區授權,然后綁定賬號:
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
