Version Sitefinity 14.4
Sitefinity 14.4 Sitefinity 14.3 Sitefinity 14.2 Sitefinity 14.1 Sitefinity 14.0 Sitefinity 13.3 Sitefinity 13.2 Sitefinity 13.1 Sitefinity 13.0 Sitefinity 12.2 Sitefinity 12.1 Sitefinity 12.0

Topics

All topics

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 .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 .NET Core forms.

Want to learn more?

Sign up for our free beginner training. Boost your credentials through advanced courses and certification.
Register for Sitefinity training and certification.

Was this article helpful?

Next article

Widget loaded event