ALL PRODUCTS Cart (0) 00:00 SEARCH MARKET At a Glance Featured Clearance Browse by Type All Show More You have no items in the cart. ITEM QTY PRICE TOTAL DROP CART Yes, I'm sure This will cancel your current order Are you sure? You should checkout NOW if you want your order to be included in today's pack cutoff (please review your cart first). Otherwise, if you click on CONTINUE SHOPPING your order will miss the next dispatch & go on the following one. checkout now Continue shopping BlazorBasics.Captcha: A Step-by-Step Guide for Adding Captcha Controls 29 AUG 2023 Step-by-Step Guide for Adding Captcha Controls to Your Blazor ApplicationCaptcha 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.CaptchaBlazorBasics.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 FeaturesAdding a captcha control to your Blazor application can provide the following benefits:Prevent spamProtect your website from unwanted trafficImprove user experience by reducing the amount of time spent filling out formsProvide an additional layer of security to your applicationInstallationYou can install the BlazorBasics.Captcha package using the Nugget package manager by running the following command:PM> Install-Package BlazorBasics.CaptchaAlternatively, you can clone the repository from GitHub and add the project to your solution.PM> Install-Package BlazorBasics.CaptchaUsageTo 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.ParametersThe CaptchaComponent takes in several parameters and entities that allow for customization of the component. These include:CaptchaProperties: How to configure the captchaOnValidate: Delegate to execute when validating the captchaDataSource: Delegate from where to get the CaptchaItems to validateBeforeValidate: Content to show before validatingAfterValidate: Content to show after validatingOnSubmit: Delegate to use when the default button is set different from submitWrapperAttributes: Attributes for the container of the HTMLCaptchaProperties 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 HTMLEntitiesThe BlazorBasics.Captcha package includes several entities that are used by the CaptchaComponent. These include:ButtonType: The type of button to use for the captcha controlCaptchaItem: 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 ContentTo 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 SEND MESSAGE @code{ string Email; CaptchaProperties MyCaptcha = new CaptchaProperties( Type: CaptchaType.Numeric, ErrorMessage: "Solve the math correctly please..."); void SendForm(){ //some code... }}ConclusionWith 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.