Post
Ask Question

Create CAPTCHA Using Google API in ASP.Net

Background
 
This article explains creation of a CAPTCHA using the Google reCAPTCHA API to prevent input from an automated system. Let us learn about it step-by-step.
 
The Need for CAPTCHA
 
I have seen one of the best examples for why a CAPTCHA is necessary in applications when I was in one of the top orgnizations that use the one application for attendance that when Employee enters an EMPId and word into respective textboxes and by clicking  on the login button the employee attendance is registered.
 
Now what has happened now is that most developers have created a script that runs automatically on a scheduled time and that gets the registered attendance without coming to the office. So to overcome this type of problem CAPTCHA plays a very important role that prevents automated input. You can create a CAPTCHA in many ways but Google provides a free reCAPTCHA with better security without any cost.
Let us learn about the Google reCAPTCHA
 
What is reCAPTCHA?

This  is a free service from Google that helps protect websites from spam and abuse that restricts the automated input sent by a system and allows only input from a real human.
 
Step 1
 
Create a simple web application to show the use of CAPTCHA.
  1. "Start" - "All Programs" - "Microsoft Visual Studio 2010".

  2. "File" - "New WebSite" - "C#" - "Empty WebSite" (to avoid adding a master page).

  3. Provide the web site a name such as "Googelrecaptcha" or another as you wish and specify the location.

  4. Then right-click on Solution Explorer - "Add New Item" - Add Web Form.

  5. Drag and drop one button and label and two Textboxes onto the <form> section of the Default.aspx page.

  6. Now the default.aspx page source code will look as follows.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="UsingGoogleRecaptcha.Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title></title>  
  7. </head>  
  8. <body>  
  9.     <form id="form1" runat="server"> 
  10. UserId: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <br>
  11. word:<asp:TextBox TextMode="word" ID="TextBox2" runat="server"></asp:TextBox></td>
  12.     <asp:Button ID="btnLogin" runat="server" Text="Submit" OnClick="btnLogin_Click" /><br />  
  13.     <asp:Label ID="lblResult" runat="server" Text="Label"></asp:Label>  
  14.     </form>  
  15. </body>  
  16. </html> 
Step 2
 
Download the Google reCAPTCHA library for ASP.NET.
 
Download the library using this link reCAPTCHA ASP.NET library DownLoad.
 
Step 3
 
Add a reference for the downloaded library, Recaptcha.dll, into the web application as in the following:
  1. Right-click on the web application, then click on Add reference.

  2. After Add reference choose Browse then find the location of the downloaded library.

  3. Select Recaptcha.dll and click on OK.

  4. After adding the Recaptcha.dll reference into the web application the bin folder will look such as follows.


 
In the preceding image you have seen how the Recaptcha.dll reference was added.
 
 Step 4
 
Add the Recaptcha control page header to the ASP.NET Page as in the following:
  1. <%@ Register TagPrefix="recaptcha" Namespace="Recaptcha" Assembly="Recaptcha" %> 
Step 5
 
Place the Google Recaptcha control on the Default.aspx page under the form tag as:
  1. <recaptcha:RecaptchaControl  
  2.     ID="recaptcha"  
  3.     runat="server"  
  4.     PublicKey="your_public_key"  
  5.     PrivateKey="your_private_key"  
  6.     /> 

Understanding the Properties of RecaptchaControl

The RecaptchaControl provides many properties as a simple control but the following are some of the common properties:
  1. PublicKey: This is a mandatory property that valiadates the user request at the client-side. This is unique key is provided by Google for the web site with respect to the web site domain.

  2. PrivateKey: This is a mandatory property that valiadates the user request at the server-side with the Google server. This is a unique secret key provided by Google for the web site with respect to the web site domain basically for communicating between our server and the Google server.

  3. ErrorMessage: This is an optional property that sets an error message when the user enters an invalid CAPTCHA.

  4. AllowMultipleInstances: This is an optional property that decides the number of CAPTCHA code generations at a time. By default, it is false. If it is set to true then two CAPTCHA codes are generated for a single request.

  5. Theme: This is used to set the background color for the CAPTCHA control.

Step 6

