Generate the Client Side Hash Password Via MD5 Algorithm and Saving it to Database

Introduction

This article shows how to convert a plain password to a hashed password using the MD5 algorithm on the client side and save it to the database.

For the demonstration, I will do,

1. Create a table in the database to store the login credentials of the user.
2. Create a website and add an MD5 conversion file of JavaScript.
3. Add a page on the website with 2 textboxes for User ID and Password and a save button.
4. Add a reference to the MD5 conversion file on the page and create a JavaScript function to convert the plain password to the hashed password.
5. Add the code on the page load for adding JavaScript function via an attribute add of the save button and on the button click event save the data.

Step 1. Create a table named "LoginTable" in the database to store the login credentials of the user.

CREATE TABLE LoginTable
(
    UserID varchar(10) primary key,
    pwd varchar(50)
)

Step 2. Create a website and add an MD5 conversion file of JavaScript.

1. Create an empty website named "LoginCredentials".
   
2. Add a new folder in the root and name it "Scripts". Add the "md5.js" into the "Scripts" folder.

Note. You can find the "md5.js" in the attached file.

Step 3. Add a page on the website with 2 textboxes for User ID and Password and a save button.

1. Add a page named "SaveData.aspx".
   
2. Add some controls on the page like:
   • A text box for user id is named "txtUserID".
   • A text box for password named "txtpwd" with TextMode="Password".
   • Button for saving the data named "btn_save" with "onclick" event.
     

Step 4. Add a reference to the MD5 conversion file on the page and create a JavaScript function to convert the plain password to the hashed password.

1. Add the reference of the MD5 conversion file on the page.

   <script src="Scripts/md5.js"></script>

   Markup

   Copy
2. Create a JavaScript function to convert the plain password to the hashed password in the "head" section of the page.

   <script type="text/javascript">
       function GeneratePwd() {
           if (document.getElementById("txtpwd").value != "") {
               document.getElementById("txtpwd").value = hex_md5(document.getElementById("txtpwd").value);
           }
       }
   </script>

   JavaScript

   Copy

Note. The "hex_md5" function exists in the "md5.js" file.

Step 5. Add the code on the page load for adding JavaScript function via an attribute add of the save button and on the button click event to save the data.

1. Add the JavaScript function via an attribute add of the save button.

   protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
       {
           // Add the JS function call to button with a parameter
           btn_Save.Attributes.Add("onclick", "return GeneratePwd();");
       }
   }

   C#

   Copy
2. Save the data into the database on the save button click event.

   protected void btn_Save_Click(object sender, EventArgs e)
   {
       if (txtUserID.Text != "" && txtpwd.Text != "")
       {
           // Insert the Data in the Table
           using (SqlConnection connection = new SqlConnection())
           {
               connection.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ToString();
               connection.Open();
               SqlCommand cmd = new SqlCommand();
               cmd.Connection = connection;
               string commandText = "Insert into LoginTable values ('" + txtUserID.Text + "','" + txtpwd.Text + "')";
               cmd.CommandText = commandText;
               cmd.CommandType = CommandType.Text;
               cmd.ExecuteNonQuery();
               cmd.Dispose();
               connection.Close();
               Response.Write("Data has been Added");
           }
       }
   }

   C#

   Copy

At Run Time

After running the page, type the user ID and password.

Note. Here User ID is "Admin" and the password is "abcd1234".

Result

Now the output in the database is as you can see.