Introduction

In this blog, I will demonstrate how to create user registration form with an encrypted password using ASP.NET step by step and save the encrypted password in a database table.

Step 1

Open SQL Server 2014 and create a database table UserRegistration.

  1. CREATE TABLE [dbo].[UserRegistration](
  2. [ID] [int] IDENTITY(1,1) NOT NULL,
  3. [Name] [nvarchar](50) NULL,
  4. [Email] [nvarchar](50) NULL,
  5. [PhoneNumber] [nvarchar](50) NULL,
  6. [Password] [nvarchar](50) NULL,
  7. [Created] [datetime] NULL,
  8. CONSTRAINT [PK_UserRegistration] PRIMARY KEY CLUSTERED
  9. (
  10. [ID] ASC
  11. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
  12. ) ON [PRIMARY]
  14. GO
  16. CREATE procedure [dbo].[spRegister]
  17. (
  18. @Name nvarchar(50),
  19. @Email nvarchar(50),
  20. @PhoneNumber nvarchar(50),
  21. @Password nvarchar(50),
  22. @Created datetime
  23. )
  24. as
  25. begin
  26. insert into [dbo].[UserRegistration](Name,Email,PhoneNumber,Password,Created)
  27. values(@Name,@Email,@PhoneNumber,@Password,GETDATE())
  28. end
ASP.NET

Step 2

Open Visual Studio 2015 to create an empty web application project and give it a meaningful name. Right-click or double-click on web config file and check for database connection in it.

  1. <connectionStrings>
  2. <add name="DBCS" connectionString="data source=DESKTOP-M021QJH\SQLEXPRESS; database=SampleDB; integrated security=true;"/>
  3. </connectionStrings>

Add the below line of code if you get a validation error.

  1. <appSettings>
  2. <add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />
  3. </appSettings>

Step 3

Right-click on the project, select "Add", choose web form, and name it RegisterForm.

Add script and bootstrap 4 style plugin files.

  1. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  2. <link href="Content/bootstrap.min.css" rel="stylesheet" />
  3. <script src="scripts/jquery-3.3.1.min.js"></script>
  4. <script src="scripts/bootstrap.min.js"></script>
  5. <style>
  6. .bottom {
  7. margin-bottom: 5px !important;
  8. }
  9. </style>

Design the web form using textbox control, button control, and validation control. Then, apply respective bootstrap 4 classes.

  1. <body>
  2. <form id="form1" runat="server">
  3. <div class="container py-4">
  4. <div class="col-md-5 offset-md-3">
  5. <div class="card card-outline-secondary rounded-0">
  6. <div class="card-header bg-success rounded-0">
  7. <h4 class="text-center text-uppercase text-white">Registration</h4>
  8. </div>
  9. <div class="card-body">
  10. <div class="form-group bottom">
  11. <label>Name</label>
  12. <div class="input-group">
  13. <div class="input-group-prepend">
  14. <div class="input-group-text"><i class="fa fa-user"></i></div>
  15. </div>
  16. <asp:TextBox ID="txtName" runat="server" CssClass="form-control"></asp:TextBox>
  17. </div>
  18. <asp:RequiredFieldValidator ID="rfvName" ControlToValidate="txtName" CssClass="text-danger" runat="server" ErrorMessage="Please enter name"></asp:RequiredFieldValidator>
  19. </div>
  20. <div class="form-group bottom">
  21. <label>Email</label>
  22. <div class="input-group">
  23. <div class="input-group-prepend">
  24. <div class="input-group-text"><i class="fa fa-envelope"></i></div>
  25. </div>
  26. <asp:TextBox ID="txtEmail" runat="server" CssClass="form-control"></asp:TextBox>
  27. </div>
  28. <asp:RequiredFieldValidator ID="rfvEmail" Display="Dynamic" ControlToValidate="txtEmail" CssClass="text-danger" runat="server" ErrorMessage="Please enter email address"></asp:RequiredFieldValidator>
  29. <asp:RegularExpressionValidator ID="revEmail" ControlToValidate="txtEmail" CssClass="text-danger" runat="server" ErrorMessage="Enter valid email" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
  30. </div>
  31. <div class="form-group bottom">
  32. <label>Phone Number</label>
  33. <div class="input-group">
  34. <div class="input-group-prepend">
  35. <div class="input-group-text"><i class="fa fa-phone"></i></div>
  36. </div>
  37. <asp:TextBox ID="txtPhoneNumber" runat="server" CssClass="form-control"></asp:TextBox>
  38. </div>
  39. <asp:RequiredFieldValidator ID="rfvPhoneNumber" Display="Dynamic" ControlToValidate="txtPhoneNumber" CssClass="text-danger" runat="server" ErrorMessage="Please enter phone number"></asp:RequiredFieldValidator>
  40. <asp:RegularExpressionValidator ID="revPhoneNumber" ControlToValidate="txtPhoneNumber" CssClass="text-danger" runat="server" ErrorMessage="Enter valid phone number" ValidationExpression="[0-9]{10}"></asp:RegularExpressionValidator>
  41. </div>
  42. <div class="form-group bottom">
  43. <label>Password</label>
  44. <div class="input-group">
  45. <div class="input-group-prepend">
  46. <div class="input-group-text"><i class="fa fa-lock"></i></div>
  47. </div>
  48. <asp:TextBox ID="txtPassword" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>
  49. </div>
  50. <asp:RequiredFieldValidator ID="rfvPassword" ControlToValidate="txtPassword" CssClass="text-danger" runat="server" ErrorMessage="Please enter password"></asp:RequiredFieldValidator>
  51. </div>
  52. <div class="form-group bottom">
  53. <label>Confirm Password</label>
  54. <div class="input-group">
  55. <div class="input-group-prepend">
  56. <div class="input-group-text"><i class="fa fa-lock"></i></div>
  57. </div>
  58. <asp:TextBox ID="txtConfirmPassword" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>
  59. </div>
  60. <asp:CompareValidator ID="CompareValidator1" ControlToCompare="txtPassword" Display="Dynamic" ControlToValidate="txtConfirmPassword" CssClass="text-danger" runat="server" ErrorMessage="Password does not match"></asp:CompareValidator>
  61. <asp:RequiredFieldValidator ID="rfvConfirmPassword" ControlToValidate="txtConfirmPassword" CssClass="text-danger" runat="server" ErrorMessage="Please enter password"></asp:RequiredFieldValidator>
  62. </div>
  63. <div class="form-group">
  64. <asp:Button ID="btnRegiter" CssClass="btn btn-success rounded-0 btn-block" runat="server" Text="Register" OnClick="btnRegiter_Click" />
  65. </div>
  66. <asp:Label ID="lblMessage" runat="server"></asp:Label>
  67. </div>
  68. </div>
  69. </div>
  70. </div>
  71. </form>
  72. </body>

Step 4

Double-click on the "Register" button and write the following C# code.

Add the following namespace.

  1. using System.Configuration;
  2. using System.Data;
  3. using System.Data.SqlClient;
  4. using System.Security.Cryptography;
  5. using System.IO;
  6. using System.Text;

Complete code

  1. using System;
  2. using System.Configuration;
  3. using System.Data;
  4. using System.Data.SqlClient;
  5. using System.Security.Cryptography;
  6. using System.IO;
  7. using System.Text;
  9. namespace UserRegistration_Demo
  10. {
  11. public partial class RegisterForm : System.Web.UI.Page
  12. {
  13. protected void Page_Load(object sender, EventArgs e)
  14. {
  15. if (!IsPostBack)
  16. {
  17. ClearTexbox();
  18. }
  19. }
  21. private void ClearTexbox()
  22. {
  23. txtName.Text = string.Empty;
  24. txtEmail.Text = string.Empty;
  25. txtPhoneNumber.Text = string.Empty;
  26. }
  28. private string Encrypt(string clearText)
  29. {
  30. string EncryptionKey = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789";
  31. byte[] clearBytes = Encoding.Unicode.GetBytes(clearText);
  32. using (Aes encryptor = Aes.Create())
  33. {
  34. Rfc2898DeriveBytes pdb = new Rfc2898DeriveBytes(EncryptionKey, new byte[] { 0x49, 0x76, 0x61, 0x6e, 0x20, 0x4d, 0x65, 0x64, 0x76, 0x65, 0x64, 0x65, 0x76 });
  35. encryptor.Key = pdb.GetBytes(32);
  36. encryptor.IV = pdb.GetBytes(16);
  37. using (MemoryStream ms = new MemoryStream())
  38. {
  39. using (CryptoStream cs = new CryptoStream(ms, encryptor.CreateEncryptor(), CryptoStreamMode.Write))
  40. {
  41. cs.Write(clearBytes, 0, clearBytes.Length);
  42. cs.Close();
  43. }
  44. clearText = Convert.ToBase64String(ms.ToArray());
  45. }
  46. }
  47. return clearText;
  48. }
  50. protected void btnRegiter_Click(object sender, EventArgs e)
  51. {
  52. try
  53. {
  54. string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
  55. using (SqlConnection con = new SqlConnection(CS))
  56. {
  57. SqlCommand cmd = new SqlCommand("spRegister", con);
  58. cmd.CommandType = CommandType.StoredProcedure;
  59. con.Open();
  60. cmd.Parameters.AddWithValue("@Name", txtName.Text.Trim());
  61. cmd.Parameters.AddWithValue("@Email", txtEmail.Text.Trim());
  62. cmd.Parameters.AddWithValue("@PhoneNumber",txtPhoneNumber.Text.Trim());
  63. cmd.Parameters.AddWithValue("@Password", Encrypt(txtPassword.Text.Trim()));
  64. cmd.Parameters.AddWithValue("@Created", DateTime.Now);
  65. cmd.ExecuteNonQuery();
  66. ClearTexbox();
  67. lblMessage.Text = "You have registered succussfully";
  68. lblMessage.ForeColor= System.Drawing.Color.Green;
  69. }
  70. }
  71. catch (Exception)
  72. {
  73. lblMessage.Text = "You have not registered";
  74. lblMessage.ForeColor = System.Drawing.Color.Red;
  75. }
  76. }
  77. }
  78. }

Step 5 - Run the project by pressing "Ctrl+F5".

Screenshot 1

ASP.NET

Screenshot 2
ASP.NET

Screenshot 3

ASP.NET