第13章 會員管理與個人化程序 13-1 會員管理的基礎 13-2 啟用ASP.NET的會員管理 13-3 登入控制項

Presentation on theme: "第13章 會員管理與個人化程序 13-1 會員管理的基礎 13-2 啟用ASP.NET的會員管理 13-3 登入控制項"— Presentation transcript:

1 第13章 會員管理與個人化程序 13-1 會員管理的基礎 13-2 啟用ASP.NET的會員管理 13-3 登入控制項

2 13-1 會員管理的基礎 13-1-1 ASP.NET會員管理的基礎 13-1-2 ASP.NET表單基礎驗證

3 13-1-1 ASP.NET會員管理的基礎- 登入程序
不論網路商店、社群網站、聊天室或拍賣網站，使用者通常都需要註冊成為會員後，才能使用網站提供的服務，這類網站在進入前都需要執行登入程序，以確認使用者是合法的網站會員。 目前大部分的網站登入程序，都是在Web Form表單輸入使用者資料後，送到伺服器端執行確認，確認程序是檢查會員資料庫是否有此位會員，如果有，就表示是合法會員，才能取得授權來進入特定網頁。

4 13-1-1 ASP.NET會員管理的基礎- 使用者的種類
匿名訪客（Anonymous Visitors）：不需登入就可以進入網站的使用者，它不是會員，所以並不能使用會員專屬的網站服務，即進入會員才允許進入的網頁。 會員（Members）：需要登入且經過驗證程序確認身份的使用者，擁有權限可以使用會員的專屬服務，進入會員專屬網頁。 管理者（Administrators）：網站的超級使用者，它是網站的管理者，擁有權限來新增或刪除網站會員，和授予會員的權限。

5 13-1-1 ASP.NET會員管理的基礎- 會員管理的功能
儲存會員資料：因為會員需要確認身份才能進入網站，所以會員需要先註冊，然後將註冊資料儲存起來，以便檢查是否為合法會員。ASP.NET預設使用SQL Server Express資料庫來儲存會員資料。

6 13-1-2 ASP.NET表單基礎驗證- 驗證和授權
驗證（Authentication）：驗證是確認請求的程序，可以用來檢查使用者身份，通常是以使用者名稱和密碼來確認使用者的身份。 授權（Authorization）：授權是當使用者身份已經驗證後，可以授予擁有進入哪些網頁和資源的權限。

7 ASP.NET表單基礎驗證- 說明 ASP.NET的表單基礎驗證（Forms-based Authentication）是在1.0/1.1版就提供的驗證方式，它是使用Web Form表單來取得使用者名稱和密碼後，以Membership類別方法來檢查使用者身份，確認使用者是否允許進入網站，即執行使用者的登入程序。 會員資料庫可以使用web.config檔案、XML文件或資料庫來儲存會員資料，預設是使用SQL Server Express資料庫來儲存驗證所需的會員資料。

8 ASP.NET的會員管理功能 ASP.NET提供登入控制項建立相關註冊和登入表單，可以使用Membership API來驗證使用者，或角色（Roles）建立群組權限的會員管理，其提供的會員管理功能，如下所示： 使用者登入和會員管理控制項。 Membership API。 角色管理（Role Manager）。 Web介面的會員管理工具。

9 13-2 啟用ASP.NET的會員管理 13-2-1 建立會員專屬網頁的資料夾 13-2-2 啟用會員管理和建立會員資料庫
新增使用者 啟用與新增角色 建立角色權限的存取規則 指定使用者所屬的角色

10 建立會員專屬網頁的資料夾-說明 對於會員管理的ASP.NET網站來說，可以指定個別ASP.NET網頁或整個資料夾的權限，在實作上，大都是以資料夾為單位來管理眾多的ASP.NET網頁，例如：替會員專屬的ASP.NET網頁建立資料夾，只允許會員瀏覽的網頁就置於此資料夾。 一般來說，網站使用者可以分為三大類：匿名訪客可以瀏覽網站根目錄的ASP.NET網頁；會員專屬網頁是位在Member子資料夾；管理者是位在Admin子資料夾。

11 13-2-1 建立會員專屬網頁的資料夾- 建立資料夾
開啟「方案總管」視窗，在網站根目錄上，執行右鍵快顯功能表的【新增資料夾】指令，可以看到預設建立名為NewFolder?的子資料夾，如下圖所示：

12 啟用會員管理和建立會員資料庫- 說明 在Visual Studio 2015可以啟動ASP.NET網站管理工具，直接使用此工具程式來啟用會員管理和建立會員資料庫（請注意！需要安裝完整SQL Server 2014 Express版才能啟用會員管理） 。 因為Visual Studio 2015預設只安裝SQL Server Express LocalDB，ASP.NET會員管理需要使用完整SQL Server 2014 Express版，請自行上微軟網站下載和安裝來啟用會員管理。

