2013年6月6日 星期四

ASP.NET WebForm Forms驗證整合Google oAuth驗證

ASP.NET從4.x開始,支援不少重要的機制,也不知道是因為用的人變少了,還是因為大家都沒空,所以ASP.NET WebForms相關的中文post比起其他技術相形之下少的可憐。

最近開發團隊中有夥伴需要透過ASP.NET WebForm來整合Google/Faccbook/MS的身分驗證,當然,我們都知道現在大家都支援oAuthOpenID了,最理想的狀況是讓我們家的網站跟MS自己的網站一樣,User只需要登入一次,就可以跨網站跑來跑去不需要重新登入,同時,我們的網站也不需要負責維護用戶的帳號密碼,而是透過Google/Faccbook/MS幫我們做身分驗證。
(有空我會畫張圖,上面這張是出自oauth.net)

簡單的說,就是我們的網站的用戶只需要有Google/Faccbook/Microsoft Account等帳號,即可登入我們的網站,而我們的網站也不需要傷腦筋身分驗證的事情,畢竟,驗證是一個可能導致風險的機制,也是駭客進入你的網站的第一道防線,如果隨意設計可能後患無窮,與其自己辛苦,不如透過oAuth機制幫你驗證用戶身分。

前面說過,在ASP.NET要實現這樣的功能,從4.0之後的版本,大幅簡化了工作流程,甚至,你現在只需要透過DotNetOpenAuth.AspNet套件即可完成。 我們以底下這個ASP.NET WebForm 4.0與Google帳號整合的驗證機制來示範,我們建立一個新的WebForm網站:

我刻意用ASP.NET Empty Web Application,因為這個範本比較乾淨,甚至連app_start都沒有,這樣比較容易說明。 接著,請進入到我們的ASP.NET專案,在VS2012中開啟Package Manager Console(主選單--> Tools --> Library Package Manager --> Package Manager Console),並依序輸入:

Install-Package Microsoft.AspNet.Membership.OpenAuth
  和
Install-Package DotNetOpenAuth.AspNet

輸入後,VS2012會執行一些動作...


你會發現Visual Studio在你的專案中加入了一堆有的沒的.dll,完成後大致如下:

主要是頭底上那幾個Microsoft.AspNet.Membership.OpenAuth... 接著,請在專案中加入Global.asax:

並且在Application_Start中加上這一行:(以整合Google驗證為例)
protected void Application_Start(object sender, EventArgs e)
 {
      OpenAuth.AuthenticationClients.AddGoogle();
 }

然後我們要建立幾個頁面,分別是default.aspx, login.aspx, GoogleCallBack.aspx
  1. default.aspx 是我們的首頁,在首頁中會顯示登入用戶的資訊,如果發現使用者沒登入,則導入到login.aspx。
  2. login.aspx登入頁面,過去我們是在這個頁面中放入login控制項,而現在我們則在這個頁面中,把用戶帶到google去做登入驗證
  3. GoogleCallBack.aspx則是google幫我們驗證完之後,要將用戶帶去的那個頁面
在default.aspx中,我們的程式碼是:
protected void Page_Load(object sender, EventArgs e)
{
    if (!string.IsNullOrEmpty(User.Identity.Name))
        this.Label1.Text = User.Identity.Name;
    else
        Response.Redirect("login.aspx");
}

在Login.aspx中,我們的程式碼是:
protected void Page_Load(object sender, EventArgs e)
{
    OpenAuth.RequestAuthentication("google", "~/GoogleCallBack.aspx");
}

最後,是重要的GoogleCallBack.aspx
protected void Page_Load(object sender, EventArgs e)
{
    var returnUrl = Request.QueryString["sid"];
    var authResult = OpenAuth.VerifyAuthentication(returnUrl);
    if (authResult.IsSuccessful)
    {
        System.Web.Security.FormsAuthentication.SetAuthCookie(authResult.UserName, false);
        Response.Redirect("default.aspx");
    }
}

別忘了Web.Config中必須要設為Forms驗證:
<system.web>
<authentication mode="Forms"></authentication>
   ...
   ...

接著,就可以試試看囉....你會發現當進入default.aspx頁面,如果用戶尚未登入,系統會導入google驗證畫面:

當用戶登入後,則會出現此要求授權畫面:

這個畫面只會出現一次,當用戶接受之後,未來登入時就不會出現,接著,系統自動將程式導入到我們先前設計的GoogleCallBack.aspx,在該頁面當中,我們透過API取得用戶帳號,並且透過SetAuthCookie保留用戶身分,再導回首頁,如此就完成google與ASP.NET WebForm Forms 驗證的整合囉。



Source Code:
https://github.com/isdaviddong/aspnet4WebFormsAuthAndGoogleoAuth

2 則留言:

ShuHan Chang 提到...

hi 你好 我照著你的範例做了一遍 但是 run出來 有錯 Parser Error Message: Could not load type 'WebApplication1.Global'.

可以幫我看一下是為什麼嗎? 謝謝

AABONAA 提到...

這範例還可以使用嗎?