Cấp bậc tác giả:

DOTNET

Xây dựng trang đăng nhập trong asp.net - C#

Được viết bởi QuangIT ngày 13/08/2012 lúc 07:48 PM
Trong bài viết này mình sẽ hướng dẫn các bạn làm trang đăng nhập cho website hoặc ứng dụng. Đây là vấn đề mà mình thấy nhiều bạn còn gặp khó khắn và hỏi trên các diễn đàn.
  • 0
  • 26519

Xây dựng trang đăng nhập trong asp.net - C#

Trong bài viết này mình sẽ hướng dẫn các bạn làm trang đăng nhập cho website hoặc ứng dụng. Đây là vấn đề mà mình thấy nhiều bạn còn gặp khó khắn và hỏi trên các diễn đàn.
Khi đăng nhập bạn cần Form đăng nhập bao gồm TenDangNhap và Mật khẩu. Khi người dùng nhập các thông tin đúng và đăng nhập bạn cần kiểm tra các thông tin này, nếu hợp lệ sẽ cho phép chuyển trang tiếp theo bằng việc khai báo và sử dụng các biến Session. Để thực hiện được trước tiên bạn cần tạo Table trong database có chứa các thông tin cần đăng nhập như sau:
Trong bài viết này mình cần quan tâm tới các trường TenDangNhap - Tên đăng nhập, MatKhau - Mật khẩu đã được mã hóa, TrangThai - Trạng thái của TenDangNhap mình phân tích sẽ có 3 trạng thái đó là: 1-Bình thường, 2 - Trạng thái khóa, 0 - Yêu cầu đổi mật khẩu. Còn các trường khác như MaPhongBan, MaQuyen, ... mình sẽ nói ý nghĩa và sử dụng của các trường này ở bài sau về vấn đề phân quyền ứng dụng. Ta sẽ cần viết các thủ tục trong SQL như sau:
1. Store Procedure kiểm tra đăng nhập
 /*Create by: hungbv@hmweb.com.vn
Muc đích: Kiểm tra thông tin đăng nhập có hợp lệ không
 Đầu vào:
   TenDangNhap
   MatKhau
 Đầu ra: 
  - Neu =1 -> Sai tên đăng nhập
         - Neu =2 -> Sai mật khẩu
         - Neu =3 -> Tên đăng nhập đang bị khóa
         - Neu =4 -> Phải đổi mật khẩu trước khi đăng nhập
         - Neu =0 -> Tiến hành đăng nhập
*/ 
CREATE PROCEDURE  [dbo].[spTB_DangNhap_KiemTraDangNhap]
@TenDangNhap nvarchar(50), 
@MatKhau nvarchar(150)
AS
BEGIN
 DECLARE @OutPut int
 DECLARE @KiemTraTenDangNhap int
 DECLARE @KiemTraMatKhau int
 DECLARE @TrangThai int 
 SELECT @KiemTraTenDangNhap=isnull(Count(tdn.TenDangNhap),0) 
  FROM TB_DangNhap tdn 
  WHERE tdn.TenDangNhap=@TenDangNhap
 SELECT @TrangThai =isnull(tdn.TrangThai ,0)
  FROM TB_DangNhap tdn 
  WHERE tdn.TenDangNhap=@TenDangNhap
 IF @KiemTraTenDangNhap=0 
  SET @OutPut=1 -- Sai TenDangNhap
 ELSE
 BEGIN
  SELECT @KiemTraMatKhau =isnull(count(*),0) 
   FROM TB_DangNhap tdn 
  WHERE tdn.TenDangNhap=@TenDangNhap 
   AND tdn.MatKhau=@MatKhau
  IF @KiemTraMatKhau=0
   SET @OutPut=2 -- Sai mật khẩu
  ELSE
   BEGIN
      IF @TrangThai=0
    SET @OutPut=4 -- Phải đổi mật khẩu
      ELSE
    BEGIN
       IF @TrangThai=2
    -- TenDangNhap đang bị khóa 
       SET @OutPut=3 
       ELSE
     SET @OutPut=0
    END
   END
 END
 SELECT @OutPut AS KetQua
