Nhiều trang web chỉ dành cho những người đã đăng nhập (có nghĩa là, những người đã được chứng thực) mới xem được nội dung. Theo mặc định, ASP.NET cung cấp các mẫu web của dự án bao gồm các trang cho phép bạn thực hiện các công việc xác thực.
Dự án Web ASP.NET mẫu được minh họa trong phần giới thiệu này là mới trong Visual Studio 2010.
Bài này cho bạn thấy làm thế nào để sử dụng một mẫu dự án Web ASP.NET để tạo ra một trang web với chức năng đăng nhập cơ bản.
Nhiệm vụ minh họa trong phần giới thiệu này gồm:
• Tạo một trang web ASP.NET.
• Tạo một trang thành viên. Các trang web sẽ chỉ có thể truy cập để xác thực người dùng (người dùng đang đăng nhập).
• Sử dụng trang đăng ký, cho phép người dùng đăng ký và tạo một tài khoản mới.
• Đăng nhập và truy cập thông tin chỉ dành cho người dùng xác thực.
• Sử dụng trang thay đổi mật khẩu, cho phép người dùng có một tài khoản để thay đổi mật khẩu của họ.
• Làm trang truy cập thay đổi mật khẩu người dùng xác thực (nhưng chỉ để xác thực người dùng).
Điều kiện tiên quyết:
Để hoàn thành được bài này, cần:
Tạo một dự án Web Site
Bạn sẽ bắt đầu bằng cách tạo ra một trang web dự án mới Web ASP.NET. Các dự án mẫu mà bạn sử dụng bao gồm rất nhiều các yếu tố được yêu cầu để tạo ra một trang web có hỗ trợ xác thực.
Bài viết này sử dụng một dự án trang web. Bạn có thể sử dụng một dự án ứng dụng Web thay thế. Để biết thêm thông tin về sự khác biệt giữa các loại dự án Web, xem dự án ứng dụng web so với các dự án trang web .
Để tạo ra một trang ASP.NET Web mới
1. Bắt đầu Visual Studio hay Visual Web Developer.
2. Trong menu File, nhấp vào New Web Site. (Nếu bạn không thấy tùy chọn này, chọn New, và sau đó nhấp vào Web Site).
Hộp thoại New Web Site được hiển thị.
3. Trong Installed Templates, nhấp vào Visual Basic hoặc C# và sau đó chọn ASP.NET Web Site.
4. Trong hộp thoại Web Location, chọn File System và nhập vào tên của thư mục mà bạn muốn lưu giữ các trang của trang web. Ví dụ, nhập tên thư mục C:\Websites\Login và sau đó nhấn OK.
Visual Studio tạo ra các thư mục và mở các trang Web trong View Source. Lưu ý rằng trang web gốc chứa một số tập tin và thư mục bao gồm cả thư mục Account, một tập tin Web.config, các trang About.aspx và Default.aspx, và trang chủ Site.Master.
5. Nhấn phím Ctrl + F5 để chạy trang.
Trang chủ của trang web được hiển thị trong trình duyệt. Chú ý các mục trong menu (Home, About) và liên kết Log In.
6. Đóng trình duyệt.
Tạo trang chỉ dành cho Thành viên(Members)
Trong phần này, bạn sẽ tạo ra một trang thành viên. Chỉ có những người dùng đang đăng nhập (xác thực người dùng) có thể truy cập trang này. Bạn sẽ thêm một HyperLink kiểm soát trang chủ để chuyển hướng người dùng xác thực đến trang thành viên. Khi người dùng chưa đăng nhập (thành viên ẩn danh) kích liên kết thành viên, người dùng sẽ được chuyển đến trang đăng nhập nơi người dùng có thể đăng nhập hoặc tạo một tài khoản.
Để tạo trang chỉ dành cho Thành viên(Members)
1. Trong Solution Explorer, nhấp chuột phải vào thư mục Account và sau đó nhấp vào Add New Item.
Hãy chắc chắn rằng bạn đang tạo ra trang mới trong thư mục Account.
1. Trong hộp thoại New Web Sites, chọn Web Form.
2. Trong hộp văn bản Name, nhập MembersOnly.aspx.
3. Chọn hộp kiểm tra Select master page và sau đó nhấp vào Add.
Hộp thoại Select a Master Page được hiển thị.
4. Dưới Contents of folders, chọn Site.Master và sau đó nhấn OK.
Trang MembersOnly.aspx được tạo ra trong thư mục Account. Ttrang web sẽ trang nội dung cho trang Site.Master.
5. Trong Solution Explorer, nhấp vào trang MemberOnly.aspx để mở nó, và sau đó chuyển sang chế độ view Design.
6. Thêm nội dung vào trang chính.
Ví dụ, bạn có thể thêm "Chào mừng bạn đến với trang thành viên. Bạn đã đăng nhập thành công."
Ngoài các trang mà bạn đã tạo ra, thư mục Account có chứa các trang và các tập tin sau đây:
• Register.aspx. Trang này cho phép người dùng mới tạo tài khoản.
• Login.aspx. Trang này yêu cầu tên người dùng và mật khẩu.
• ChangePassword.aspx. Trang này cho phép người dùng đăng ký thay đổi mật khẩu của họ.
• ChangePasswordSuccess.aspx. Trang này được hiển thị khi người dùng thay đổi mật khẩu của họ thành công.
• Tập tin Web.config.
Theo mặc định, các trang trong thư mục Account không thể truy cập cho người dùng vô danh, ngoại trừ Register.aspx và các trang Login.aspx. Các thiết lập để xác định quyền truy cập vào các trang web trong thư mục Account được cấu hình trong file Web.config trong thư mục đó. Các thiết lập để xác định truy cập đến trang đăng nhập được cấu hình trong file Web.config gốc.
Tiếp theo, bạn sẽ thay đổi Menu điều khiển trên trang chủ và thêm một mục menu liên kết đến trang Member.
Để thêm một mục menu cho trang thành viên
1. Trong Solution Explorer, nhấp vào trang Site.Master để mở nó và sau đó chuyển sang chế độ view Design.
2. Chọn điều khiển Menu có chứa các mục trình đơn Home và About , và sau đó nhấp vào thẻ của điều khiển menu.
3. Dưới Menu Tasks, nhấp vào Edit Menu Items….
Menu Item Editor được hiển thị.
4. Dưới Items, nhấp vào nút Add a root item trên thanh công cụ.
Một mục mới được tạo ra trong cây menu.
5. Chọn New Item.
6. Trong cửa sổ Properties của Menu Item Editor, thiết lập thuộc tính Text to "Members Only".
7. Click NavigateUrl và sau đó nhấp vào nút dấu chấm lửng (...).
Hộp thoại Select URL được hiển thị.
8. Dưới Project folders, nhấp vào Account.
9. Dưới Contents of folder, chọn MembersOnly.aspx và sau đó nhấn OK.
10. Nhấn OK để đóng hộp thoại.
11. Lưu và đóng trang Site.Master.
12. Trong Solutions Explorer, kích chuột phải vào trang Default.aspx và sau đó nhấp vào Set as Start Page.
Tạo một tài khoản mới
Bởi vì bạn không có tài khoản, bạn phải đăng ký trước khi bạn có thể đăng nhập để truy cập trang thành viên. Người dùng nặc danh có thể truy cập trang chủ (Default.aspx) và trang About, nhưng nội dung cho người dùng xác thực trên trang chủ sẽ không thể truy cập được. Tương tự như vậy, nội dung trong thư mục Account (trừ cho trang đăng ký và trang đăng nhập) là không có sẵn cho người dùng nặc danh. Nếu người dùng nặc danh cố gắng truy cập vào nội dung được bảo vệ, họ được chuyển hướng đến trang đăng nhập.
Tạo một tài khoản mới
1. Nhấn phím Ctrl + F5 để chạy các trang web.
2. Click Members Only.
Trang đăng nhập được hiển thị.
3. Nhấp vào Register.
Register.aspx (Tạo một tài khoản mới) được hiển thị.
4. Nhập các thông tin được yêu cầu.
Ví dụ, bạn có thể nhập tên người dùng quang.it, quang.it@dngaz.com cho email, và mật khẩu. Theo mặc định, mật khẩu phải dài ít nhất sáu ký tự. Tên người dùng không yêu cầu ký tự không phải chữ số, và địa chỉ e-mail không phải là duy nhất.
5. Nhấp vào Create User.
Khi bạn hoàn tất việc đăng ký một tài khoản mới, bạn sẽ được chuyển hướng đến trang thành viên. Chú ý rằng tên người dùng của bạn được hiển thị bên cạnh Log Out.
6. Nhấp vào Log Out.
Bạn được chuyển hướng đến trang chủ.
7. Đóng trình duyệt.
Thay đổi mật khẩu
Trong phần này, bạn sẽ tạo ra một liên kết trên trang chủ để chuyển hướng người dùng đến trang thay đổi mật khẩu. Bạn sẽ sử dụng trang này để thay đổi mật khẩu của bạn khi bạn đang đăng nhập.
Để tạo liên kết đến trang thay đổi mật khẩu
1. Trong Solution Explorer, nhấp vào trang Site.Master và chuyển sang chế độ view Design.
2. Từ nút Standard của Toolbox, kéo một điều khiển HyperLink đến trang chủ và thả nó bên cạnh liên kết Log In.
Đối với phần này, nó không quan trọng nơi bạn đặt điều khiển HyperLink.
3. Trong cửa sổ Properties, thay đổi thuộc tính Text thành Change Password. Bạn có thể chấp nhận ID mặc định.
4. Trong cửa sổ Properties, nhấn NavigateUrl và nhấp vào nút dấu chấm lửng (...).
Hộp thoại Select URL hiển thị.
5. Dưới thư mục Project, nhấp vào Account.
6. Dưới Contents of folder, chọn ChangePassword.aspx và sau đó nhấn OK.
7. Nhấn phím Ctrl + F5 để chạy các trang.
Chú ý rằng liên kết Change Password có thể truy cập khi bạn không đăng nhập.
8. Nhấp Change Password.
Bạn được chuyển hướng đến trang đăng nhập bởi vì các trang thay đổi mật khẩu truy cập chỉ cho người sử dụng chứng thực.
9. Nhập tên người dùng và mật khẩu mà bạn đã tạo trước đó, và sau đó nhấp vào Log In.
Trang thay đổi mật khẩu được hiển thị.
10. Nhấp vào Log Out.
11. Khi bạn đang quay trở lại trang chủ, đóng trình duyệt.
Tiếp theo, bạn sẽ sửa đổi các liên kết Change Password để làm cho nó chỉ có thể truy cập cho người dùng đăng nhập. Bạn làm điều này bằng cách thêm các liên kết đến điều khiển HeadLoginView trên trang chủ.
Để làm cho liên kết thay đổi mật khẩu có sẵn để người dùng đăng nhập.
1. Trong Solution Explorer, nhấp đúp vào Site.master.aspx để mở nó, và sau đó chuyển sang chế độ view Design.
2. Xóa các liên kết Change Password mà bạn đã tạo trước đó.
3. Chuyển sang xem mã nguồn(View Source).
4. Từ nút Standard của Toolbox, kéo điều khiển HyperLink vào phần tử LoggedInTemplate bên trong đó là điều khiển LoginView.
5. Thiết lập thuộc tính Text để Change Password.
6. Sau thuộc tính runat="server", gõ "NavigateUrl =" và sau đó kích đúp vào Pick URL… từ danh sách pop-up.
Hộp thoại Select Project Item được hiển thị.
7. Trong thư mục Project , nhấp vào Account.
8. Theo thư mục Contents , chọn ChangePassword.aspx và sau đó nhấn OK.
Đánh dấu cho các liên kết sẽ tương tự như sau:
<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl="~/Account/ChangePassword.aspx">
Change Password
</asp:HyperLink>
Lưu ý rằng liên kết này không được hiển thị trong chế độ Design , bởi vì nội dung của phần tử LoggedInTemplate là không hiển thị theo mặc định.
Kiểm tra các trang web
Bây giờ bạn có thể kiểm tra các chức năng thay đổi mật khẩu của trang web.
Để kiểm tra trang thay đổi mật khẩu
1. Nhấn phím Ctrl + F5 để chạy các trang web.
Trang chủ được hiển thị, nhưng liên kết Change your password không thể nhìn thấy.
2. Nhấp vào Log In và nhập tên người dùng và mật khẩu của bạn.
Bạn được chuyển hướng đến trang chủ. Chú ý rằng tên của bạn và liên kết Change your password có thể nhìn thấy.
3. Nhấp vào Members Only.
Bạn được chuyển hướng đến trang thành viên.
4. Nhấp vào Change your password.
Trang thay đổi mật khẩu được hiển thị.
5. Nhập mật khẩu mới.
Nhấp Change Password. Nếu sự thay đổi thành công, trang thành công sẽ được hiển thị.
Kiểm tra mật khẩu mới
Tiếp theo, bạn sẽ sử dụng mật khẩu mới của bạn để đăng nhập một lần nữa và truy cập vào các trang thành viên.
Để kiểm tra mật khẩu mới
1. Nhấp vào Log Out. Bạn sẽ được chuyển đến trang chủ mà người dùng nặc danh nhìn thấy.
2. Nhấp vào Log In.
3. Nhập tên người dùng và mật khẩu mới của bạn và sau đó nhấp vào Log In.
Bạn được chuyển hướng đến trang chủ. Bây giờ bạn có thể truy cập nội dung đó là có sẵn để người dùng xác thực. .
4. Nhấp vào Members Only.
Bạn được chuyển hướng đến trang thành viên. Nếu bạn cố gắng đăng nhập với xác thực mật khẩu cũ của bạn sẽ thất bại.
5. Đóng trình duyệt.