angular-captcha

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'; 

@NgModule({
  imports: [
    ...
    BotDetectCaptchaModule
  ],
  ...
})

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 = 
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint.ashx';
  }

• Java-based backend:

import { CaptchaComponent } from 'angular-captcha'; 

export class YourFormWithCaptchaComponent {

  ngOnInit(): void {
    this.captchaComponent.captchaEndpoint = 
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint';
  }

• PHP-based backend:

import { CaptchaComponent } from 'angular-captcha'; 

export class YourFormWithCaptchaComponent {

  ngOnInit(): void {
    this.captchaComponent.captchaEndpoint = 
      'https://your-app-backend-hostname.your-domain.com/botdetect-captcha-lib/simple-botdetect.php';
  }

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" 
  name="userCaptchaInput" 
  ngModel 
  #userCaptchaInput="ngModel"  
  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';

@Component({
  moduleId: module.id,
  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;

  constructor(
    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
    this.yourFormWithCaptchaService.send(postData)
      .subscribe(
        response => {
          if (response.success == false) {
            // captcha validation failed; reload image
            this.captchaComponent.reloadImage();
            // 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);

' VB.NET
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);

Documentation:

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

Dependencies:

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

• ASP.NET v4.4.2+
• Java v4.0.Beta3.7+
• PHP v4.2.5+

Support:

Send us questions, suggestions contact form on captcha.com.