END 
Trong Store trên bạn thấy ứng với các thông tin đăng nhập bạn nhập vào đúng hay sai thì Store đều trả về cho bạn giá trị tương ứng.
Tiếp theo ta sẽ xây dựng Form đăng nhập bao gồm các textbox và button  trong trang aspx như sau: 
2. Các thành phần cần thiết của Form DangNhap.aspx
Trong Form ta sẽ cần các Textbox txtUserName, txtPassword và các RequiredFieldValidator yêu cầu các trường này không được trống
<asp:TextBox 
 ID="txtUserName"  
 runat="server" 
 CssClass="login_TextForm" 
 Width="140px" />
<asp:RequiredFieldValidator 
 ID="RequiredFieldValidator1" 
 runat="server" 
 ControlToValidate="txtUserName"
 Display="Dynamic" 
 Font-Size="8pt">(*)
</asp:RequiredFieldValidator>

<asp:TextBox ID="txtPassword" 
 runat="server" 
 CssClass="login_TextForm" 
 TextMode="Password" 
 Width="140px" />
<asp:RequiredFieldValidator 
 ID="RequiredFieldValidator2" 
 runat="server" 
 ControlToValidate="txtPassword"
        Display="Dynamic" 
 Font-Size="8pt">(*)
</asp:RequiredFieldValidator>

<asp:Button 
 ID="btnLogin" 
 runat="server" 
 CssClass="textbox" 
 Text="Đăng nhập" 
 Font-Bold="False" 
 OnClick="btnLogin_Click" />
 Form mà mình xây dựng có hình ảnh như minh họa sau:
Tiếp theo chúng ta cần viết các hàm trong trang DangNhap.aspx.cs như sau:
3. Hàm mã hóa chuỗi mật khẩu nhập vào.
Trong Database của bạn khi lưu thông tin đăng nhập bạn cũng cần lưu mật khẩu dưới dạng mã hóa như của hàm này. Ở đây mình sử dụng kiểu mã hóa SHA1 của lớp System.Security.Cryptography hàm được viết như sau: (Bạn cần khai báo using ...  các lớp cần sử dụng tương ứng)
public string MaHoaMatKhau(string password)
{
    UnicodeEncoding encoding = new UnicodeEncoding();
    Byte[] hashBytes = encoding.GetBytes(password);
    // Compute the SHA-1 hash
    SHA1CryptoServiceProvider sha1 = new SHA1CryptoServiceProvider();
    Byte[] cryptPassword = sha1.ComputeHash(hashBytes);
    return BitConverter.ToString(cryptPassword);
}
 Tiếp theo chúng ta cần viết các hàm để thực thi Store đã viết ở trên (Nếu các bạn dùng VS2008 thì có thể dùng Linq để thực hiện dễ dàng hơn. Vì ở đây trong bài viết mình không đưa Database lên nên mình chỉ minh họa bằng các hàm như sau)
