Using Ajax, How to display Captcha & authenticate it in Asp.net Web app, if the data(base64 & text hash) is coming as Json from

Question

I made a Captcha class library named 'Utility.cs' that has a function called 'generateCaptcha()' that creates a random 6 digits text, creates a hash-code of it and then creates a image(with random impurities) based on the text. It then converts the image into base64 to string, and the base64 image data and hash are converted to Json (Serialized) and are returned in string to the function.

The problem here is I am saving the captcha 'hash' and the 'image' in the session but I am not able to compare the captcha with the inputted text from TextBox which when matches will give an output as 'The captcha matches' since the Captcha never matches!. And once I click on submit the captcha refreshes(I have kept the generateCaptcha() function in page load, since I don't know where to generate the captcha other than page load).

I was told that using Ajax can solve this problem. But I have only a little knowledge about Ajax and don't know how the Ajax code can fit in my program.
The Json data is like this in the returned string 'str' :

The code behind in '.aspx.cs' is this :
public partial class About : Page
{ public static byte[] hash1;
public static byte[] hash2;
protected void Page_Load(object sender, EventArgs e)
{ utility u = new utility();
var json = u.generateCaptcha();
Captcha cap = JsonConvert.DeserializeObject<Captcha>(json);
Session["Captcha_Image"] = cap;
if (Session["Captcha_Image"] != null)
{ var captcha = (Captcha)Session["Captcha_Image"];
Label1.Text = GetImage(captcha.base64); }
}
public void Button1_Click(object sender, EventArgs e)
{ if(Session["Captcha_Image"] !=null)
{ var captcha =(Captcha)Session["Captcha_Image"];
hash1 = captcha.hash;
using (MD5 md5 = MD5.Create())
{ if (TextBox1.Text != "")
{ hash2 = md5.ComputeHash(Encoding.UTF8.GetBytes(TextBox1.Text));

Answer 1

To authenticate the Captcha input using Ajax in your ASP.NET web app, you can follow these steps:

On the client-side, use Ajax to send an asynchronous request to the server to validate the Captcha input. You can use JavaScript or jQuery to handle the Ajax request.

In your server-side code (e.g., in your .aspx.cs file), create a new method that handles the Captcha validation logic. This method should receive the user's input, retrieve the stored Captcha information from the session, and compare the inputted text hash with the stored hash.

Modify your server-side code to return a response to the Ajax request indicating whether the Captcha input is valid or not. This response can be in JSON format, indicating a successful match or a mismatch.

On the client-side, in the Ajax success callback function, check the response received from the server. If the response indicates a successful match, display a success message. Otherwise, display an error message prompting the user to enter the correct Captcha.

Additionally, you should generate and store the Captcha at a separate stage, not within the Page_Load method, to ensure that it remains the same during the validation process. You can generate the Captcha when the page is loaded for the first time or when a specific event occurs, and store it in the session.

By implementing these steps, you can use Ajax to authenticate the Captcha input and provide a responsive user experience in your ASP.NET web application.

Answer 2

Thankyou bro 😇