Create a custom CAPTCHA widget

Overview

The following article describes how to create a custom captcha widget using Google reCAPTCHA v2 or v3.

PREREQUISITES: Before using Google reCAPTCHA, you must:
  • Register your site get an API key pair at Google reCAPTCHA.
    You can generate an API key for either reCAPTCHA v2 or reCAPTCHA v3 and then use it with the corresponding widget from this tutorial.
  • You must update your privacy and GDPR statements according to Google reCAPTCHA policies.

Configure Sitefinity CMS

Before implementing the widget, you must configure Sitefinity CMS.
Perform the following:

  1. In Sitefinity backend, navigate to Administration » Settings » Advanced.
  2. In the treeview, expand WebSecurity » Captcha and click Parameters.
  3. Create the following parameters:
    • Key VerificationUrl and Value https://www.google.com/recaptcha/api/siteverify
    • Key ResponseKey and Value g-recaptcha-response
    • Key SecretKey and Value <The secret from the API key pair that you have created>

      NOTE: The version of the reCAPTCHA configuration for the secret key must correspond to the version of the reCAPTCHA widget that you are creating.

  4. Save your changes.

Create the ViewComponent

You create the widget’s ViewComponent in the Renderer application.
Perform the following:

  1. Open the ASP.NET Core Renderer in Visual Studio.
  2. In the context menu of the Renderer project, click Add » New Folder.
  3. Name the folder ViewComponents
  4. Inside the folder, add a class and name it Captcha2ViewComponent.cs or Captcha3ViewComponent.cs, depending on the version of the Google reCAPTCHA you want to create.
  5. In the class paste one of the following codes:

reCAPTCHA v2

reCAPTCHA v3

Create the View

You create the widget’s View in the Renderer application.
Perform the following:

  1. In the context menu of the Renderer project, click Add » New Folder and create one of the following folder structures, depending on the version of the Google reCAPTCHA that you want to create:
    • Views/Shared/Components/Captcha2
    • Views/Shared/Components/Captcha3
  2. Inside the Captcha2 or Captcha3 folder, add a code file and name it Default.cshtml
  3. In the file paste one of the following codes:

reCAPTCHA v2

reCAPTCHA v3

Create the Script

You create the widget’s script in the Renderer application.
Perform the following:

  1. In the context menu of the Renderer project, click Add » New Folder.
  2. Create a folder and name it Scripts
  3. Inside the Scripts folder, add a code file and name it captcha2.js or captcha3.js, depending on the version of the Google reCAPTCHA that you want to create.
  4. In the file paste one of the following codes:

reCAPTCHA v2

reCAPTCHA v3

NOTE: In the code samples above, change the <Captcha V2 site key> or <Captcha V3 site key> with the actual site key from the configured API key pair.

RESULT: After you build the project, the widget is displayed inside the forms widget selector when you are editing or creating ASP.NET Core forms.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?

Next article

Widget loaded event