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

Theo http://hmweb.com.vn

Chúc bạn thành công