4. Viết các hàm thực thi Store Kiểm tra đăng nhập
private static DataSet ThucThiStore_DataSet(
    string StoredProcedure, 
    params SqlParameter[] Parameters)
{
    string ConnectionString = 
    @"Server =.\SQL2005;Initial Catalog=DatabaseName;User ID=sa;Password=***"; 
    SqlConnection Conn = new SqlConnection(ConnectionString);
    SqlCommand Command = new SqlCommand(StoredProcedure, Conn);
    if (Parameters != null)
    {
        Command.Parameters.Clear();
        Command.Parameters.AddRange(Parameters);
    }
    DataSet ds = new DataSet(); SqlDataAdapter da = 
        new SqlDataAdapter(StoredProcedure, Conn);
    Command.CommandType = CommandType.StoredProcedure;
    da.SelectCommand = Command;
    try
    {
        Conn.Open();
        da.Fill(ds);
    }
    finally
    {
        if (Conn.State == ConnectionState.Open)
            Conn.Close();
        Conn.Dispose();
    }
    return ds;
}
private DataTable StoreToDataTable(
    string TenDangNhap, 
    string MatKhau)
{
    SqlParameter[] arrParam = {
            new SqlParameter("@TenDangNhap", SqlDbType.NVarChar),
            new SqlParameter("@MatKhau", SqlDbType.NVarChar)
            };
    arrParam[0].Value = TenDangNhap;
    arrParam[1].Value = MatKhau;
    return ThucThiStore_DataSet("spTB_DangNhap_KiemTraDangNhap", arrParam).Tables[0];
}
Trong trang DangNhap.aspx.cs bạn cần viết các hàm để kiểm tra và điều hướng người dùng nếu họ đăng nhập đúng như sau: (Tham khảo thêm bài viết sau để hiểu hơn về cách dùng Dataset và Datatable với Store)
5. Viết các hàm kiểm tra và điều hướng người dùng
protected void Page_Load(object sender, EventArgs e)
{
    if (Session["TenDangNhap"] != null || Session["MatKhau"] != null)
    {
        Response.Redirect("Default.aspx");
    }
}
protected void btnLogin_Click(object sender, EventArgs e)
{
    KiemTraNhap(txtUserName.Text + "", MaHoaMatKhau(txtPassword.Text).Trim());
}

private void KiemTraNhap(string TenDangNhap, string MatKhau)
{
   DataTable dtb = StoreToDataTable(TenDangNhap, MatKhau);
    int num = 0;
    if (dtb.Rows.Count > 0)
    {
        num = int.Parse("0" + dtb.Rows[0][0]);
        switch (num)
        {
            case 0: // Khai báo Session cho phép đăng nhập
                Session["TenDangNhap"] = txtUserName.Text.ToString().ToLower();
                Session["MatKhau"] = MaHoaMatKhau(txtPassword.Text);
  Response.Redirect("Default.aspx");
                break;
            case 1: //Thông báo tên đăng nhập không tồn tại
                ScriptManager.RegisterStartupScript(this, this.GetType(), "redirectMe", "alert('Lỗi: Tên đăng nhập không tồn tại');", true);
                break;
            case 2: // thông báo sai mật khẩu
                ScriptManager.RegisterStartupScript(this, this.GetType(), "redirectMe", "alert('Lỗi; Mật khẩu đăng nhập không đúng!');", true);
                break;
            case 3: //thông báo TenDangNhap đã bị khóa
                ScriptManager.RegisterStartupScript(this, this.GetType(), "redirectMe", "alert('Lỗi: Tên đăng nhập này đã bị khóa!');", true);
                break;
            case 4: // Thông báo phải đổi mật khẩu và chuyển người dùng đến trang DoiMatKhau.aspx
                ScriptManager.RegisterStartupScript(this, this.GetType(), "redirectMe", "alert('Bạn phải đổi mật khẩu trước khi đăng nhập!');location.href='DoiMatKhau.aspx?userid=" + TenDangNhap + "'", true);
                break;
        }
    }
    dtb.Dispose();
}
Phân tích các hàm trên bạn thấy rằng trong hàm Page_Load sẽ kiểm tra nếu đã tồn tại các Session bạn sẽ chuyển hướng người dùng đến trang Default.aspx. Hàm thực hiện sự kiện click của nut button bạn chỉ cần gọi hàm KiemTraNhap, Trong hàm kiểm tra nhập sẽ thực hiện việc xác nhận thông tin, chuyển hướng người dùng hoặc đưa ra các thông báo tương ứng nếu thông tin đăng nhập sai. Sau đây là video demo kết quả đã làm được

Nguồn bài viết: hmweb

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML