iT邦幫忙

8

Visual Studio 2017 - ASP.NET 網站開發初步與登入實作

賽門 2018-02-20 21:00:1216629 瀏覽

最近有位邦友alex9453發問asp.net c# 如何驗證資料庫多人帳號密碼,搞了半天不但沒結論,還想找家教ASP.NET C# 想找人教,找了104家教,又說講師沒法解決他的問題。
看了真是受不了,寫篇文來紀念...呃...不...來討論。

自從21年前微軟在1997年推出Visual Studio後,歷經多次改版與升級,到現在的Visual Studio 2017版,每個版本都有其重要的里程碑。

早期的Visual Studio是以開發Windows Forms為主,後來網站開發成為主流時,ASP.NET從配角成主角,但都是以.NET Framework為平台,大約從2008年版開始,Visual Studio開始推行MVC架構的專案開發模式,直到2016年開始推行輕量級的.NET Framework - ASP.NET Core,如果對開源(Open Source)有接觸,可以瞭解Visual Studio想參與開源的主流之心情,Visual Studio 2017推供了對行動裝置開發工具Xamarin的完整支援。

簡單介紹Visual Studio發展歷史,是想交待一件事,舊版本的Visual Studio能做的事,新版本不一定支援,Visual Studio推出新版本,不是為了標新立異,或者什麼行銷方面的考量,而是,當前網站應用日新月異,行動裝置平台持續成長,微軟只能不斷改善Visual Studio來配合各種開發方法的應用。

因此,如果對初學者,如果只想用ASP.NET Web Form為工具開發網站,那麼,Visual Studio 2013/2015應該是最佳選擇,如果你想用最新的開發方法或是開發行動裝置應用程式,Visual Studio 2017是比較好的選擇。如果你用的是Apple Mac電腦,Visual Studio for Mac會是你的選擇。

但,基本上我會比較向於安裝Visual Studio 2015,因為VIsual Studio 2017己經轉變成以.NET Core為主的開發工具,有很多以前常見的應用方式到了Visual Studio 2017就不復存在,因為需要完整的.NET FrameWork環境才能使用。

Visual Studio 2017 新增專案

安裝好Visual Studio 2017,
https://ithelp.ithome.com.tw/upload/images/20180219/20017649LeVhbxfTgY.png
然後打開來,在檔案選單裏,選擇新增專案
https://ithelp.ithome.com.tw/upload/images/20180219/20017649FoOZQTZGZb.jpg
如下圖挑選ASP.NET Web應用程式(.NET Framework)
https://ithelp.ithome.com.tw/upload/images/20180219/20017649QurxEAB1WP.png
然後把專案名稱及存放的資料夾名稱指定好,按[確定],就到了下圖的專案範本選擇視窗:
https://ithelp.ithome.com.tw/upload/images/20180219/2001764908Yrf7AIcC.png
我只選了[Web Form]範本,注意上圖左下方的心參考,我只選用Web Form。
然後,點選右方中間的[點選認證]按鈕。出現下圖;
https://ithelp.ithome.com.tw/upload/images/20180219/20017649mVMxv1TLiu.png
這個視窗,主要是在確認網站的驗證機制要如何建制,有四個選項:

  1. 無驗證,就是不要使用驗證機制的網站。有些大師會選這個,然後再去引用jQuery的驗證機制。
  2. 個別使用者帳戶,這個就是ASP.NET本身的驗證機制,歷史悠久,但不好用。
  3. 工作或學校帳戶,這是指和AD整合驗證的機制。
  4. Windows驗證,這是指本機帳戶或IISServer上的本機帳戶驗證,但是,如果電腦有加入AD,也就是指AD帳戶。
    從上面的說明,第1項是不用維護任何帳戶資料,第3, 4項需要使用AD管理工具或本機控制台來維護帳號。第2項則是利用ASP.NET自己的管理工具來維護帳戶,這部份稍後再討論。
    因為我想自行管理網站的登入帳號,所以我上圖選用"個別使用者帳戶",然後按[確定]回到選擇範本的對話窗,再按[確定],Visual Studio 2017開始建立專案及其檔案。
    https://ithelp.ithome.com.tw/upload/images/20180219/20017649q1u05LOu4r.png
    專案建立完成,Visual STudio 2017就長成這個樣子:
    https://ithelp.ithome.com.tw/upload/images/20180219/20017649rU3Q3lukaV.png
    然後,我依個人習慣把測試網站的預設瀏覽器改成Internet Explorer:
    https://ithelp.ithome.com.tw/upload/images/20180219/200176490nljbCD6My.png
    因為我的電腦是Windows 10,於是預設是Microsoft Edge,但Edge我用不習慣,所以換一下。
    我們點一下上圖位置的Internet Explorer,就會建置專案,然後執行專案網站:
    https://ithelp.ithome.com.tw/upload/images/20180219/20017649Fo0FivFLwt.png
    上圖右上角的兩個選單,"登入"及"註冊"就是用來登入或建立新帳號用的。我們點選"登入":
    https://ithelp.ithome.com.tw/upload/images/20180219/20017649HLXM2RkPYt.png
    這就是ASP.NET預建的登入網頁,有很多大師覺得不美觀,就放棄使用了。
    但是現在我沒有帳號,怎麼辦呢?

