在 ASP.NET 4.5 專案中套用 OAuth 登入

我們都知道, ASP.NET 從 2.0 開始, 原本已經提供了一個相當完整的會員認證/授權系統。但是隨著時代進步, 社群網站風起雲湧, 幾乎每個人都有一個 FaceBook、Twitter、Live 或者 Google 等帳號。如果你的網站可以允許你的使用者使用這些帳號登入, 讓他們不需要申請另一個新的帳號, 這樣對他們而言, 豈不是更加方便? 其實這種做法等於是 SSO (Single Sign On) 的概念, 而且微軟的 MSN/Live 帳號在很久以前就已經提供了這種功能, 但是由於那時候 MSN/Live 的認證是收錢的 (我記得並不便宜), 所以並沒有普及。

如上所述的使用第三方 ID 作為認證方式的做法, 在業界稱為 OAuth。在 ASP.NET 4.5 中, 已經內建 OAuth 功能, 讓開發者可以立即且方便地提供 OAuth 認證。

在這篇文章裡, 我將使用 Web Form 做例子; 不過 MVC 網站也同樣提供 OAuth, 並不是只有 Web Form 專案才有。

首先, 當你建立一個 Web Form 專案之後, 你可以在專案的 App_Start 資料夾之下找到一個 AuthConfig.cs 的類別檔案。在這個檔案裡提供一個連結, 開啟後會連到 "OAuth/OpenID Support for WebForms, MVC and WebPages" 這篇文章。在這篇文章裡, 它又會連結到一篇由 Scott Hanselman 所寫的一篇 "OAuth in the Default ASP.NET 4.5 Templates"。在這篇文章裡有一段很簡短的影片, 雖然他講的是英語, 但是就算你再害怕英語, 你還是應該把它看個一遍。只要看完這段三分 44 秒的短片, 你就可以對 ASP.NET 的 OAuth 有個初步的概念; 這樣遠比看長篇大論的文字述鈙還要有效得多。

以下, 我要使用 FaceBook 做為例子, 介紹一下如何從無到有, 把 FaceBook 認證整合到你的 Web Form 專案裡面。

要整合 FaceBook, 你必須先申請 FaceBook 的 Developer 資格。請先進入 FaceBook Developers 網頁 (https://developers.facebook.com/apps/)。如果你從未申請過 FaceBook 的 Developer 資格, 你在網頁右上角會看到一個 "Register as a Developer" 按鈕:

按下那個按鈕, 會啟動一個 Wizard 視窗, 你必須接受 FaceBook 的同意條款, 在認證程序完成之後, 才能正式取得 Developer 身分。

當你取得 Developer 身分之後, 再回到上述網頁 (https://developers.facebook.com/apps/), 你會發現右上角的按鈕變成 "Create New App" 字樣。現在按下這個按鈕, 會出現以下畫面:

在 App Name 欄位中填入你的網站的名稱, 再按下 Continue 按鈕。按照步驟進行, 最後你會看到這個畫面:

把這個畫面的 App ID (數字字串) 和 App Secret (文數字串) 複製起來, 然後把 AuthConfig.cs 中 FaceBook 區段的註解取消, 並且把上述兩個字串貼上去:

現在, 按 F5 或 Ctrl-F5 執行你的網站, 然後看你的 ASP.NET 網站是執行在哪一個埠; 例如 "http://localhost:4348"。把這一串字記起來。這一頁請暫時不要關閉。

回到 FaceBook Developer 頁面上, 在畫面中間找到 "Select how your app integrates with Facebook" 這個區段, 然後把上面那一串字填進去, 然後按下最下方的 "Save Changes" 按鈕。如下圖所示:

 

現在, 回到 "http://localhost:4348" 這個網站, 按下右上方的「登入」按鈕,

在接下來的登入頁中, 你應該可以看到右邊多出了一個 「使用其他服務進行登入」的選項。請按下 "Facebook" 按鈕。

在第一次的操作時, 使用者會看到一個警告視窗:

按下 "Okey" 按鈕, 再以 FaceBook 帳號和密碼登入即可。程式可能會要求你選擇自己的帳號名稱。

登入之後, 你在網站的右上角就會看到自己的帳號。

到這裡為止, 你的網站已經具備可以使用 FaceBook 帳號登入的能力了。就是這麼簡單!

不過, 要記得, 當你的網站發行之後, 要回到 FaceBook Developer 頁面, 把剛才的 "http://localhost:4348" 這個網址更改為正式的網址, 否則該功能在正式網站上是不會生效的。