TypeScript icon, indicating that this package has built-in type declarations

3.7.4 • Public • Published

BotDetect CAPTCHA Angular Module (TypeScript: Angular 2/4/5/6/7/8+)

For a comprehensive step-by-step integration guide please see our Angular Captcha Module Integration Guide.
The guide covers the integration with the following backends:

  • ASP.NET (Core): web API with MVC Core
  • ASP.NET (Legacy): Web-API2, MVC1-5, Generic Handler
  • Java: Servlet, Spring, Struts
  • PHP: the plain PHP

To give you a hint how Angular Captcha Module works we pasted bellow a few excerpts from the Integration Guide.

Quick guide:

Step 1: Install Angular Captcha Module
npm install angular-captcha --save

and add the following lines into the import section of your app's app.module.ts file:

// import the Angular Captcha Module 
import { BotDetectCaptchaModule } from 'angular-captcha'; 
  imports: [
Step 2: Set the captchaEndpoint in Your App's Frontend

Endpoint configuration depends on which technology you use in the backend.

  • ASP.NET-based backend:
import { CaptchaComponent } from 'angular-captcha'; 
export class YourFormWithCaptchaComponent {
  ngOnInit(): void {
    this.captchaComponent.captchaEndpoint = 
  • Java-based backend:
import { CaptchaComponent } from 'angular-captcha'; 
export class YourFormWithCaptchaComponent {
  ngOnInit(): void {
    this.captchaComponent.captchaEndpoint = 
  • PHP-based backend:
import { CaptchaComponent } from 'angular-captcha'; 
export class YourFormWithCaptchaComponent {
  ngOnInit(): void {
    this.captchaComponent.captchaEndpoint = 
Step 3: Displaying the Captcha Challenge in Your Form

Place the following lines in your form where you want to display captcha:

<botdetect-captcha captchaStyleName="yourFirstCaptchaStyle"></botdetect-captcha>  
<input id="userCaptchaInput" 
  type="text" >  
Step 4: Captcha Validation: Client-side Code
import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { YourFormWithCaptchaService } from './your-form-with-captcha.service';
import { CaptchaComponent } from 'angular-captcha';
  selector: 'your-form-with-captcha',
  templateUrl: 'your-form-with-captcha.component.html',
  styleUrls: ['your-form-with-captcha.component.css'],
  providers: [YourFormWithCaptchaService]
export class YourFormWithCaptchaComponent {
  // uncomment the line bellow if you use Angular 2/4/5/6/7
  // @ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;
  // uncomment the line bellow if you use Angular 8
  // @ViewChild(CaptchaComponent, { static: true }) captchaComponent: CaptchaComponent;
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }
  // Process the form on submit event.
  validate(value, valid): void {
    // get the user-entered captcha code value to be validated at the backend side        
    let userEnteredCaptchaCode = this.captchaComponent.userEnteredCaptchaCode;
    // get the id of a captcha instance that the user tried to solve
    let captchaId = this.captchaComponent.captchaId;
    const postData = {
      userEnteredCaptchaCode: userEnteredCaptchaCode,
      captchaId: captchaId
    // post the captcha data to the /your-app-backend-path on your backend
        response => {
          if (response.success == false) {
            // captcha validation failed; reload image
            // TODO: maybe display an error message, too
          } else {
            // TODO: captcha validation succeeded; proceed with the workflow
        error => {
          throw new Error(error);
Step 5: Captcha Validation: Server-side Code

The userEnteredCaptchaCode and captchaId values posted from the frontend are used to validate a captcha challenge on the backend.

The validation is performed by calling the: Validate(userEnteredCaptchaCode, captchaId).

  • If you have ASP.NET Captcha library on a server side validation would look similar to this:
// C#
SimpleCaptcha yourFirstCaptcha = new SimpleCaptcha();
bool isHuman = yourFirstCaptcha.Validate(userEnteredCaptchaCode, captchaId);
Dim yourFirstCaptcha As SimpleCaptcha = New SimpleCaptcha()
Dim isHuman As Boolean = yourFirstCaptcha.Validate(userEnteredCaptchaCode, captchaId)
  • If you have Java Captcha library on a server side validation would look similar to this:
SimpleCaptcha yourFirstCaptcha = SimpleCaptcha.load(request);
boolean isHuman = yourFirstCaptcha.validate(userEnteredCaptchaCode, captchaId);
  • If you have PHP Captcha library on a server side validation would look similar to this:
$yourFirstCaptcha = new SimpleCaptcha();
$isHuman = $yourFirstCaptcha->Validate($userEnteredCaptchaCode, $captchaId);


Angular Captcha Module Step-by-step Integration Guide -- read this one first

Angular Captcha Module Basic Example -- partial code walk-through

Angular Captcha Module Form Example -- partial code walk-through


The current version of the Angular Captcha Module requires one of the following BotDetect CAPTCHA backends:


Send us questions, suggestions contact form on

Package Sidebar


npm i angular-captcha

Weekly Downloads






Unpacked Size

64.3 kB

Total Files


Last publish