Create a custom CAPTCHA widget

The following article describes how to create a custom CAPTCHA widget using Google reCAPTCHA v2 or v3. This is a forms widget and you can place it in a form.
For more information, see Create and design forms.

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.

This sample is available in Sitefinity’s GitHub repository. You can run and play with it.
To do this, perform the following:

1. Go to Sitefinity’s GitHub repository Sitefinity ASP.NET Core samples.
2. Expand Code and click Download ZIP.
3. Extract the files on your computer.
4. In the extracted folder, navigate to sitefinity-aspnetcore-mvc-samples-master/src/captcha folder.
5. Open the captcha.sln in Visual Studio.
6. Open the appsettings.json file.
7. In section “Sitefinity”, change the “Url” property to the URL of your Sitefinity CMS site.
   If you have deployed Sitefinity CMS on the IIS, point to “https://localhost:<https_port>".
8. In Visual Studio, in the context menu of captcha project, click View in Browser.
9. Log in to your Sitefinity CMS instance and place the widget on a page.