使用Microsoft帳號登入ASP.NET網站

by vivid 5. 六月 2013 11:20

.NET Magazine國際中文電子雜誌
作 者:許薰尹
審 稿:張智凱
文章編號:N130613701
出刊日期:2013/6/5

 

OAuth協定的第一個版本在2006年提出,而OAuth 2.0是新一代的OAuth協定。OAuth 2.0可以簡化網站應用程式、桌上型應用程式,甚至是手持裝置,如手機的授權處理。OpenID/OAuth可以讓你實作單一登入功能,在Visual Studio 2012的範本網站專案中,預設便可以使用OpenID/OAuth外部驗證功能來登入ASP.NET Web Forms或MVC網站,這些第三方的網站包含Microsoft、Facebook、Twitter或Google等帳號。本篇文章將介紹如何使用Microsoft與Google的帳戶來進行登入。

在本文中,使用Visual Studio 2012提供的「ASP.NET Web Form應用程式」專案範本來展OAuth外部驗證功能。首先從Visual Studio 2012開發工具 -「檔案」-「新增」-「專案」,在「新增專案」對話盒中選取程式語言,例如本範例選擇「Visual C#」,從「Web」分類中,選取「ASP.NET Web Form應用程式」,名稱部分使用預設的名稱;按下「確定」鍵,請參考下圖所示:

clip_image002

圖 1:建立「ASP.NET Web Form應用程式」。

預設專案中已經引用DotNetOpenAuth等相關的組件,請參考下圖所示:

clip_image003

圖 2:專案預設引用DotNetOpenAuth等相關的組件。

 

設定以IIS Web伺服器執行網站

從「方案總管」視窗-選取網站-按滑鼠右鍵,選取「屬性」進入專案屬性頁,點選「WEB」,在伺服器區段選取「使用本機IIS Web伺服器」,然後按下「建立虛擬目錄」按鈕,請參考下圖所示:

clip_image005

圖 3:「使用本機IIS Web伺服器」執行網站應用程式。

按F5執行範例網站,此時會啟動瀏覽器,按下右上方的「登入」按鈕,預設登入網頁右方便會出現「使用其它服務進行登入」區塊,並顯示「未設定任何外部驗證服務」訊息,您可以點選後方「本文」關聯的超連結,連結到http://blogs.msdn.com/b/webdev/archive/2012/08/15/oauth-openid-support-for-webforms-mvc-and-webpages.aspx網頁,以得到更多設定外部驗證服務的資訊,請參考下圖所示:

clip_image007

圖 4:登入頁面可以選擇「使用其它服務進行登入」。

 

將應用程式連結到Windows Live

微軟的「Live Connect」實作OAuth 2.0協定,以提供使用者身份驗證的功能。在使用Microsoft帳號登入你的網站應用程式之前,您需要先到「Live Connect開發者中心」進行應用程式註冊,網址在:「https://manage.dev.live.com/AddApplication.aspx」,先使用Windows帳號登入(註,筆者使用Windows 8作業系統測試,總是會被導向簡體中文的網站) ,請參考下圖所示:

clip_image009

圖 5:登入「Live Connect開發者中心」。

登入網站之後,為你的應用程式設定一個名稱,以便將網站應用程式與Windows Live關聯起來,例如本範例設定應用程式的名稱為:「myauthdemo」,選擇語言,然後按下「我接受」按鈕,請參考下圖所示:

clip_image011

圖 6:關聯網站應用程式與Windows Live。

下一步選取你剛剛建立的應用程式,例如本範例的「myauthdemo」,選取「設置」-「API設置」,記住網頁上面顯示的「客戶端ID」與「客戶端密碼」資訊,並設定「重新導向網域」,指定一個網域名稱。若要在本機電腦進行測試,可以先隨意給一個名稱,Windows帳戶驗證無法使用localhost來重新導向。設定完成之後記得按下「保存」按鈕將設定儲存起來,請參考下圖所示:

clip_image013

圖 7:設定導向網域。

 

在網站啟用oAuth

現在我們可以回到Visual Studio 2012,開啟網站App_Start資料夾下AuthConfig.cs檔案。若要使用Microsoft帳戶進行驗證,只要移除RegisterOpenAuth方法中叫用OpenAuth.AuthenticationClients.AddMicrosoft方法的此行程式的註解,然後將「您的Microsoft帳戶用戶端識別碼」與「您的Microsoft帳戶用戶端密碼」代換成Windows Live網站上顯示的「客戶端ID」與「客戶端密碼」資訊:

namespace WebApplication1 {
  internal static class AuthConfig {
    public static void RegisterOpenAuth( ) {
      // 請參閱 http://go.microsoft.com/fwlink/?LinkId=252803,取得設定此 ASP.NET 應用程式的詳細資料,
      //以支援透過外部服務進行登入。

      //OpenAuth.AuthenticationClients.AddTwitter(
      //    consumerKey: "您的 Twitter 使用者金鑰",
      //    consumerSecret: "您的 Twitter 使用者密碼");

      //OpenAuth.AuthenticationClients.AddFacebook(
      //    appId: "您的 Facebook 應用程式識別碼",
      //    appSecret: "您的 Facebook 應用程式密碼");

      OpenAuth.AuthenticationClients.AddMicrosoft(
          clientId: "您的Microsoft帳戶用戶端識別碼" ,
          clientSecret: "您的Microsoft帳戶用戶端密碼" );

      //OpenAuth.AuthenticationClients.AddGoogle( );
    }
  }
}

 

