Create a custom CAPTCHA widget

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

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.

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

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

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.