13 啟用會員管理和建立會員資料庫方法 64位元版(SQLEXPR64_CHT.exe) 32位元版(SQLEXPR32_CHT.exe) 啟動 IIS Express (註: 將課本的\Ch13\StartASP.NETConfigurationalTool.bat 複製至IIS Express安裝目錄: C:\Program Files (x86)\IIS Express) 在瀏覽器輸入下列網址來進入ASP.NET網站管理工具 註: 請依實際使用狀況來修改。

14 13-2-2 啟用會員管理和建立會員資料庫- 步驟一
在Visual Studio 2015可以啟動Web網站管理工具，直接使用此工具來啟用會員管理和建立會員資料庫，如下圖所示：

15 13-2-2 啟用會員管理和建立會員資料庫- 步驟二

16 13-2-2 啟用會員管理和建立會員資料庫- 完成啟用
在完成啟用會員管理後就會返回Web網站管理工具，在下方「使用者」框看到網站已經啟用會員管理，但是目前並沒有任何使用者，如下圖所示： 2018/05/07

17 13-2-2 啟用會員管理和建立會員資料庫-web.config組態檔
在網站根目錄新增web.config組態檔，可以看到在<authentication>標籤啟用ASP.NET表單基礎驗證，如下所示： <system.web> <authentication mode="Forms" /> </system.web> 上述<authentication>標籤使用mode屬性指定驗證方式，屬性值Forms就是表單基礎驗證。

18 新增使用者 在啟用會員管理和建立會員資料庫後，我們就可以使用Web網站管理工具來新增使用者，如下圖所示：

19 啟用與新增角色-啟用角色 對於大量會員的ASP.NET網站來說，我們可以群組使用者成為角色，直接設定角色權限來快速建立會員網站所需的權限設定。筆者準備在ASP.NET網站啟用角色管理後，新增Admin和Member二種角色，如下圖所示： 啟用角色

20 啟用與新增角色-新增角色 在ASP.NET網站啟用角色管理後，新增Admin和Member二種角色，如下圖所示： 輸入角色名稱

21 13-4-4 啟用與新增角色-web.config組態檔
ASP.NET啟用角色就是在web.config組態檔加上<roleManager>標籤，enabled屬性true表示啟用角色管理，如下所示： <roleManager enabled="true" />

22 13-2-5 建立角色權限的存取規則- 新增存取規則
ASP.NET網站的角色權限主要是設定目錄的存取權限，例如：指定只有Member角色允許存取「Member」子目錄；Admin角色允許存取「Admin」子目錄，其步驟如下所示： 左邊框選【Member】目錄，右邊選角色【Member】和權限【允許】 選【Member】目錄，新增【所有使用者】和【拒絕】權限的規則

23 13-2-5 建立角色權限的存取規則- web.config組態檔
在「Member」目錄下就會新增web.config組態檔，並且在<authorization>標籤新增存取規則的<allow>和<deny>標籤，如下所示： <system.web> <authorization> <allow roles="Member" /> <deny users="*" /> </authorization> </system.web>

24 指定使用者加入的角色 在設定角色權限的存取規則後，就可以指定使用者加入的角色。例如：使用者joe和mary加入Member角色；tom加入Admin，如下圖所示：

25 13-3 登入控制項 13-3-1 Login控制項 13-3-2 LoginView、LoginStatus和 LoginName控制項
PasswordRecovery控制項 ChangePassword控制項 CreateUserWizard控制項

26 Login控制項-說明 Login控制項可以建立登入網站的表單，提供使用者名稱和密碼的標準登入表單。Login控制項的常用屬性說明，如下表所示：

27 13-3-1 Login控制項-範例網站 ASP.NET網站：Ch13_3_1
在ASP.NET網頁Login.aspx新增Login控制項後，更改相關屬性來建立會員登入網頁，如下圖所示： Login控制項

28 13-3-2 LoginView、LoginStatus和LoginName控制項-LoginStatus
LoginStatus控制項是用來顯示登入狀態，如為匿名使用者就顯示登入網站的超連結；如果已經登入就顯示登出網站超連結。LoginStatus控制項的常用屬性，如下表所示： LoginStatus控制項

29 13-3-2 LoginView、LoginStatus和LoginName控制項-LoginName

30 13-3-2 LoginView、LoginStatus和LoginName控制項-LoginView
LoginView控制項可以建立不同登入檢視的網頁內容，它是依據使用者是登入會員、匿名使用者和不同的角色，來顯示不同的網頁內容。換句話說，LoginView控制項可以建立網站首頁，依登入使用者的身份來顯示專屬的網頁內容。 在LoginView控制項的每一個RoleGroup控制項，可以使用Roles屬性定義一種角色的網頁內容，AnonymousTemplate樣板是建立匿名使用者看到的網頁內容；LoggedInTemplate樣板是登入網站會員顯示的內容。