設定localhost

因為Microsoft Windows帳號在驗證程序完成後,無法使用localhost重新導向你的網站,因此在本機進行測試時,你需要為localhost設定一個測試用的網域名稱。使用管理者權限開啟C:\Windows\System32\Drivers\etc資料夾下的hosts檔案,加上一筆網域對應,例如本文範例設定的「127.0.0.1 myauthdemo.com」,請參考下圖所示:

clip_image014

圖 8:設定測試用的網域名稱。

完成之後,你可以利用作業系統的命令提示字元試著進行ping的動作:

「ping myauthdemo.com」,便會收到回應訊息,參考如下:

 

Microsoft Windows [版本 6.2.9200]

(c) 2012 Microsoft Corporation. 著作權所有,並保留一切權利。

C:\Users\Administrator>ping myauthdemo.com

Ping myauthdemo.com [127.0.0.1] (使用 32 位元組的資料):

回覆自 127.0.0.1: 位元組=32 時間<1ms TTL=128

回覆自 127.0.0.1: 位元組=32 時間<1ms TTL=128

回覆自 127.0.0.1: 位元組=32 時間<1ms TTL=128

回覆自 127.0.0.1: 位元組=32 時間<1ms TTL=128

127.0.0.1 的 Ping 統計資料:

封包: 已傳送 = 4,已收到 = 4, 已遺失 = 0 (0% 遺失),

大約的來回時間 (毫秒):

最小值 = 0ms,最大值 = 0ms,平均 = 0ms

 

測試

現在可以執行網站進行測試,在Visual Studio 2012,按下F5執行網站應用程式,點選「登入」按鈕,將瀏覽器網址列上的「localhost」改為你設定的測試網域名稱「myauthdemo.com」,網址列目前看起來如「http://myauthdemo.com/WebApplication1/Account/Login」。

網站的登入畫面右方便會自動出現一個使用「Microsoft」帳戶驗證的按鈕,點選「Microsoft」按鈕,請參考下圖所示:

clip_image016

圖 9:使用「Microsoft」帳戶驗證。

接著便會自動導向「https://login.live.com/」網站要求輸入Windows帳號、密碼來進行驗證的動作。同樣在此畫面需要輸入有效的帳號與密碼,請參考下圖所示:

clip_image017

圖 10:使用Microsoft帳戶驗證。

登入成功之後,會出現以下畫面,詢問是否開放授權允許應用程式存取,請參考下圖所示:

clip_image018

圖 11:開放授權允許應用程式存取。

接著你的網站應用程式便會顯示驗證成功的訊息,你可以輸入一個識別名稱,再按下「登入」按鈕,請參考下圖所示:

clip_image019

圖 12:設定網站應用程式要使用的使用者名稱。

最後就可以看到網站的首頁,首頁上方也會顯示您的使用者名稱,請參考下圖所示:

clip_image020

圖 13:網站應用程式首頁。

 

使用google帳號

若要改用其它帳號,例如google帳號,你可以回到Visual Studio 2012,開啟網站App_Start資料夾下AuthConfig.cs檔案。移除RegisterOpenAuth方法中叫用OpenAuth.AuthenticationClients.AddGoogle方法的此行程式的註解即可。

使用google帳號不用擔心localhost對應網域名稱的問題。接著便可直接執行網站進行測試,在Visual Studio 2012,按下F5執行網站應用程式,點選「登入」按鈕,

網站的登入畫面右方便會自動出現一個使用「Google」帳戶驗證的按鈕,點選「Google」按鈕,請參考下圖所示:

clip_image022

圖 14:使用「Google」帳戶驗證。

下一個畫面便導向「https://account.google.com」進行驗證,同樣要輸入有效的帳號、密碼進行登入,請參考下圖所示:

clip_image024

圖 15:登入google。

瀏覽器會跳出訊息,確認是否允許https://account.google.com網站存取你的內部網站訊息,按下「是」按鈕,請參考下圖所示:

clip_image025

圖 16:開放存取授權。

接著便出現授權畫面,按下「接受」,請參考下圖所示:

clip_image027

圖 17:接受授權。

接著就可以看到網站顯示驗證成功的訊息,你可以輸入一個識別名稱,再按下「登入」按鈕,請參考下圖所示:

clip_image029

圖 18:以google帳戶登入。

若要使用Facebook與Twitter帳號來進行登入,可以參考文後的參考資料。

 

參考資料

l 《OAuth/OpenID Support for WebForms, MVC and WebPages》

http://blogs.msdn.com/b/webdev/archive/2012/08/15/oauth-openid-support-for-webforms-mvc-and-webpages.aspx

l 《Configuring your ASP.NET application for Microsoft OAuth account》

http://blogs.msdn.com/b/webdev/archive/2012/09/19/configuring-your-asp-net-application-for-microsoft-oauth-account.aspx

l 《OAuth 2.0》

http://msdn.microsoft.com/en-us/library/live/hh243647

Tags:

.NET Magazine國際中文電子雜誌 | ASP.NET | 許薰尹Vivid Hsu

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List