天天看點

通用社群登陸元件技術分享(開源)中篇:OAuth 登陸元件流程及元件內建方法

本節包括以下内容:

通用社群登陸元件技術分享(開源)中篇:OAuth 登陸元件流程及元件內建方法

1:第三方社群賬号登陸的授權流程

2:oauth2 元件的下載下傳及web.config配置

3:oauth2 元件的5行代碼編寫流程

4 :總結與下節内容預告

通用社群登陸元件技術分享(開源)中篇:OAuth 登陸元件流程及元件內建方法

一: 第三方社群賬号登陸的授權流程

1:首先從這裡開始:使用者進入登陸界面

通用社群登陸元件技術分享(開源)中篇:OAuth 登陸元件流程及元件內建方法

2:使用者點選用新浪微網誌或qq登陸,系統跳到第三方授權頁面,(qq示例授權界面)

通用社群登陸元件技術分享(開源)中篇:OAuth 登陸元件流程及元件內建方法

3:确定授權後,第三方跳轉傳回你的回調頁(在應用裡設定),通常仍是系統登陸頁面統一處理。授權使用者綁定您網站的賬号。

通用社群登陸元件技術分享(開源)中篇:OAuth 登陸元件流程及元件內建方法

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

通用社群登陸元件技術分享(開源)中篇:OAuth 登陸元件流程及元件內建方法

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

二:oauth2 元件的下載下傳及web.config配置 

通用社群登陸元件技術分享(開源)中篇:OAuth 登陸元件流程及元件內建方法
通用社群登陸元件技術分享(開源)中篇:OAuth 登陸元件流程及元件內建方法
通用社群登陸元件技術分享(開源)中篇:OAuth 登陸元件流程及元件內建方法

)

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

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

通用社群登陸元件技術分享(開源)中篇:OAuth 登陸元件流程及元件內建方法

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

通用社群登陸元件技術分享(開源)中篇:OAuth 登陸元件流程及元件內建方法

接下來,我們要在登陸界面(示如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(); 

于是就有了剛才的登陸界面下面那兩個第三方授權連結圖示: 

通用社群登陸元件技術分享(開源)中篇:OAuth 登陸元件流程及元件內建方法

使用者點選第三方授權,跳到第三方授權頁面,操作完回調還會傳回到這個登陸界面,隻是多了兩個參數code=xxxx&state=xxx(回調頁面仍設定登陸頁)。

2:oauth2.oauth2base ob = oauth2.oauth2factory.current;//擷取目前的授權類型,如果成功,則緩存到session中。 

3:ob.authorize(out account)//檢測是否授權成功,并傳回綁定的賬号。

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

以下是示例的分支代碼:

通用社群登陸元件技術分享(開源)中篇:OAuth 登陸元件流程及元件內建方法

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 // 讀取授權失敗。

     //提示使用者重試,或改用其它社群方法登陸。

通用社群登陸元件技術分享(開源)中篇:OAuth 登陸元件流程及元件內建方法

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

通用社群登陸元件技術分享(開源)中篇:OAuth 登陸元件流程及元件內建方法

4:oauth2.oauth2base ob = oauth2.oauth2factory.sessionoauth;//擷取存在session的授權

5:ob.setbindaccount(username);//綁定賬号

這兩行代碼,寫在btnlogin和btnregister按鈕的事件中,當使用者登陸,或注冊新賬号時,我們從session中擷取剛剛的社群授權,然後綁定賬号:

通用社群登陸元件技術分享(開源)中篇:OAuth 登陸元件流程及元件內建方法

//使用者登陸,或注冊完賬号(這時我們可以拿到id或者username,綁定哪個就看使用哪個友善了,我們添加以下三行代碼,

oauth2.oauth2base ob = oauth2.oauth2factory.sessionoauth;//擷取剛剛的授權(授權後存在session中)

if (ob != null && !string.isnullorempty(ob.openid))

   ob.setbindaccount(username);//綁定賬号username或id都可以

} 

通用社群登陸元件技術分享(開源)中篇:OAuth 登陸元件流程及元件內建方法

到這裡,整個應用就完成了,就是這麼簡單,除配置項,元件提供的關鍵的代碼隻有5行,卻實作了相關的功能。

四:總結與下節内容預告

a:看完本文,您應該可以擷取到以下資訊: 

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

2:知道怎麼實作這個授權流程。

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

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

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

3:有沒有源碼?

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