What is Captcha Code Validation?
Captcha Code validation enables database to store the data only if the captcha code validation returns true otherwise it will not validate captcha code. Captcha code returns only Boolean value true or false.
Today, Captcha codes are employed in so many areas simply to enhance strong privacy and security for the business data.
In Angular, we can use Captcha code validation to protect the integrity of online polls by stopping hackers using robots to send repeated false responses and block the robot software from submitting fake requests.
We use Angular Captcha code validation by using BotDetectCaptchaModule.
Given below are the backend platforms that can be employed for Angular captcha code validation:
- ASP.Net(Core): Web API with MVC Core
- ASP.Net(Legacy): Web-API 2, Generic Handler
- Java: Servlet, Spring
- PHP: Plain PHP
Now, let us understand this concept with an example.
Example of Angular Captcha Code Validation
- Front-end side I use visual studio code.
- For Back-end I will utilize Visual Studio and work on ASP.Net(Core).
Step 1: First you have to install Angular Captcha Module.
npm install angular-captcha –save
- Now we need to import BotDetectCaptchaModule in the application from the ‘angular-captcha’ library in the app.module.ts file.
- And also, we need to import other components in app.module.ts file.
import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { FormsModule, ReactiveFormsModule } from ‘@angular/forms’;
import { HttpModule } from ‘@angular/http’;
import { AppRoutingModule } from ‘./app-routing.module’;
import { BotDetectCaptchaModule } from ‘angular-captcha’;
import { AppComponent } from ‘./app.component’;
import { BasicComponent } from ‘./basic/basic.component’;
import { ContactComponent } from ‘./contact/contact.component’;
import { BasicSuccessNotifyComponent } from ‘./notify/basic-notify/basic-success-notify.component’;
import { ContactSuccessNotifyComponent } from ‘./notify/contact-notify/contact-success-notify.component’;
import { ValuesPipe } from ‘./values.pipe’;
@NgModule({
declarations: [
AppComponent,
BasicComponent,
ContactComponent,
ValuesPipe,
BasicSuccessNotifyComponent,
ContactSuccessNotifyComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ReactiveFormsModule,
AppRoutingModule,
// import Captcha Angular Module
BotDetectCaptchaModule
],
providers: [],
bootstrap: [AppComponent]
})
Step 2: Display Captcha Code in Form
- In our form when users submit their captcha code, the validate() method will be called. If the user enters a valid captcha code, it displays successMessages otherwise it will return a new captcha code and errorMessages.
- Place below line in your form where you need to display captcha code:
<form novalidate #f=”ngForm” (ngSubmit)=”validate(f.value, f.valid)”>
<div class=”alert alert-success” *ngIf=”successMessages”>
{{ successMessages }}
</div>
<div class=”alert alert-error” *ngIf=”errorMessages”>
{{ errorMessages }}
</div>
<!– placeholder –>
<botdetect-captcha captchaStyleName=”angularCaptcha”></botdetect-captcha>
<label>
<span>Retype the characters from the picture:</span>
<!– user-input textbox –>
<input
type=”text”
id=”CaptchaInput”
name=”CaptchaInput”
ngModel
#userCaptchaInput=”ngModel”
>
</label>
<button type=”submit”>Validate</button>
</form>
Step 3: Client-Side Captcha Validation
- Load captcha challenges from the back-end.
- Sets endpoint EnCaptchCode property to point to the captcha endpoint path on the back-end.
- Captcha validation results:
- When captcha code is not validated than it reloads captcha code and displays an Error message.
- When the captcha code is validated successfully then it executes by captcha protected action.
import { Component, OnInit } from ‘@angular/core’;
import { Observable } from ‘rxjs/Rx’;
import { CaptchaService } from ‘./captcha.service’;
import { CaptchaComponent } from ‘angular-captcha’;
@Component({
selector: ‘app-captcha’,
templateUrl: ‘./captcha.component.html’,
styleUrls: [‘./captcha.component.css’]
})
export class CaptchaComponent implements OnInit {
@ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;
/@ViewChild(CaptchaComponent, { static: true }) captchaComponent: CaptchaComponent;
constructor(
private CaptchaService: CaptchaService
) { }
//When you enter on submit event.
validate(value, valid): void {
//Get user entered captcha code value to be validated at backend side.
let EnCaptchaCode = this.captchaComponent.EnCaptchaCode;
//Get Id of a captcha instance that user try to solve.
let captchaId = this.captchaComponent.captchaId;
const postData = {
EnCaptchaCode: EnCaptchaCode,
captchaId: captchaId
};
//Post the captcha data to your backend
this.CaptchaService.send(postData)
.subscribe(
response => {
if (response.success == false) {
// When captcha validation failed than it is reload image
this.captchaComponent.reloadImage();
// maybe display an error message, too
} else {
// captcha validation succeeded than proceed with the workflow
}
},
error => {
throw new Error(error);
});
}
}
Step 4: Front End Side Service
- It will send CaptchaId and the user entered CaptchaCode with post request to back-end.
- In basicUrl we can pass our back end API URL.
- In Headers, we have our content type and our content type is application/json.
import { Injectable } from ‘@angular/core’;
import { Http, Response, Headers, RequestOptions } from ‘@angular/http’;
import { Observable } from ‘rxjs/Rx’;
@Injectable()
export class CaptchaService {
// basic api url
basicUrl = ‘api/captcha-endpoint-back_end’;
constructor(private http: Http) { }
send(data: Object): Observable<any> {
const headers = new Headers({ ‘Content-Type’: ‘application/json’ });
const options = new RequestOptions({ headers: headers });
return this.http.post(this.basicUrl, data, options)
.map((response: Response) => response.json())
.catch((error:any) => Observable.throw(error.json().error));
}
}
Step 5: Back-End Side appsetting.json file
- BotDetect configuration section that defines the Captcha Endpoint path.
- In the Startup.cs file, we have to configure the application pipeline to use simple middleware
{
“Logging”: {
“IncludeScopes”: false,
“LogLevel”: {
“Default”: “Warning”
}
},
“BotDetect”: {
“CaptchaEndpointPath”: “captcha-endpoint.ashx”
}
}
Step 6: Back-End side botdetect.xml file
- In this file, we include the name of captcha style, Id of <input> element where user enters captcha code and other settings like length of captcha code.
<?xml version=”1.0″ encoding=”UTF-8″?>
<botdetect xmlns=”https://captcha.com/schema/net”
xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xsi:schemaLocation=”https://captcha.com/schema/net
https://captcha.com/schema/net/botdetect-4.4.0.xsd”>
<captchaStyles>
<captchaStyle>
<name>angularCaptcha</name>
<userInputID>CaptchaInput</userInputID>
<codeLength>3-5</codeLength>
</captchaStyle>
</captchaStyles>
</botdetect>
Step 7: Back-End side APIController.cs file
- Extracts EnCaptchaCode and captchaId values posted from the front-end.
- This controller is used for validate EnCaptchaCode and captchaId.
- If IsHuman is false, then captcha validation is failed and if it is true then captcha validation is successfully done.
- Validates captcha by calling below method:
Validate(EnCaptchaCode,captchaId)
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using BotDetect.Web;
namespace AngularWebAPICaptchaExample.Controllers
{
[Produces(“application/json”)]
[Route(“api/API”)]
public class APIController : Controller
{
[HttpPost]
public IActionResult Post([FromBody] Models.captchaFormModel data)
{
SimpleCaptcha captcha = new SimpleCaptcha();
// execute the captcha validation
bool isHuman = captcha.Validate(data.EnCaptchaCode, data.captchaId);
Dictionary<string, bool> validResult = new Dictionary<string, bool>();
if (isHuman == false)
{
// captcha validation failed
validResult.Add(“success”, false);
// consider logging the attempt
}
else
{
// captcha validate successfully
validResult.Add(“success”, true);
}
// return json string with validation result to front-end
return Json(validResult);
}
}
}
Conclusion
In this blog, we have seen what is captcha validator and how to use captcha validation. We use Angular Captcha code validation by employing BotDetectCaptchaModule. Using captcha validation, we protect the integrity of online polls by stopping hackers from using robots to send repeated false responses and block the robot software from submitting fake request.
Author Bio:
Vinod Satapara – Technical Director, iFour Technolab Pvt. Ltd.
Technocrat and entrepreneur of a reputed Outlook Addin Development Company with years of experience in building large scale enterprise web, cloud and mobile applications using latest technologies like ASP.NET, CORE, .NET MVC, Angular and Blockchain. Keen interest in addressing business problems using latest technologies and help organization to achieve goals.
