Adding reCAPTCHA to a .NET Core Web Site
In the previous article, we configured Google reCAPTCHA v3 and we are ready to use it on our web site. Here I’m going to use Visual Studio 2019 to create an app with a simple form.
Let’s create a new ASP.NET Core Web Application.
We’re going to use .NET Core 3.1 and Web Application (Model-View-Controller).
This project allows us to create a simple web app without a need for any UI Framework.
We’ll start by designing our form. Let’s imaging that we are going to implement a feedback form. The template of Web MVC Application already contains Razor pages so we’re going to use Index.cshtml in Views/Home folder. Let’s wipe off the HTML part of it and create our feedback form there. Here’s an example of how it could look like.
And the source code:
In order to wire up the reCAPTCHA mechanism, we would need to add a link to an external JavaScript file with reCAPTCHA API. Since we use it only on one page we’ll add it to the Scripts section in Index.cshtml like this:
Notice that we also need to provide Site Key that we obtained in the previous article while configuring Google reCAPTCHA. You can go to settings in your reCAPTCHA Admin console and expand ‘reCAPTCHA keys’ section where you’ll find the required keys for this tutorial.
Now we need to get our unique token which is going to identifier user’s request. There are a couple of ways to get it. The first one is using postback to the server which we ignore in this tutorial. Instead, we are going to submit our form asynchronously. It requires a bit of JavaScript code but is more modern than postbacks.
Each time when users submit their feedbacks we want to acquire a unique token and send it to the server along with the form data. To simplify things we use jQuery. Put the code below into the Scripts section after the API link.
Also, I’ve added a message to show to a user if their feedback was successfully submitted or not. Place the HTML code below after form definition. It represents our message dialog.
Remember to provide Site Key in execute method.
Now we can move on to the server-side and implement our /api/feedback POST method. For that firstly add two models:
FeedbackPostModel represents data in the request and ReCaptchaResponseModel is the DTO that represents the response from Google after request verification.
Now let’s add an API controller with the feedback POST method.
Here we have the GetCaptchaResolution method which sends a request to https://google.com/recaptcha/api/siteverify which in turn returns the result of the verification which we convert to ReCaptchaResponseModel then. We can now analyze the result. The point of interest for us is the Score property which contains how likely a user who sends a request is a human and not a bot.
Now when you run the app, fill in all fields, and hit ‘Submit request’ you should see that your request has been successfully submitted.
Also notice a reCAPTCHA icon in the bottom right corner. It gives your user information that the form on the page is protected by Google reCAPTCHA.
Depending on the score you can decide what to do next. E.g. if you use reCAPTCHA on login form then you can ask the user to use 2-Factor verification if the score for the request is too low. In our case, we just won’t store feedback.
Please be aware that this code is just an example of how you can wire up reCAPTCHA in your application. As always with tutorials, the code is heavily simplified for clarity and brevity. Remember to adhere to coding standards and follow best practices in your apps!
Here is the link to the complete project: https://www.dropbox.com/sh/qgm34nxnjj1r502/AAA9Ex4mq2Ek7Mq-Wa790GWMa?dl=0
