reCAPTCHA is a way to stop bots and unnecessary traffics to your website. It returns feedback and score based on the interactions the user makes with your website providing a more flexible way to take appropriate actions.

reCAPTCHA is a free service provided by google for protecting your website implementing advanced risk analysis engine and adaptive challenges to keep automated software away while only letting the valid users pass through your site.

The advantages of using reCAPTCHA

• State of the art spam and abuse protection
• Ease of use and effortless interaction
• Apply the human bandwidth to benefit people everywhere

So how do we integrate reCAPTCHA on our website?. It is a simple process and for this we will be using the reCAPTCHA v2.

First you need to register your site for getting the reCAPTCHA key.

To register it you can go to the link below:(Create reCAPTCHA)

You will get a form like this:

In the form, you can choose between reCAPTCHA v3 or reCAPTCHA v2. reCAPTCHA v3 is the latest version which verifies user interaction with a score. Whereas, the reCAPTCHA v2 provides challenges that the user need to solve.

In the Domains section you need to provide your site domain name. If you don't have a domain then, you can simply fill the field with text- localhost.

Then after filling other sections you can submit the form and you are provided with two keys.

The SITE KEY should be provided in your html form like this:

<div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey="6LdzP5QUAAAAABMhnpYUDrHjHr-vl3jNuja66OOu"></div>

You also need to add the google api js link to your view

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

My html view looks like this

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="col-md-8">
    <div class="form-wrap">
        <div class="text-center">
            <h2 class="text-white-form">Provide Feedback</h2>
        </div>
        <div class="clearfix"> </div>
        <form action="/Home/Feedback" id="Feedback" method="post">
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <input type="text" class="form-control" name="Name" placeholder="Your name" required>
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control" name="EmailID" placeholder="Your Email" required>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <textarea class="form-control" name="Message" id="exampleFormControlTextarea1" rows="3" placeholder="Your Feedback" required></textarea>
            </div>
            <div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey="6LcqtZMUAAAAAGWEf88VfoS9v8EMCoFxeXSWcgQl"></div>
            <button type="submit" id="submitBtn" class="btn btn-blue" disabled>Submit</button>
        </form>
    </div>
</div>

This is all you need to do on the view side in your project. Now you can check your reCAPTCHA account through the admin panel which is linked to your google account.

This is how my output looks like:

To view your reCAPTCHA requests and other activities on your site through the admin console.

If any suspicious requests arrives through the reCAPTCHA the user is notified to his/her email and can also be viewed in admin console.So, This is how you integrate reCAPTCHA to your website.

Also read: Creating a LogIn Session in .NET Core