Ngày hôm nay sẽ đi sâu vào từng trang quan trọng và cho biết chúng tương tác với nhau như thế nào, cũng như chúng sử dụng các lớp trong tầng nghiệp vụ ra sao. Ở bài này chúng ta cùng đi xây dựng trang đăng nhập nhé!
Từ phần này trở đi chúng ta sẽ không đi chi tiết phân tích từng dòng code, mà đi theo hướng chức năng, trình bày theo từng quy trình, chẳng hạn như quy trình đăng ký….
Chúng ta bắt đầu với tổng quan về file và cấu trúc file trong project của chúng ta.
I. Cấu trúc website
Bảy lớp được lưu trữ trong mục App_Code. Thư mục App_Data chứa hai CSDL: CSDL đăng nhập (ASPNETDB.MDF) và CSDL OnlineDiary(DiaryDB.MDF). Các trang cần phải đăng nhập trước khi xem được lưu trong thư mục SecureDiary. Thư mục gốc chứa các trang đăng nhập, đăng ký, lấy lại mật khẩu. Về cơ bản thì chúng ta cần phải đăng nhập thì mới có thể xem được mọi thứ.
II. Đăng ký, đăng nhập và bảo mật
Ứng dụng Online Diary của chúng ta sử dụng các điều kiểm đăng nhập có sẵn để giúp tiết kiệm thời gian hơn
- Login: Cho phép đăng nhập, xác nhận tên người dùng và mật khẩu
- LoginView: Cho phép hiển thị các template khác nhau dựa vào trạng thái người dùng có đăng nhập hay không cũng như vai trò thành viên của người đó
- PasswordRecovery: Cung cấp chức năng nhắc lại mật khẩu cho người dùng quên mật khẩu
- LoginStatus: HIển thị trạng thái người dùng, đăng nhập hay đăng xuất
- LoginName: Hiển thị tên người dùng hiện tại
- CreateUserWizard: Tạo người dùng mới trong vài bước đơn giản
- ChangePassword: Cho phép thay đổi mật khẩu
1. Đăng nhập
Trang SignOn.aspx chứa một điều kiểm Login. CSDL người dùng được tạo bằng các công cụ quản trị website. Khi hoàn tất ta có 1 CSDL tên ASPNETDB.MDF trong project.
Mã nguồn của control như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<asp:Login ID="Login1" runat="server" BackColor="#F7F6F3" BorderColor="#E6E2D8" BorderPadding="4" BorderStyle="Solid" BorderWidth="1px" CreateUserText="Bạn chưa có tài khoản? Nhắp vào đây để đăng ký!" CreateUserUrl="~/RegisterStart.aspx" DestinationPageUrl="~/SecureDiary/DiaryMain.aspx" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#333333" Height="197px" PasswordRecoveryText="Bạn quên mật khẩu?" PasswordRecoveryUrl="~/PasswordReminder.aspx" Style="z-index: 100; left: 78px; position: absolute; top: 55px" Width="315px"> <LoginButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284775" /> <TextBoxStyle Font-Size="0.8em" /> <TitleTextStyle BackColor="#5D7B9D" Font-Bold="True" Font-Size="0.9em" ForeColor="White" /> <InstructionTextStyle Font-Italic="True" ForeColor="Black" /> </asp:Login> |
Thuộc tính quan trọng cần lưu ý là DestinationPageUrl. Thuộc tính này sẽ xác định người dùng sẽ chuyển đến đâu khi họ nhập đúng UserName và Password.Trường hợp người dùng chưa có tài khoản thì đã có thuộc tính CreateUserUrl, đưa họ đến trang đăng ký. Và trường hợp người dùng quên mật khẩu thì có thuộc tính PasswordRecoveryUrl đưa người dùng đến trang lấy lại mật khẩu.
Mã lệnh duy nhất mà bạn cần viết trong sự kiện LoggedIn của control Login khi người dùng nhập tên và mật khẩu thành công:
|
1 2 3 4 5 |
Protected Sub Login1_LoggedIn(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Login1.LoggedIn Dim DiaryId As Integer = GetDiaryIdFromUserName(Login1.UserName) Session("DiaryId") = DiaryId End Sub |
Sự kiện này sử dụng tên ngừoi dùng để tìm DiaryId của người dùng trong csdl online Diary. Sau đó DiaryId được gán cho Session.
2. Đăng ký
Trang RegisterStart.aspx sử lý việc đăng ký người dùng mới. Giống như trang SignOn.aspx. Trang này sử dụng Control CreateUserWizard
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 |
<asp:CreateUserWizard ID="CreateUserWizard1" runat="server" BackColor="#F7F6F3" BorderColor="#E6E2D8" BorderStyle="Solid" BorderWidth="1px" Font-Names="Arial" Font-Size="Small" Style="z-index: 100; left: 58px; position: absolute; top: 43px" Height="164px" Width="330px" FinishDestinationPageUrl="~/SignOn.aspx" UserNameLabelText="Tên người dùng:" CreateUserButtonText="Tạo tài khoản" PasswordLabelText="Mật khẩu:" ConfirmPasswordLabelText="Nhập lại mật khẩu:" QuestionLabelText="Câu hỏi mật:" AnswerLabelText="Câu trả lời mật:" > <SideBarStyle BackColor="#5D7B9D" BorderWidth="0px" Font-Size="Small" VerticalAlign="Top" /> <SideBarButtonStyle BorderWidth="0px" Font-Names="Arial" ForeColor="White" /> <NavigationButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px" Font-Names="Arial" ForeColor="#284775" /> <HeaderStyle BackColor="#5D7B9D" BorderStyle="Solid" Font-Bold="True" Font-Size="Small" ForeColor="White" HorizontalAlign="Left" /> <CreateUserButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px" Font-Names="Arial" ForeColor="#284775" Font-Size="Small" /> <ContinueButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px" Font-Names="Arial" ForeColor="#284775" /> <StepStyle BorderWidth="0px" /> <TitleTextStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> <WizardSteps> <asp:CreateUserWizardStep runat="server"> <ContentTemplate> <table border="0" style="font-size: 100%; width: 100%; font-family: Arial; height: 164px; text-align: center;"> <tr> <td align="center" colspan="2" style="font-weight: bold; color: white; background-color: #5d7b9d; height: 24px;">Đăng ký tài khoản mới</td> </tr> <tr> <td align="right"> <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">Tên người dùng:</asp:Label> </td> <td align="left"> <asp:TextBox ID="UserName" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator> </td> </tr> <tr> <td align="right"> <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">Mật khẩu:</asp:Label> </td> <td align="left"> <asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox> <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password" ErrorMessage="Password is required." ToolTip="Password is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator> </td> </tr> <tr> <td align="right"> <asp:Label ID="ConfirmPasswordLabel" runat="server" AssociatedControlID="ConfirmPassword">Nhập lại mật khẩu:</asp:Label> </td> <td align="left"> <asp:TextBox ID="ConfirmPassword" runat="server" TextMode="Password"></asp:TextBox> <asp:RequiredFieldValidator ID="ConfirmPasswordRequired" runat="server" ControlToValidate="ConfirmPassword" ErrorMessage="Confirm Password is required." ToolTip="Confirm Password is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator> </td> </tr> <tr> <td align="right"> <asp:Label ID="EmailLabel" runat="server" AssociatedControlID="Email">E-mail:</asp:Label> </td> <td align="left"> <asp:TextBox ID="Email" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="EmailRequired" runat="server" ControlToValidate="Email" ErrorMessage="E-mail is required." ToolTip="E-mail is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator> </td> </tr> <tr> <td align="right"> <asp:Label ID="QuestionLabel" runat="server" AssociatedControlID="Question">Câu hỏi mật:</asp:Label></td> <td align="left"> <asp:TextBox ID="Question" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="QuestionRequired" runat="server" ControlToValidate="Question" ErrorMessage="Security question is required." ToolTip="Security question is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator> </td> </tr> <tr> <td align="right"> <asp:Label ID="AnswerLabel" runat="server" AssociatedControlID="Answer">Câu trả lời mật:</asp:Label> </td> <td align="left"> <asp:TextBox ID="Answer" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="AnswerRequired" runat="server" ControlToValidate="Answer" ErrorMessage="Security answer is required." ToolTip="Security answer is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator> </td> </tr> <tr> <td align="center" colspan="2"> <asp:CompareValidator ID="PasswordCompare" runat="server" ControlToCompare="Password" ControlToValidate="ConfirmPassword" Display="Dynamic" ErrorMessage="Hai mật khẩu không trùng nhau." ValidationGroup="CreateUserWizard1"></asp:CompareValidator> </td> </tr> <tr> <td align="center" colspan="2" style="color: red"> <asp:Literal ID="ErrorMessage" runat="server" EnableViewState="False"></asp:Literal> </td> </tr> </table> </ContentTemplate> </asp:CreateUserWizardStep> <asp:WizardStep ID="personalDetailsStep" runat="server" Title="User Details"> <table border="0" style="font-size: 100%; font-family: Arial; z-index: 100; left: 0px; position: absolute; top: 0px;" width="100%"> <tr> <td align="center" colspan="2" style="font-weight: bold; color: white; background-color: #5d7b9d; height: 24px;"> Thông tin cá nhân </td> </tr> <tr> <td align="right" style="height: 26px; width: 162px;"> <label for="UserName"> Tên:</label></td> <td style="width: 235px; height: 26px"> <asp:TextBox ID="firstNameTextBox" runat="server" CausesValidation="True"></asp:TextBox> </td> </tr> <tr> <td align="right" style="width: 162px"> <label for="Password"> Họ và chữ lót:</label></td> <td style="width: 235px"> <asp:TextBox ID="lastNameTextBox" runat="server" CausesValidation="True"></asp:TextBox> </td> </tr> <tr> <td align="center" colspan="2" style="height: 18px"> </td> </tr> <tr> <td align="center" colspan="2" style="color: red"> </td> </tr> </table> </asp:WizardStep> <asp:CompleteWizardStep runat="server"> <ContentTemplate> <table border="0" style="font-size: 100%; font-family: Arial; z-index: 100; left: 0px; position: absolute; top: 0px;" width="100%"> <tr> <td align="center" colspan="2" style="font-weight: bold; color: white; background-color: #5d7b9d; text-align: center;">Hoàn tất</td> </tr> <tr> <td style="text-align: center">Tài khoản của bạn đã được tạo.</td> </tr> <tr> <td align="right" colspan="2"> <asp:Button ID="ContinueButton" runat="server" BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px" CausesValidation="False" CommandName="Continue" Font-Names="Arial" ForeColor="#284775" Text="Continue" ValidationGroup="CreateUserWizard1" /> </td> </tr> </table> </ContentTemplate> </asp:CompleteWizardStep> </WizardSteps> </asp:CreateUserWizard> |
Đoạn code này nhìn có vẻ dài dòng nhưng hầu hết là thiết lập style cho trang này. Thuộc tính mà bạn cần quan tâm là FinishDestinationPageUrl. Đây là trang người dùng chuyển đến khi đăng ký hoàn tất.
CreateUserWizard hoạt động dựa trên cơ chế từng bước một. Phải có ít nhất một bước cho phép người dùng nhập tên đăng nhập và mật khẩu.
Bước thứ hai được hiển thị sau khi người dùng đăng ký hoàn tất
Màn hình này yêu cầu nhập tên và người dùng. Khi đó, tùy bạn lưu dữ liệu ở đâu, quan trọng là code trong nút button FinishButtonClick của CreateUserWizard
|
1 2 3 4 5 6 7 8 9 10 11 12 |
Protected Sub CreateUserWizard1_FinishButtonClick(ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) _ Handles CreateUserWizard1.FinishButtonClick Dim myTextBox As TextBox Dim UserName, FirstName, LastName myTextBox = CreateUserWizard1.FindControl(“firstNameTextBox”) FirstName = myTextBox.Text myTextBox = CreateUserWizard1.FindControl(“lastNameTextBox”) LastName = myTextBox.Text UserName = CreateUserWizard1.UserName OnlineDiary.InsertDiary(UserName, FirstName, LastName) End Sub |
Bước này tạo một nhật ký mới và lưu họ tên người dùng. UserName được lấy từ thuộc tính UserName trong điều kiểm trên.
3. Nhắc lại mật khẩu
Bạn có thể tạo tính năng nhắc lại mật khẩu bằng điều kiểm PasswordRecovery. Bạn viết mã cho sự kiện SendingMail như sau
|
1 2 3 4 5 |
Protected Sub PasswordRecovery1_SendingMail(ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.MailMessageEventArgs) _ Handles PasswordRecovery1.SendingMail returnToLogOnHyperLink.Visible = True End Sub |
Sự kiện sendingMail phát sinh khi người dùng nhấn nút gửi email, và hiển thị liên kết trở về màn hình đăng nhập. Bạn cần cấu hình SMTP server để gửi email nhắc mật khẩu. Khi SMTP được cài đặt bạn thêm đoạn mã sau vào giữa thẻ < configuration > trong web.config
|
1 2 3 4 5 6 7 |
<system.net> <mailSettings> <smtp from=“admin@OnlineDiary.com”> <network host=“localhost” password=“” userName=“” /> </smtp> </mailSettings> </system.net> |