Generate a Private and Public key from Google.

To generate the Private and Public Key we must use the following process:
  1. You must have a Google account.

  2. Navigate to this link Get Recaptcha API Key

  3. You will be redirected to the following page:

get reCAPTCHA

After clicking on the "Sign Up Now!" button it will redirect to the Gmail account LoginPage, after Login into the Gmail it shows the following screen.

my account
Now in the preceding Domain TextBox enter your full domain of the web site. Now we have the local host application hence we will use the domain as localhost and click on the create button.
 
localhost
In the preceding image you have seen that it generated a Unique Public and Private API key with the specifics of our website domain address. Now set these keys to RecaptchaControl as in the following:
  1. <recaptcha:RecaptchaControl   
  2.  ID="recaptcha" runat="server"
  3.  PublicKey="6LeV7fwSAAAAACGlvCvX_cJzhsys5Ju_rW7Oqsn-"  
  4. PrivateKey="6LeV7fwSAAAAACgQzjfZscePs-7d6kGx9A-RweGY" > 
 After doing all of the preceding process, the Default.aspx source code will look as follows:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <%@ Register TagPrefix="recaptcha" Namespace="Recaptcha" Assembly="Recaptcha" %>  
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.     <table style="margin-top: 40px">  
  12.         <tr>  
  13.             <td>  
  14.                 UserId  
  15.             </td>  
  16.             <td>  
  17.                 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
  18.             </td>  
  19.         </tr>  
  20.         <tr>  
  21.             <td>  
  22.                 Word  
  23.             </td>  
  24.             <td>  
  25.                 <asp:TextBox TextMode="word" ID="TextBox2" runat="server"></asp:TextBox>  
  26.             </td>  
  27.         </tr>  
  28.         <tr>  
  29.             <td>  
  30.             </td>  
  31.             <td>  
  32.                 <recaptcha:RecaptchaControl ID="recaptcha" runat="server" PublicKey="6LeV7fwSAAAAACGlvCvX_cJzhsys5Ju_rW7Oqsn-"  
  33.                     PrivateKey="6LeV7fwSAAAAACgQzjfZscePs-7d6kGx9A-RweGY" />  
  34.             </td>  
  35.         </tr>  
  36.         <tr>  
  37.             <td>  
  38.             </td>  
  39.             <td>  
  40.                 <asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" />  
  41.             </td>  
  42.         </tr>  
  43.     </table>  
  44.     <br />  
  45.     <asp:Label ID="lblResult" runat="server" Text="Label"></asp:Label>  
  46.     </form>  
  47. </body>  
  48. </html> 
Step 7
 
Now open the default.aspx.cs file and add the following code to the OnClick event of the btnLogin button to ensure that the CAPTCHA code is validated successfully:
  1. protected void btnLogin_Click(object sender, EventArgs e)  
  2.    {  
  3.        if (recaptcha.IsValid)  
  4.        {  
  5.            lblResult.Text = "Login Sucesfully at  "+DateTime.Now.ToString("dd-MM-yyyy");  
  6.            lblResult.ForeColor = Color.Green;  
  7.   
  8.        }  
  9.        else  
  10.        {  
  11.   
  12.            lblResult.Text = "The verification Code Is incorrect.";  
  13.            lblResult.ForeColor = Color.Red;  
  14.   
  15.   
  16.        }  
  17.    } 
 Now run the application. The page will look such as follows:
 
 
 
Now enter an invalid code and click on the Login button. It will show the following message:
 
 
Now enter the proper code and click on the Login button. It will show the following message.
 
 
 
Now from all the preceding examples we have learned about the Google reCaptcha implementation.
 
Feature of Google reCAPTCHA
  1. You can regenerate a reCAPTCHA if you don't understand one.

  2. If you don't understand the CAPTCHA or are unable to read it then you can also get audio help.

  3. It is a free service from Google, there is no need to pay any money.

  4. Better security for your application.  
Note
  • For the detailed code, please download the sample Zip file.
  • You need an active internet connection.
Summary

For all the examples above, we have learned how to use Google reCAPTCHA. I hope this article is useful for all readers. If you have a suggestion then please contact me.


Similar Articles