31 13-3-2 LoginView、LoginStatus和LoginName控制項-新增RoleGroup控制項
開啟「LoginView工作」功能表，選【編輯RoleGroups】超連結，可以看到「RoleGroup集合編輯器」對話方塊。 新增角色

32 13-3-2 LoginView、LoginStatus和LoginName控制項-AnonymousTemplate
選【LoginView】控制項開啟「LoginView工作」功能表，在【檢視】欄選【AnonymousTemplate】，然後輸入匿名使用者顯示的網頁內容。

33 13-3-2 LoginView、LoginStatus和LoginName控制項-LoggedInTemplate
在「LoginView工作」功能表的【檢視】欄，選【LoggedInTemplate】，然後輸入登入使用者顯示的網頁內容，在換行後新增LoginName控制項，即[使用者名稱]。

34 13-3-2 LoginView、LoginStatus和LoginName控制項-角色樣板
在【檢視】欄選【RoleGroup[0] - Admin】，然後輸入Admin角色顯示的網頁內容，在換行後新增LoginName控制項。 在【檢視】欄選【RoleGroup[0] - Member】，然後輸入Member角色顯示的網頁內容，在換行後新增LoginName控制項。

35 13-3-2 LoginView、LoginStatus和LoginName控制項-範例網站
ASP.NET網站：Ch13_3_2 在ASP.NET網頁Default.aspx新增LoginStatus、LoginName和LoginView控制項，然後更改相關屬性值建立網站首頁，能夠依據使用者是登入會員、匿名使用者和不同角色，分別顯示不同的首頁內容，如下圖所示：

36 13-3-3 PasswordRecovery控制項- 說明
PasswordRecovery控制項可以自動連接ASP.NET會員管理機制，當使用者忘記密碼時，以密碼問題和答案來重新取得新密碼。不過，系統只能接受新密碼，並不能取回使用者設定的舊密碼。 因為PasswordRecovery控制項取得的新密碼是使用電子郵件寄送，所以在建立PasswordRecovery控制項前，需要先設定SMTP伺服器。 PasswordRecovery控制項

37 13-3-3 PasswordRecovery控制項- 設定SMTP伺服器
在「SMTP設定」框選【設定SMTP電子郵件設定】超連結，可以看到設定SMTP的Web Form表單，如右圖所示：

38 13-3-3 PasswordRecovery控制項- 範例網站
ASP.NET網站：Ch13_3_3 在ASP.NET網站設定SMTP伺服器的應用程式組態後，即可在PasswordRecovery.aspx網頁新增PasswordRecovery控制項和指定自動化格式，建立網站的密碼回復網頁，如下圖所示：

39 13-3-4 CreateUserWizard控制項-說明
在ASP.NET網頁新增CreateUserWizard控制項，就可以提供網站新增會員的功能。 CreateUserWizard 控制項

40 13-3-4 CreateUserWizard控制項-屬性

41 13-3-4 CreateUserWizard控制項-範例網站
ASP.NET網站：Ch13_3_4 在ASP.NET網頁CreateUserWizard.aspx新增CreateUserWizard控制項，並且設定自動化格式和相關屬性來完成控制項的建立，如右圖所示：

42 13-3-5 ChangePassword控制項-說明
在ASP.NET網頁新增ChangePassword控制項，就可以建立更改使用者密碼的功能，控制項的DisplayUsername屬性可以設定是否顯示使用者名稱的欄位。 ChangePassword 控制項

43 13-3-5 ChangePassword控制項-範例網站
ASP.NET網站：Ch13_3_5 在ASP.NET網頁ChangePassword.aspx新增ChangePassword控制項，並且設定自動化格式和相關屬性來完成控制項的建立，如右圖所示：

44 13-4 ASP.NET網站的個人化程序 13-4-1 個人化程序的基礎 13-4-2 定義Profile物件的屬性

45 個人化程序的基礎- 個人化的目的 個人化的最主要原因是基於營利考量，因為網站內容有些可能是付費內容，只允許付費會員存取，或是不同等級的會員擁有不同的權限，可以檢視不同的網頁內容。 個人化的最終目的是提供個人化網路經驗，網站能夠提供使用者網路使用經驗，例如：在Amazon買書時，網站能夠提供喜好圖書的建議清單，這是從會員網路消費經驗中，分析出的網路經驗。

