Generate Captcha with refresh Button in Asp.net

Description:-

In this article we will see how to generate captcha using web application. In this example I have create captcha in image handler and display in image to fill captcha and user can do action whatever he/she wants to do. Using StringBuilder class I have crated captcha and fill Url to pass page.

When user comes for login then he/she fills detail but stop the hacker to do we have to create captcha for taking some time or else he/she must have to fill captcha before do any action.

Using this we can stop Sql prevention and secure our site to hackers. For registration or any login authentication we have to create captcha images to secure login or some security question for security purpose.

For demo purpose here I have create captcha control to fill before registration and go after fill captcha. Follow below steps to create captcha in your web application.

Step 1: Create your Web Page and Design like what I have done and add Script Manager in your webpage.

<div><asp:ScriptManager ID="SM1" runat="server"></asp:ScriptManager>
     <table style="border: solid 1px black; padding: 20px; position: relative; top: 50px;" align="center">
      <tr><td>Email ID : </td>
 <td><asp:TextBox ID="txtEmailID" runat="server" Width="200px"></asp:TextBox></td></tr>
      <tr><td>Password : </td>
<td><asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Width="200px"></asp:TextBox></td></tr>
      <tr><td>Confirm Password : </td>
        <td><asp:TextBox ID="txtConfirmPassword" runat="server" TextMode="Password" Width="200px"></asp:TextBox></td></tr>
      <tr><td>Enter Below Code : </td><td>
    <asp:TextBox ID="txtCaptcha" runat="server" Width="200px"></asp:TextBox></td></tr>
      <tr><td></td>
      <td valign="middle">
      <asp:UpdatePanel ID="UP1" runat="server">
        <ContentTemplate>
          <table>
          <tr><td style="height: 50px; width: 100px;">
              <asp:Image ID="imgCaptcha" runat="server" /></td>
              <td valign="middle">
              <asp:Button ID="btnRefresh" runat="server" Text="Refresh" OnClick="btnRefresh_Click" /></td></tr>
          </table>
        </ContentTemplate>
      </asp:UpdatePanel></td></tr>
      <tr><td colspan="2" align="center">
<asp:Button ID="btnRegiser" runat="server" Text="Register" OnClick="btnRegister_Click" />
</td></tr></table>
    </div>

Step 2: Now Create FillCaptcha Method and Call in Page_load () event

void FillCapctha()
{
  try
  {
    Random random = new Random();
    string combination = "!@#$%^&*()+-0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
    StringBuilder captcha = new StringBuilder();
    for (int i = 0; i < 6; i++)
    captcha.Append(combination[random.Next(combination.Length)]);
    Session["captcha"] = captcha.ToString();
    imgCaptcha.ImageUrl = "GenerateCaptcha.aspx?" + DateTime.Now.Ticks.ToString();
  }
  catch
  {
    throw;
  }
}

protected void Page_Load(object sender, EventArgs e)
{
  if (!IsPostBack)
  {
    FillCapctha();
  }
}

Step 3: Now double Click in Refresh Button to Re-Generate Captcha and Call FillCaptcha () method in Refresh button Click Event.

protected void btnRefresh_Click(object sender, EventArgs e)
{
  FillCapctha();
}

Step 4: Now double click on Register button to generate click event and maintain Captcha in Session to Check TextBox Enter value and Generated Captcha is Equals or What.

protected void btnRegister_Click(object sender, EventArgs e)
{
  if (Session["captcha"].ToString() != txtCaptcha.Text)
    Response.Write("Invalid Captcha Code");
  else
    Response.Write("Valid Captcha Code");
    FillCapctha();
}

Step 5: Now Check Your Web.Config File Image Handle is Generated or What. If Not Then Generate Image Handler to See Captcha Images in webpage. Without Image Hander you can not see Image in Webpage.

Step 6: Now open your webpage in Browser and Enter Details and Fill Details and click register button to Check Validation.

Author : Umesh Patel

Related Posts