如何使用ASP.NET預建的登入功能?

在上圖的登入視窗看一看,左下角不就有個"以新使用者身份註冊"的藍色字串連結,點下去就到了"註冊"頁面:
https://ithelp.ithome.com.tw/upload/images/20180219/20017649zEjQtWH0mr.png
在這裏,我們輸入郵箱為帳戶,再輸入密碼,密碼至少六個英數字,至少一個大寫一個符號,所謂強密碼是也。
https://ithelp.ithome.com.tw/upload/images/20180219/20017649bz0aaEiaZE.png
https://ithelp.ithome.com.tw/upload/images/20180219/200176498lWTqwzdnP.png
註冊完成也就登入了。
https://ithelp.ithome.com.tw/upload/images/20180219/20017649lXdZeuyBGL.png
看到右上方出現帳戶了嗎?右邊一個"登出"選單,點下去就回到一開始執行的網頁。
然後,問題來了,我都沒做什麼事,這些帳戶密碼存放在那裏?
結束網站執行回到Visual Studio 2017開發工具中:
https://ithelp.ithome.com.tw/upload/images/20180219/20017649fOSCKeeoKu.png
研究一下上圖左方的伺服器總管:
https://ithelp.ithome.com.tw/upload/images/20180219/20017649wVCDjRUnWF.png
展開資料連結,有個DefaultConnection(Test),這是我們新建專案的Web.Config檔案中設定好的預設資料庫連線,如下圖中紅框所指的程式碼:
https://ithelp.ithome.com.tw/upload/images/20180219/20017649d4tkdLb9Ab.png
這是本地檔案資料庫,在伺服器總管的資料連線,打開DefaultCOnnection下的資料表,就可以看到好幾個名稱以AspNet開頭的Tables,這些就是用來儲存帳戶資料的地方。
接下來,我們在Visual Studio 2017裏打開帳戶資料表:
https://ithelp.ithome.com.tw/upload/images/20180219/20017649DgYRKWVtuY.png
https://ithelp.ithome.com.tw/upload/images/20180219/20017649Z9bx2qPGV3.png
可以看到剛才用註冊頁面註冊的帳戶資料。
然後,接下來的問題是,如何在網站一開始執行時,自動因尚未登入而直接進入登入頁面呢?
https://ithelp.ithome.com.tw/upload/images/20180220/20017649UlDpvQPSEe.png
我在Default.aspx.cs的Page_Load()中加入上圖紅框中的程式碼。這樣一開始會檢測登入狀態,若尚未登入就會導向到登入頁面。我把程式碼貼在這裏,方便有興趣的邦友引用:

            if (!HttpContext.Current.User.Identity.IsAuthenticated)
            {
                Response.Redirect("~/Account/Login.aspx");
            }

另一個問題是,現在ASP.NET網站管理工具不能用了,怎麼辦呢?對大師來講是...自己刻一個來用。其實專案中己經有基本的程式可用。如下圖,在Accounts資料夾中。
https://ithelp.ithome.com.tw/upload/images/20180220/20017649CGW9LqyNIB.png
我們寫個網頁用GridView顥示及維護資料庫各個與驗證相關的資料表內容,參考上圖中的各支程式,我們可以很容易的寫出密碼加密與解密功能。

就分享到這裏囉,明天開工上班囉,祝各位新的一年工作順利,升官發財

/images/emoticon/emoticon62.gif


1 則留言

0
暐翰
iT邦大師 9 級 ‧ 2018-02-20 21:10:39

能感覺到他的有心學習
跟急迫性(來自公司)

現在MIS真的很苦命
/images/emoticon/emoticon67.gif

記得沒錯,他學程式
時間是下班後是
目的是為了轉行

我要留言

立即登入留言