BlazorBasics.Captcha: A Step-by-Step Guide for Adding Captcha Controls

by Digital Door | Tuesday, 29 August 2023
Layer 1
Layer 1
Layer 1

Step-by-Step Guide for Adding Captcha Controls to Your Blazor Application

Captcha controls are useful for preventing spam and protecting your website from unwanted traffic. In this documentation, we'll explore how to add a captcha control into a Blazor server or Blazor Webassembly application.

Blazor is a web framework that allows developers to build interactive client-side web applications using C# instead of JavaScript. Blazor Webassembly is one of the two hosting models available for Blazor. It allows developers to build web applications that can run offline in the browser.

Introduction to BlazorBasics.Captcha

BlazorBasics.Captcha is a Blazor component that provides captcha functionality to your Blazor application. Captcha is a security mechanism that prevents automated scripts from submitting forms or accessing sensitive content on your website.

This documentation will provide an overview of how to use the CaptchaComponent in your Blazor application, including installation, usage, and customization.

Benefits and Features

Adding a captcha control to your Blazor application can provide the following benefits:

  • Prevent spam
  • Protect your website from unwanted traffic
  • Improve user experience by reducing the amount of time spent filling out forms
  • Provide an additional layer of security to your application


You can install the BlazorBasics.Captcha package using the Nugget package manager by running the following command:

PM> Install-Package BlazorBasics.Captcha

Alternatively, you can clone the repository from GitHub and add the project to your solution.

PM> Install-Package BlazorBasics.Captcha


To use the CaptchaComponent, add it to any component where you want to verify that a real user is interacting with your application. You can customize the component by passing in various parameters and entities.


The CaptchaComponent takes in several parameters and entities that allow for customization of the component. These include:

  • CaptchaProperties: How to configure the captcha
  • OnValidate: Delegate to execute when validating the captcha
  • DataSource: Delegate from where to get the CaptchaItems to validate
  • BeforeValidate: Content to show before validating
  • AfterValidate: Content to show after validating
  • OnSubmit: Delegate to use when the default button is set different from submit
  • WrapperAttributes: Attributes for the container of the HTML
CaptchaProperties Properties;						//how to configure the captchaEventCallback OnValidate;						//delegate to execute when validate the captchaFunc>> DataSource;	//delegate from where get the CaptchaItems to validateRenderFragment BeforeValidate;						//content to show before validateRenderFragment AfterValidate;						//content to show after validateEventCallback OnSubmit;								//delegate to use when default button is set different of submitDictionary WrapperAttributes;		//attributes for the container of the HTML


The BlazorBasics.Captcha package includes several entities that are used by the CaptchaComponent. These include:

  • ButtonType: The type of button to use for the captcha control
  • CaptchaItem: A single item in the captcha control. Contains a question, response, and selected flag.
  • CaptchaProperties: The properties used to configure the captcha control. Includes type, description, placeholder, button type, and error message.
  • CaptchaType: The type of captcha to use. Can be numeric, country capitals, or custom.
namespace BlazorBasics.Captcha.Entities;public enum ButtonType{    Submit, Button, Reset}public class CaptchaItem{    public string Question { get; set; }    public string Response { get; set; }    public bool Selected { get; set; }    public CaptchaItem() { }    public CaptchaItem(string question, string response) : this(question, response, false) { }    public CaptchaItem(string question, string response, bool selected)    {        Question = question;        Response = response;        Selected = selected;    }}public record struct CaptchaProperties(    CaptchaType Type = CaptchaType.Numeric,     string Description = "",     string Placeholder = "",     ButtonType Button = ButtonType.Submit,     string ErrorMessage = "Not Match!");public enum CaptchaType{    Numeric, CountryCapitals, Custom}

Personalize Content

To personalize the content of the Captcha control, you can use the BeforeValidate and AfterValidate parameters to add custom content before and after the Captcha control. Here's an example of how to use the CaptchaComponent in an EditForm component:

                                    Solve math                                       
@code{    string Email;    CaptchaProperties MyCaptcha = new CaptchaProperties(        Type: CaptchaType.Numeric,        ErrorMessage: "Solve the math correctly please...");    void SendForm(){        //some code...    }}


With BlazorBasics.Captcha, you can easily add captcha functionality to your Blazor application. By using this package, you can improve the security of your website and provide a better user experience for your visitors.

How we can Help Wholesale Businesses

Placeholder image

Top 10 Social Media Marketing Trends for 2023

So what should you know to stay on top of your social media marketing this year? Social media trends will help you stay relevant (or even stand out) to increase your brand's visibility, market reach, and user engagement. Here are some key things you should know to stay relevant to your audience and [...]

Read more

Placeholder image

Understanding DDLive Support Ticket Levels and State

The report ticket level denotes the severity of the submitted ticket. As the Digital Door team reviews your ticket, they mark it as complete so that you can track the progress of your problem reports. Let's understand the process.

Read more

Prefer to talk to someone in person? Give us a call

+61 7 2139 3999

An error has occurred. This application may no longer respond until reloaded. Reload 🗙