46 個人化程序的基礎-個人化功能 識別使用者的身份：網站需要能夠識別出是匿名使用者或網站會員，並且提供機制可以監控會員在瀏覽網站過程中的需求，以便馬上提供回應。當然網站必須擁有會員管理功能，可以新增和管理使用者。 儲存使用者相關資訊：網站除了儲存使用者資料外，還需要儲存網路使用經驗的喜好和記錄資料，例如：色彩、外觀、有興趣主題、瀏覽或購買的商品清單等。 提供個人化經驗：個人化經驗除了依照使用者身份來提供不同的存取權限外，還包含自訂畫面、追蹤使用者瀏覽經驗和消費資訊等。

47 定義Profile物件的屬性-說明 Profile物件的屬性是在Web組態檔web.config定義，可以在Web應用程式儲存使用者的專屬資料。 ASP.NET提供相關機制，預設使用SQL Server Express資料庫來儲存這些資料，並且自動在跨網頁瀏覽時，讓ASP.NET網頁存取Profile物件儲存的資料。

48 13-4-2 定義Profile物件的屬性- 在web.config組態檔定義Profile物件屬性
<profile enabled="true"> <properties> <add name="Name" defaultValue="Mary Wang" type="String"/> <group name="Student"> <add name="StudentId" type="Int32"/> <add name="Name" type="String"/> <add name="Grade" type="Int32"/> </group> </properties> </profile>

49 13-4-2 定義Profile物件的屬性- Profile物件與ASP.NET會員管理
Profile物件與ASP.NET會員管理擁有密切的關係，因為Profile物件儲存的資料，預設是針對指定會員儲存的資料，如此，當使用者登入網站後，系統才能依據登入會員從資料庫取出對應的Profile物件。 為了方便測試本節Profile物件的ASP.NET網頁，網頁是位在「Member」子目錄，此目錄限制擁有Member角色權限的會員才能執行此目錄的ASP.NET網頁，例如：使用者joe。如果使用者尚未登入，就會自動轉址至Login.aspx要求先登入網站，Defalut.aspx是預設的首頁。

50 13-4-2 定義Profile物件的屬性- Profile物件與Session物件的差異
在第7章的Session物件可以儲存會員的使用者資訊，不過，Session物件儲存的資料只在目前的交談期有效，當交談期結束，下一次進入Web應用程式時，仍然需要重新輸入這些資料，資料並不會自動保留。 Profile物件能夠自動將使用者資料儲存在永久儲存媒體，預設是SQL Server Express資料庫，當下一次進入Web應用程式時，上一次進入建立或修改的Profile資料能夠自動取出，並且自動維護這些資料。

51 Profile物件的簡單屬性-定義 Profile物件的簡單屬性是指儲存單一資訊的屬性，在web.config檔案定義Name簡單屬性，如下所示： <properties> <add name="Name" defaultValue="Mary Wang" type="String"/> </properties>

52 13-4-3 Profile物件的簡單屬性-存取 在ASP.NET網頁可以使用程式碼來存取Profile物件的屬性值，如下所示：
lblOutput.Text = Profile.Name; Profile.Name = txtName.Text; 上述程式碼分別取出和設定Profile物件的Name屬性，因為Profile物件屬性會持續存在，我們可以在跨網頁瀏覽時，讓ASP.NET網頁存取Profile物件儲存的資料。

53 13-4-3 Profile物件的簡單屬性-範例網站
ASP.NET網站：Ch13_4_3 在ASP.NET網頁Member/Default.aspx使用TextBox控制項輸入使用者姓名後，指定Profile物件的Name屬性值且轉址至Member/Default2.aspx，然後在Member/Default2.aspx取出和顯示Profile物件的屬性值，如下圖所示：

54 Profile物件的群組屬性-定義 Profile物件的群組屬性儲存的是一組資訊，在web.config檔案已經定義Student群組屬性來儲存學生資訊，如下所示： <properties> <group name="Student"> <add name="StudentId" type="Int32"/> <add name="Name" type="String"/> <add name="Grade" type="Int32"/> </group> </properties>

55 13-4-4 Profile物件的群組屬性-存取 在ASP.NET網頁可以使用程式碼來存取Profile物件的屬性值，如下所示：
txtID.Text = Profile.Student.StudentId.ToString(); txtName.Text = Profile.Student.Name; txtGrade.Text = Profile.Student.Grade.ToString(); 上述程式碼取出Profile群組屬性Student的學生資訊StudentId、Name和Grade。

56 13-4-4 Profile物件的群組屬性-範例網站
ASP.NET網站：Ch13_4_4 在ASP.NET網頁Member/Default.aspx輸入學生資料後，就會設定Profile物件群組屬性且轉址到Member/Default2.aspx，然後在Member/Default2.aspx取出和顯示Profile物件的群組屬性值，如下圖所示：