Angular & AngularJS Captcha Modules: Step-by-step Integration Guides

Run the following command:

Run the following command:

The free version nuget is available on nuget.org -- while the enterprise version nuget is available in the nuget folder of the enterprise version installation and archive.

Run the following command in the Package Manager Console:

The free version nuget is available on nuget.org -- while the enterprise version nuget is available in the nuget folder of the enterprise version installation and archive.

Run the following command in the Package Manager Console:

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent, { static: true }) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint = 
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint.ashx';
  }

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint = 
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint.ashx';
  }

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent, { static: true }) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint =
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint.ashx';
  }

  // 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 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
          }
        });
  }
}

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint =
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint.ashx';
  }

  // 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 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
          }
        });
  }
}

Here is the your-form-with-captcha.component.service file example:

import { Injectable } from '@angular/core';
import { HttpHeaders, HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class YourFormWithCaptchaService {

  constructor(private http: HttpClient) { }

  send(data: Object): Observable<any> {
    const options = {
      headers: new HttpHeaders({'Content-Type': 'application/json; charset=utf-8'})
    };

    return this.http.post(
      'https://your-app-backend-hostname.your-domain.com/your-app-backend-path', 
      data, options);
  }
}

Here is the your-form-with-captcha.component.service file example:

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class YourFormWithCaptchaService {

  constructor(private http: Http) { }

  send(data: Object): Observable<any> {
    const headers = new Headers({'Content-Type': 'application/json; charset=utf-8'});
    const options = new RequestOptions({ headers: headers });

    return this.http.post(
      'https://your-app-backend-hostname.your-domain.com/your-app-backend-path', 
      data, options)
        .map((response: Response) => response.json())
        .catch((error:any) => Observable.throw(error.json().error));
  }
}

Run the following command:

Run the following command:

The free version nuget is available on nuget.org -- while the enterprise version nuget is available in the nuget folder of the enterprise version installation and archive.

Run the following command in the Package Manager Console:

Reconfigure BotDetect CAPTCHA Component's Server-side Persistence Mechanism, If Needed

By default, BotDetect ASP.NET CAPTCHA uses SQLite as its server-side persistence mechanism. If that fits your application's requirements you can skip this step.

On the following links you can see how to reconfigure BotDetect to use Redis or Memcached instead of the SQLite -- if, per instance, your load-balanced application requires them.

Download and install the BotDetect ASP.NET CAPTCHA component. The folder where you installed BotDetect will be referred as the <BDC-DIR> in this guide.

BotDetect binaries are located in:
<BDC-DIR>/v4.4.2/lgcy-on-lgcy/bin folder.

Copy the BotDetect.dll and BotDetect.Web.Mvc.dll files to the /your-app-backend-folder/bin folder -- and then reference them in your project.

Configure BotDetect CAPTCHA Component's Server-side Persistence Mechanism

BotDetect ASP.NET CAPTCHA uses SQLite as its server-side persistence mechanism. If that fits your app's requirements you should reference SQLite in your app's backend project.

• Copy the content of the following folder:
  <BDC-DIR>/v4.4.2/lgcy-on-lgcy/bin/SQLite/native-interop to the /your-app-backend-folder/bin folder.
• Reference the System.Data.SQLite.dll in your project.

On the following links you can see how to reconfigure BotDetect to use Redis or Memcached instead of the SQLite -- if, per instance, your load-balanced application requires them.

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent, { static: true }) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint = 
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint.ashx';
  }

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint = 
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint.ashx';
  }

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent, { static: true }) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint =
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint.ashx';
  }

  // 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 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
          }
        });
  }
}

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint =
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint.ashx';
  }

  // 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 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
          }
        });
  }
}

Here is the your-form-with-captcha.component.service file example:

import { Injectable } from '@angular/core';
import { HttpHeaders, HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class YourFormWithCaptchaService {

  constructor(private http: HttpClient) { }

  send(data: Object): Observable<any> {
    const options = {
      headers: new HttpHeaders({'Content-Type': 'application/json; charset=utf-8'})
    };

    return this.http.post(
      'https://your-app-backend-hostname.your-domain.com/your-app-backend-path', 
      data, options);
  }
}

Here is the your-form-with-captcha.component.service file example:

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class YourFormWithCaptchaService {

  constructor(private http: Http) { }

  send(data: Object): Observable<any> {
    const headers = new Headers({'Content-Type': 'application/json; charset=utf-8'});
    const options = new RequestOptions({ headers: headers });

    return this.http.post(
      'https://your-app-backend-hostname.your-domain.com/your-app-backend-path', 
      data, options)
        .map((response: Response) => response.json())
        .catch((error:any) => Observable.throw(error.json().error));
  }
}

public class YourFormModel
{
  public string CaptchaId { get; set; }
  public string UserEnteredCaptchaCode { get; set; }
}

Public Class YourFormModel

  Public Property CaptchaId As String
  Public Property CaptchaCode As String

End Class

// route:
// https://your-app-backend-hostname.your-domain.com/your-app-backend-path

[...]
using BotDetect.Web;

namespace App.Controllers
{
  public class YourFormController : Controller
  {
    [HttpPost]
    public ContentResult PostAction(YourFormModel yourFormModel)
    {
      string userEnteredCaptchaCode = yourFormModel.UserEnteredCaptchaCode;
      string captchaId = yourFormModel.CaptchaId;

      // create a captcha instance to be used for the captcha validation
      SimpleCaptcha yourFirstCaptcha = new SimpleCaptcha();
      // execute the captcha validation
      bool isHuman = yourFirstCaptcha.Validate(userEnteredCaptchaCode, captchaId);

      if (isHuman == false) 
      {
        // captcha validation failed; notify the frontend 
        // TODO: consider logging the attempt		
        return Content("{\"success\":false}", "application/json; charset=utf-8");
      }
      else
      {
        // TODO: captcha validation succeeded; execute the protected action
        // TODO: do not forget to notify the frontend about the results
      }    
    }
  }
}

' route:
' https://your-app-backend-hostname.your-domain.com/your-app-backend-path

[...]
Imports BotDetect.Web

Namespace App
  Public Class YourFormController
    Inherits Controller

    <HttpPost()>
    Public Function PostAction(ByVal yourFormModel As YourFormModel) As ContentResult

      Dim userEnteredCaptchaCode As String = yourFormModel.UserEnteredCaptchaCode
      Dim captchaId As String = yourFormModel.CaptchaId

      ' create a captcha instance to be used for the captcha validation	  
      Dim yourFirstCaptcha As SimpleCaptcha = New SimpleCaptcha()
      ' execute the captcha validation
      Dim isHuman As Boolean = yourFirstCaptcha.Validate(userEnteredCaptchaCode, captchaId)

      If Not isHuman Then
        ' captcha validation failed; notify the frontend 
        ' TODO: consider logging the attempt
        Return Content("{\"success\":false}", "application/json; charset=utf-8")
      Else
        ' TODO: captcha validation succeeded; execute the protected action
        ' TODO: do not forget to notify the frontend about the results
      End If

    End Function
  End Class
End Namespace

Run the following command:

Run the following command:

The free version nuget is available on nuget.org -- while the enterprise version nuget is available in the nuget folder of the enterprise version installation and archive.

Run the following command in the Package Manager Console:

Reconfigure BotDetect CAPTCHA Component's Server-side Persistence Mechanism, If Needed

By default, BotDetect ASP.NET CAPTCHA uses SQLite as its server-side persistence mechanism. If that fits your application's requirements you can skip this step.

On the following links you can see how to reconfigure BotDetect to use Redis or Memcached instead of the SQLite -- if, per instance, your load-balanced application requires them.

Download and install the BotDetect ASP.NET CAPTCHA component. The folder where you installed BotDetect will be referred as the <BDC-DIR> in this guide.

BotDetect binaries are located in:
<BDC-DIR>/v4.4.2/lgcy-on-lgcy/bin folder.

Copy the BotDetect.dll file to the /your-app-backend-folder/bin folder -- and then reference it in your project.

Configure BotDetect CAPTCHA Component's Server-side Persistence Mechanism

BotDetect ASP.NET CAPTCHA uses SQLite as its server-side persistence mechanism. If that fits your app's requirements you should reference SQLite in your app's backend project.

• Copy the content of the following folder:
  <BDC-DIR>/v4.4.2/lgcy-on-lgcy/bin/SQLite/native-interop to the /your-app-backend-folder/bin folder.
• Reference the System.Data.SQLite.dll in your project.

On the following links you can see how to reconfigure BotDetect to use Redis or Memcached instead of the SQLite -- if, per instance, your load-balanced application requires them.

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent, { static: true }) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint = 
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint.ashx';
  }

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint = 
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint.ashx';
  }

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent, { static: true }) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint =
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint.ashx';
  }

  // 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 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
          }
        });
  }
}

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint =
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint.ashx';
  }

  // 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 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
          }
        });
  }
}

Here is the your-form-with-captcha.component.service file example:

import { Injectable } from '@angular/core';
import { HttpHeaders, HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class YourFormWithCaptchaService {

  constructor(private http: HttpClient) { }

  send(data: Object): Observable<any> {
    const options = {
      headers: new HttpHeaders({'Content-Type': 'application/json; charset=utf-8'})
    };

    return this.http.post(
      'https://your-app-backend-hostname.your-domain.com/your-app-backend-path', 
      data, options);
  }
}

Here is the your-form-with-captcha.component.service file example:

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class YourFormWithCaptchaService {

  constructor(private http: Http) { }

  send(data: Object): Observable<any> {
    const headers = new Headers({'Content-Type': 'application/json; charset=utf-8'});
    const options = new RequestOptions({ headers: headers });

    return this.http.post(
      'https://your-app-backend-hostname.your-domain.com/your-app-backend-path', 
      data, options)
        .map((response: Response) => response.json())
        .catch((error:any) => Observable.throw(error.json().error));
  }
}

public class YourFormModel
{
  public string CaptchaId { get; set; }
  public string UserEnteredCaptchaCode { get; set; }
}

Public Class YourFormModel

  Public Property CaptchaId As String
  Public Property CaptchaCode As String

End Class

// route:
// https://your-app-backend-hostname.your-domain.com/your-app-backend-path

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Text;
using System.Web.Http;
using Newtonsoft.Json;
using BotDetect.Web;

namespace App.Controllers
{
  public class YourFormController : ApiController
  {
    public HttpResponseMessage Post([FromBody]Models.YourFormModel value)
    {
      string userEnteredCaptchaCode = value.UserEnteredCaptchaCode;
      string captchaId = value.CaptchaId;
		
      // create a captcha instance to be used for the captcha validation
      SimpleCaptcha yourFirstCaptcha = new SimpleCaptcha();
      // execute the captcha validation
      bool isHuman = yourFirstCaptcha.Validate(userEnteredCaptchaCode, captchaId);

      if (isHuman == false) 
      {
        // captcha validation failed; notify the frontend 
        // TODO: consider logging the attempt
        HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK);
        response.Content = new StringContent("{\"success\":false}", Encoding.UTF8, "application/json");
        return response;
      }
      else
      {
        // TODO: captcha validation succeeded; execute the protected action
        // TODO: do not forget to notify the frontend about the results
      }    
    }
  }
}

' route:
' https://your-app-backend-hostname.your-domain.com/your-app-backend-path

Imports System.Net
Imports System.Net.Http
Imports System.Web.Http
Imports Newtonsoft.Json
Imports BotDetect.Web

Namespace Controllers
  Public Class YourFormController
    Inherits ApiController

    ' POST: api/Example
    Public Function PostValue(<FromBody()> ByVal value As Models.YourFormModel) As HttpResponseMessage
	
      Dim userEnteredCaptchaCode As String = value.UserEnteredCaptchaCode
      Dim captchaId As String = value.CaptchaId

      ' create a captcha instance to be used for the captcha validation
      Dim yourFirstCaptcha As SimpleCaptcha = New SimpleCaptcha()
      ' execute the captcha validation
      Dim isHuman As Boolean = yourFirstCaptcha.Validate(userEnteredCaptchaCode, captchaId)
			
      If Not isHuman Then
        ' captcha validation failed; notify the frontend 
        ' TODO: consider logging the attempt
        Dim response As HttpResponseMessage = Request.CreateResponse(HttpStatusCode.OK)
        response.Content = New StringContent("{\"success\":false}", Encoding.UTF8, "application/json")
        Return response
      Else
        ' TODO: captcha validation succeeded; execute the protected action
        ' TODO: do not forget to notify the frontend about the results
      End If

    End Function
  End Class
End Namespace

Run the following command:

Run the following command:

The free version nuget is available on nuget.org -- while the enterprise version nuget is available in the nuget folder of the enterprise version installation and archive.

Run the following command in the Package Manager Console:

Reconfigure BotDetect CAPTCHA Component's Server-side Persistence Mechanism, If Needed

By default, BotDetect ASP.NET CAPTCHA uses SQLite as its server-side persistence mechanism. If that fits your application's requirements you can skip this step.

On the following links you can see how to reconfigure BotDetect to use Redis or Memcached instead of the SQLite -- if, per instance, your load-balanced application requires them.

Download and install the BotDetect ASP.NET CAPTCHA component. The folder where you installed BotDetect will be referred as the <BDC-DIR> in this guide.

BotDetect binaries are located in:
<BDC-DIR>/v4.4.2/lgcy-on-lgcy/bin folder.

Copy the BotDetect.dll file to the /your-app-backend-folder/bin folder -- and then reference it in your project.

Configure BotDetect CAPTCHA Component's Server-side Persistence Mechanism

BotDetect ASP.NET CAPTCHA uses SQLite as its server-side persistence mechanism. If that fits your app's requirements you should reference SQLite in your app's backend project.

• Copy the content of the following folder:
  <BDC-DIR>/v4.4.2/lgcy-on-lgcy/bin/SQLite/native-interop to the /your-app-backend-folder/bin folder.
• Reference the System.Data.SQLite.dll in your project.

On the following links you can see how to reconfigure BotDetect to use Redis or Memcached instead of the SQLite -- if, per instance, your load-balanced application requires them.

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent, { static: true }) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint = 
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint.ashx';
  }

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint = 
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint.ashx';
  }

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent, { static: true }) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint =
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint.ashx';
  }

  // 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 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
          }
        });
  }
}

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint =
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint.ashx';
  }

  // 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 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
          }
        });
  }
}

Here is the your-form-with-captcha.component.service file example:

import { Injectable } from '@angular/core';
import { HttpHeaders, HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class YourFormWithCaptchaService {

  constructor(private http: HttpClient) { }

  send(data: Object): Observable<any> {
    const options = {
      headers: new HttpHeaders({'Content-Type': 'application/json; charset=utf-8'})
    };

    return this.http.post(
      'https://your-app-backend-hostname.your-domain.com/your-app-backend-path', 
      data, options);
  }
}

Here is the your-form-with-captcha.component.service file example:

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class YourFormWithCaptchaService {

  constructor(private http: Http) { }

  send(data: Object): Observable<any> {
    const headers = new Headers({'Content-Type': 'application/json; charset=utf-8'});
    const options = new RequestOptions({ headers: headers });

    return this.http.post(
      'https://your-app-backend-hostname.your-domain.com/your-app-backend-path', 
      data, options)
        .map((response: Response) => response.json())
        .catch((error:any) => Observable.throw(error.json().error));
  }
}

<%@ WebHandler Language="C#" Class="yourFormPostHandler" %>
// route:
// https://your-app-backend-hostname.your-domain.com/your-app-backend-path

using System;
using System.Web;
using System.IO;
using Newtonsoft.Json;
using System.Collections.Generic;
using BotDetect.Web;

public class YourFormPostHandler : IHttpHandler
{
  public void ProcessRequest (HttpContext context)
  {
    if (HttpContext.Current.Request.HttpMethod == "POST")
    {
      string dataJson = new StreamReader(context.Request.InputStream).ReadToEnd();

      Dictionary<string, string> formDataObj = new Dictionary<string, string>();
      formDataObj = JsonConvert.DeserializeObject<Dictionary<string, string>>(dataJson);

      string userEnteredCaptchaCode = formDataObj["userEnteredCaptchaCode"];
      string captchaId = formDataObj["captchaId"];

      // create a captcha instance to be used for the captcha validation
      SimpleCaptcha yourFirstCaptcha = new SimpleCaptcha();
      // execute the captcha validation
      bool isHuman = yourFirstCaptcha.Validate(userEnteredCaptchaCode, captchaId);

      if (isHuman == false) 
      {
        // captcha validation failed; notify the frontend 
        // TODO: consider logging the attempt
        context.Response.ContentType = "application/json; charset=utf-8";
        context.Response.Write("{\"success\":false}");
        return;
      }
      else
      {
        // TODO: captcha validation succeeded; execute the protected action
        // TODO: do not forget to notify the frontend about the results
      }    
    }
  }
}

<%@ WebHandler Language="VB" Class="yourFormPostHandler" %>
' route:
' https://your-app-backend-hostname.your-domain.com/your-app-backend-path

Imports System
Imports System.Web
Imports Newtonsoft.Json
Imports System.IO
Imports BotDetect.Web

Public Class YourFormPostHandler : Implements IHttpHandler

  Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest

    If HttpContext.Current.Request.HttpMethod = "POST" Then
      Dim dataJson As String = New StreamReader(context.Request.InputStream).ReadToEnd()

      Dim formDataObj As Dictionary(Of String, String) = New Dictionary(Of String, String)()
      formDataObj = JsonConvert.DeserializeObject(Of Dictionary(Of String, String))(dataJson)

      Dim userEnteredCaptchaCode As String = formDataObj("userEnteredCaptchaCode")
      Dim captchaId As String = formDataObj("captchaId")

      ' create a captcha instance to be used for the captcha validation
      Dim yourFirstCaptcha As SimpleCaptcha = New SimpleCaptcha()
      ' execute the captcha validation
      Dim isHuman As Boolean = yourFirstCaptcha.Validate(userEnteredCaptchaCode, captchaId)

      If Not isHuman Then
        ' captcha validation failed; notify the frontend 
        ' TODO: consider logging the attempt
        context.Response.ContentType = "application/json; charset=utf-8"
        context.Response.Write("{\"success\":false}")
        Return
      Else
        ' TODO: captcha validation succeeded; execute the protected action
        ' TODO: do not forget to notify the frontend about the results
      End If
    End If
  End Sub
End Class

Run the following command:

Run the following command:

Install BotDetect Java CAPTCHA dependencies

Download and unpack the BotDetect Java CAPTCHA library archive.

The folder where you unpacked the BotDetect archive will be referred as the <BDC-DIR> in this guide. It contains the BotDetect jars.

Copy the <BDC-DIR>/botdetect-4.0.beta3.7.jar and <BDC-DIR>/botdetect-servlet-4.0.beta3.7.jar to the /your-app-backend-folder/WEB-INF/lib folder.

Configure BotDetect CAPTCHA Component's Server-side Persistence Mechanism

BotDetect Java CAPTCHA uses HSQLDB as its server-side persistence mechanism.

If that fits your app's requirements you should copy the <BDC-DIR>/hsqldb.jar to /your-app-backend-folder/WEB-INF/lib folder.

On the following links you can see how to reconfigure BotDetect to use Redis or Memcached instead of the HSQLDB -- if, per instance, your load-balanced application requires them.

Install BotDetect Java CAPTCHA dependencies

The free version Maven artifacts are available from our public repository; while the enterprise version jars are available in the root folder of the enterprise version's archive.

To reference the BotDetect dependency from our public repository, the repository itself has to be declared first -- add the highlighted lines to your app's backend pom.xml file:

<repository>
  <id>captcha</id>
  <name>BotDetect Captcha Repository</name>
  <url>https://git.captcha.com/botdetect-java-captcha.git/blob_plain/HEAD:/</url>
</repository>

Then, declare the BotDetect dependency in your app's backend pom.xml file, too:

<dependency>
  <groupId>com.captcha</groupId>
  <artifactId>botdetect-servlet</artifactId>
  <version>4.0.beta3.7</version>
</dependency>

Reconfigure BotDetect CAPTCHA Component's Server-side Persistence Mechanism, If Needed

By default, BotDetect Java CAPTCHA uses HSQLDB as its server-side persistence mechanism. If that fits your application's requirements you can skip this step.

On the following links you can see how to reconfigure BotDetect to use Redis or Memcached instead of the HSQLDB -- if, per instance, your load-balanced application requires them.

Install BotDetect Java CAPTCHA dependencies

The free version Maven artifacts are available from our public repository; while the enterprise version jars are available in the root folder of the enterprise version's archive.

To reference the BotDetect dependency from our public repository, the repository itself has to be declared first -- add the highlighted line to your app's backend build.gradle file:

repositories {
  maven {
    url "https://git.captcha.com/botdetect-java-captcha.git/blob_plain/HEAD:/"
  }
  ...    
}

Then, declare the BotDetect dependency in your app's backend build.gradle file, too:

dependencies {
  ...
  compile 'com.captcha:botdetect-servlet:4.0.beta3.7'
  ...
}

Reconfigure BotDetect CAPTCHA Component's Server-side Persistence Mechanism, If Needed

By default, BotDetect Java CAPTCHA uses HSQLDB as its server-side persistence mechanism. If that fits your application's requirements you can skip this step.

On the following links you can see how to reconfigure BotDetect to use Redis or Memcached instead of the HSQLDB -- if, per instance, your load-balanced application requires them.

Install BotDetect Java CAPTCHA dependencies

The free version Maven artifacts are available from our public repository; while the enterprise version jars are available in the root folder of the enterprise version's archive.

To reference the BotDetect dependency from our public repository, the repository itself has to be declared first -- add the highlighted line to your app's backend ivy-settings.xml file:

<ivysettings>
  <properties file="build.properties" />
  <settings defaultResolver="default-chain"/>
  <resolvers>
    <chain name="default-chain">
      <ibiblio name="botdetect" 
               root="https://git.captcha.com/botdetect-java-captcha.git/blob_plain/HEAD:" 
               m2compatible="true"/>
      ...
    </chain>
  </resolvers>
</ivysettings>

Then, declare the BotDetect dependency in your app's backend ivy.xml file, too:

<ivy-module version="2.0">
  <info organisation="org.apache" module="WebProject" />

  <!-- Classpath management, thanks Maven -->
  <configurations>
    <conf name="compile" description="compile dependencies"/>
    <conf name="runtime" description="runtime dependencies" extends="compile"/>
    <conf name="test"    description="test dependencies" extends="runtime"/>
  </configurations>

  <dependencies>
    <dependency org="com.captcha" 
	        name="botdetect-servlet" 
	        rev="4.0.beta3.7" 
	        conf="compile->default"/>
    ...
  </dependencies>
</ivy-module>

Ensure that your app's backend build.xml file has a build target with the ivy:retrieve task:

<target name="resolve" description="retrieve dependencies with ivy">
  <echo message="Getting dependencies..." />
  <ivy:retrieve />
  <ivy:cachepath pathid="compile.path" conf="compile" />
  <ivy:cachepath pathid="runtime.path" conf="runtime" />
  <ivy:cachepath pathid="test.path" conf="test" />
</target>

Reconfigure BotDetect CAPTCHA Component's Server-side Persistence Mechanism, If Needed

By default, BotDetect Java CAPTCHA uses HSQLDB as its server-side persistence mechanism. If that fits your application's requirements you can skip this step.

On the following links you can see how to reconfigure BotDetect to use Redis or Memcached instead of the HSQLDB -- if, per instance, your load-balanced application requires them.

Install BotDetect Java CAPTCHA dependencies

The free version BotDetect jars are available from our public repository; while the enterprise version jars are available in the root folder of the enterprise version's archive.

To declare the BotDetect dependencies from our public repository; add an additional target, consisting of the following lines, to your app's backend build.xml file:

<target name="botdetect-dependencies" description="BotDetect Java CAPTCHA library">
    <echo message="Getting BotDetect..." />
    <mkdir dir="lib" />
    <get src="https://git.captcha.com/botdetect-java-captcha.git/blob_plain/HEAD:/com/captcha/botdetect/4.0.beta3.7/botdetect-4.0.beta3.7.jar" dest="lib/botdetect-4.0.beta3.7.jar" usetimestamp="true" />
    <get src="https://git.captcha.com/botdetect-java-captcha.git/blob_plain/HEAD:/com/captcha/botdetect-servlet/4.0.beta3.7/botdetect-servlet-4.0.beta3.7.jar" dest="lib/botdetect-servlet-4.0.beta3.7.jar" usetimestamp="true" />
    <get src="http://central.maven.org/maven2/org/hsqldb/hsqldb/2.3.4/hsqldb-2.3.4.jar" dest="lib/hsqldb-2.3.4.jar" usetimestamp="true" />
</target>

To retrieve BotDetect dependencies during the build, reference the above added target element inside the depends attribute of a target element that compiles your backend app:

<target name="compile" depends="botdetect-dependencies">
  <copydir src="${web.dir}" dest="${build.dir}" />
  <mkdir dir="${web.classes.dir}" />
  <javac destdir="${web.classes.dir}" source="${jdk.version}" target="${jdk.version}"
    debug="true" includeantruntime="false" classpathref="compile.path">
    <src path="${src.dir}" />
  </javac>
</target>

Reconfigure BotDetect CAPTCHA Component's Server-side Persistence Mechanism, If Needed

By default, BotDetect Java CAPTCHA uses HSQLDB as its server-side persistence mechanism. If that fits your application's requirements you can skip this step.

On the following links you can see how to reconfigure BotDetect to use Redis or Memcached instead of the HSQLDB -- if, per instance, your load-balanced application requires them.

Register the simple-captcha-endpoint path, and map it to the SimpleCaptchaServlet, by adding the highlighted lines from the snippet below into your app's web.xml file.

<servlet>
  <servlet-name>BotDetect Captcha</servlet-name>
  <servlet-class>com.captcha.botdetect.web.servlet.SimpleCaptchaServlet</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>BotDetect Captcha</servlet-name>
  <url-pattern>/simple-captcha-endpoint</url-pattern>
</servlet-mapping>

Register the simple-captcha-endpoint path, and map it to the SimpleCaptchaServlet, by adding the highlighted lines from the snippet bellow into your app's 'application class' definition.

@SpringBootApplication
public class YourAppBackend {

  [...]

  @Bean
  ServletRegistrationBean captchaServletRegistration () {
    ServletRegistrationBean srb = new ServletRegistrationBean();
    srb.setServlet(new SimpleCaptchaServlet());
    srb.addUrlMappings("/simple-captcha-endpoint");
    return srb;
  }
}

Set the location of the botdetect.xml configuration file, by adding the highlighted lines from the snippet bellow into your app's 'application class' definition.

@SpringBootApplication
public class YourAppBackend {

  [...]

  @Bean
  public ServletContextInitializer initializer() {
    return new ServletContextInitializer() {

    @Override
    public void onStartup(ServletContext servletContext) throws ServletException {
      servletContext.setInitParameter(
	    "BDC_configFileLocation", "/WEB-INF/botdetect.xml");
    }
  }
}

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent, { static: true }) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint = 
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint';
  }

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint = 
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint';
  }

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent, { static: true }) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint =
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint';
  }

  // 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 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
          }
        });
  }
}

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint =
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint';
  }

  // 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 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
          }
        });
  }
}

Here is the your-form-with-captcha.component.service file example:

import { Injectable } from '@angular/core';
import { HttpHeaders, HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class YourFormWithCaptchaService {

  constructor(private http: HttpClient) { }

  send(data: Object): Observable<any> {
    const options = {
      headers: new HttpHeaders({'Content-Type': 'application/json; charset=utf-8'})
    };

    return this.http.post(
      'https://your-app-backend-hostname.your-domain.com/your-app-backend-path', 
      data, options);
  }
}

Here is the your-form-with-captcha.component.service file example:

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class YourFormWithCaptchaService {

  constructor(private http: Http) { }

  send(data: Object): Observable<any> {
    const headers = new Headers({'Content-Type': 'application/json; charset=utf-8'});
    const options = new RequestOptions({ headers: headers });

    return this.http.post(
      'https://your-app-backend-hostname.your-domain.com/your-app-backend-path', 
      data, options)
        .map((response: Response) => response.json())
        .catch((error:any) => Observable.throw(error.json().error));
  }
}

Run the following command:

Run the following command:

Install BotDetect Java CAPTCHA dependencies

Download and unpack the BotDetect Java CAPTCHA library archive.

The folder where you unpacked the BotDetect archive will be referred as the <BDC-DIR> in this guide. It contains the BotDetect jars.

Copy the <BDC-DIR>/botdetect-4.0.beta3.7.jar and <BDC-DIR>/botdetect-servlet-4.0.beta3.7.jar to the /your-app-backend-folder/WEB-INF/lib folder.

Configure BotDetect CAPTCHA Component's Server-side Persistence Mechanism

BotDetect Java CAPTCHA uses HSQLDB as its server-side persistence mechanism.

If that fits your app's requirements you should copy the <BDC-DIR>/hsqldb.jar to /your-app-backend-folder/WEB-INF/lib folder.

On the following links you can see how to reconfigure BotDetect to use Redis or Memcached instead of the HSQLDB -- if, per instance, your load-balanced application requires them.

Install BotDetect Java CAPTCHA dependencies

The free version Maven artifacts are available from our public repository; while the enterprise version jars are available in the root folder of the enterprise version's archive.

To reference the BotDetect dependency from our public repository, the repository itself has to be declared first -- add the highlighted lines to your app's backend pom.xml file:

<repository>
  <id>captcha</id>
  <name>BotDetect Captcha Repository</name>
  <url>https://git.captcha.com/botdetect-java-captcha.git/blob_plain/HEAD:/</url>
</repository>

Then, declare the BotDetect dependency in your app's backend pom.xml file, too:

<dependency>
  <groupId>com.captcha</groupId>
  <artifactId>botdetect-servlet</artifactId>
  <version>4.0.beta3.7</version>
</dependency>

Reconfigure BotDetect CAPTCHA Component's Server-side Persistence Mechanism, If Needed

By default, BotDetect Java CAPTCHA uses HSQLDB as its server-side persistence mechanism. If that fits your application's requirements you can skip this step.

On the following links you can see how to reconfigure BotDetect to use Redis or Memcached instead of the HSQLDB -- if, per instance, your load-balanced application requires them.

Install BotDetect Java CAPTCHA dependencies

The free version Maven artifacts are available from our public repository; while the enterprise version jars are available in the root folder of the enterprise version's archive.

To reference the BotDetect dependency from our public repository, the repository itself has to be declared first -- add the highlighted line to your app's backend build.gradle file:

repositories {
  maven {
    url "https://git.captcha.com/botdetect-java-captcha.git/blob_plain/HEAD:/"
  }
  ...    
}

Then, declare the BotDetect dependency in your app's backend build.gradle file, too:

dependencies {
  ...
  compile 'com.captcha:botdetect-servlet:4.0.beta3.7'
  ...
}

Reconfigure BotDetect CAPTCHA Component's Server-side Persistence Mechanism, If Needed

By default, BotDetect Java CAPTCHA uses HSQLDB as its server-side persistence mechanism. If that fits your application's requirements you can skip this step.

On the following links you can see how to reconfigure BotDetect to use Redis or Memcached instead of the HSQLDB -- if, per instance, your load-balanced application requires them.

Install BotDetect Java CAPTCHA dependencies

The free version Maven artifacts are available from our public repository; while the enterprise version jars are available in the root folder of the enterprise version's archive.

To reference the BotDetect dependency from our public repository, the repository itself has to be declared first -- add the highlighted line to your app's backend ivy-settings.xml file:

<ivysettings>
  <properties file="build.properties" />
  <settings defaultResolver="default-chain"/>
  <resolvers>
    <chain name="default-chain">
      <ibiblio name="botdetect" 
               root="https://git.captcha.com/botdetect-java-captcha.git/blob_plain/HEAD:" 
               m2compatible="true"/>
      ...
    </chain>
  </resolvers>
</ivysettings>

Then, declare the BotDetect dependency in your app's backend ivy.xml file, too:

<ivy-module version="2.0">
  <info organisation="org.apache" module="WebProject" />

  <!-- Classpath management, thanks Maven -->
  <configurations>
    <conf name="compile" description="compile dependencies"/>
    <conf name="runtime" description="runtime dependencies" extends="compile"/>
    <conf name="test"    description="test dependencies" extends="runtime"/>
  </configurations>

  <dependencies>
    <dependency org="com.captcha" 
	        name="botdetect-servlet" 
	        rev="4.0.beta3.7" 
	        conf="compile->default"/>
    ...
  </dependencies>
</ivy-module>

Ensure that your app's backend build.xml file has a build target with the ivy:retrieve task:

<target name="resolve" description="retrieve dependencies with ivy">
  <echo message="Getting dependencies..." />
  <ivy:retrieve />
  <ivy:cachepath pathid="compile.path" conf="compile" />
  <ivy:cachepath pathid="runtime.path" conf="runtime" />
  <ivy:cachepath pathid="test.path" conf="test" />
</target>

Reconfigure BotDetect CAPTCHA Component's Server-side Persistence Mechanism, If Needed

By default, BotDetect Java CAPTCHA uses HSQLDB as its server-side persistence mechanism. If that fits your application's requirements you can skip this step.

On the following links you can see how to reconfigure BotDetect to use Redis or Memcached instead of the HSQLDB -- if, per instance, your load-balanced application requires them.

Install BotDetect Java CAPTCHA dependencies

The free version BotDetect jars are available from our public repository; while the enterprise version jars are available in the root folder of the enterprise version's archive.

To declare the BotDetect dependencies from our public repository; add an additional target, consisting of the following lines, to your app's backend build.xml file:

<target name="botdetect-dependencies" description="BotDetect Java CAPTCHA library">
    <echo message="Getting BotDetect..." />
    <mkdir dir="lib" />
    <get src="https://git.captcha.com/botdetect-java-captcha.git/blob_plain/HEAD:/com/captcha/botdetect/4.0.beta3.7/botdetect-4.0.beta3.7.jar" dest="lib/botdetect-4.0.beta3.7.jar" usetimestamp="true" />
    <get src="https://git.captcha.com/botdetect-java-captcha.git/blob_plain/HEAD:/com/captcha/botdetect-servlet/4.0.beta3.7/botdetect-servlet-4.0.beta3.7.jar" dest="lib/botdetect-servlet-4.0.beta3.7.jar" usetimestamp="true" />
    <get src="http://central.maven.org/maven2/org/hsqldb/hsqldb/2.3.4/hsqldb-2.3.4.jar" dest="lib/hsqldb-2.3.4.jar" usetimestamp="true" />
</target>

To retrieve BotDetect dependencies during the build, reference the above added target element inside the depends attribute of a target element that compiles your backend app:

<target name="compile" depends="botdetect-dependencies">
  <copydir src="${web.dir}" dest="${build.dir}" />
  <mkdir dir="${web.classes.dir}" />
  <javac destdir="${web.classes.dir}" source="${jdk.version}" target="${jdk.version}"
    debug="true" includeantruntime="false" classpathref="compile.path">
    <src path="${src.dir}" />
  </javac>
</target>

Reconfigure BotDetect CAPTCHA Component's Server-side Persistence Mechanism, If Needed

By default, BotDetect Java CAPTCHA uses HSQLDB as its server-side persistence mechanism. If that fits your application's requirements you can skip this step.

On the following links you can see how to reconfigure BotDetect to use Redis or Memcached instead of the HSQLDB -- if, per instance, your load-balanced application requires them.

Register the simple-captcha-endpoint path, and map it to the SimpleCaptchaServlet, by adding the highlighted lines from the snippet below into your app's web.xml file.

<servlet>
  <servlet-name>BotDetect Captcha</servlet-name>
  <servlet-class>com.captcha.botdetect.web.servlet.SimpleCaptchaServlet</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>BotDetect Captcha</servlet-name>
  <url-pattern>/simple-captcha-endpoint</url-pattern>
</servlet-mapping>

Register the simple-captcha-endpoint path, and map it to the SimpleCaptchaServlet, by adding the highlighted lines from the snippet bellow into your app's 'application class' definition.

@SpringBootApplication
public class YourAppBackend {

  [...]

  @Bean
  ServletRegistrationBean captchaServletRegistration () {
    ServletRegistrationBean srb = new ServletRegistrationBean();
    srb.setServlet(new SimpleCaptchaServlet());
    srb.addUrlMappings("/simple-captcha-endpoint");
    return srb;
  }
}

Set the location of the botdetect.xml configuration file, by adding the highlighted lines from the snippet bellow into your app's 'application class' definition.

@SpringBootApplication
public class YourAppBackend {

  [...]

  @Bean
  public ServletContextInitializer initializer() {
    return new ServletContextInitializer() {

    @Override
    public void onStartup(ServletContext servletContext) throws ServletException {
      servletContext.setInitParameter(
	    "BDC_configFileLocation", "/WEB-INF/botdetect.xml");
    }
  }
}

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent, { static: true }) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint = 
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint';
  }

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint = 
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint';
  }

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent, { static: true }) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint =
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint';
  }

  // 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 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
          }
        });
  }
}

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint =
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint';
  }

  // 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 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
          }
        });
  }
}

Here is the your-form-with-captcha.component.service file example:

import { Injectable } from '@angular/core';
import { HttpHeaders, HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class YourFormWithCaptchaService {

  constructor(private http: HttpClient) { }

  send(data: Object): Observable<any> {
    const options = {
      headers: new HttpHeaders({'Content-Type': 'application/json; charset=utf-8'})
    };

    return this.http.post(
      'https://your-app-backend-hostname.your-domain.com/your-app-backend-path', 
      data, options);
  }
}

Here is the your-form-with-captcha.component.service file example:

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class YourFormWithCaptchaService {

  constructor(private http: Http) { }

  send(data: Object): Observable<any> {
    const headers = new Headers({'Content-Type': 'application/json; charset=utf-8'});
    const options = new RequestOptions({ headers: headers });

    return this.http.post(
      'https://your-app-backend-hostname.your-domain.com/your-app-backend-path', 
      data, options)
        .map((response: Response) => response.json())
        .catch((error:any) => Observable.throw(error.json().error));
  }
}

Run the following command:

Run the following command:

Install BotDetect Java CAPTCHA dependencies

Download and unpack the BotDetect Java CAPTCHA library archive.

The folder where you unpacked the BotDetect archive will be referred as the <BDC-DIR> in this guide. It contains the BotDetect jars.

Copy the <BDC-DIR>/botdetect-4.0.beta3.7.jar and <BDC-DIR>/botdetect-servlet-4.0.beta3.7.jar to the /your-app-backend-folder/WEB-INF/lib folder.

Configure BotDetect CAPTCHA Component's Server-side Persistence Mechanism

BotDetect Java CAPTCHA uses HSQLDB as its server-side persistence mechanism.

If that fits your app's requirements you should copy the <BDC-DIR>/hsqldb.jar to /your-app-backend-folder/WEB-INF/lib folder.

On the following links you can see how to reconfigure BotDetect to use Redis or Memcached instead of the HSQLDB -- if, per instance, your load-balanced application requires them.

Install BotDetect Java CAPTCHA dependencies

The free version Maven artifacts are available from our public repository; while the enterprise version jars are available in the root folder of the enterprise version's archive.

To reference the BotDetect dependency from our public repository, the repository itself has to be declared first -- add the highlighted lines to your app's backend pom.xml file:

<repository>
  <id>captcha</id>
  <name>BotDetect Captcha Repository</name>
  <url>https://git.captcha.com/botdetect-java-captcha.git/blob_plain/HEAD:/</url>
</repository>

Then, declare the BotDetect dependency in your app's backend pom.xml file, too:

<dependency>
  <groupId>com.captcha</groupId>
  <artifactId>botdetect-servlet</artifactId>
  <version>4.0.beta3.7</version>
</dependency>

Reconfigure BotDetect CAPTCHA Component's Server-side Persistence Mechanism, If Needed

By default, BotDetect Java CAPTCHA uses HSQLDB as its server-side persistence mechanism. If that fits your application's requirements you can skip this step.

On the following links you can see how to reconfigure BotDetect to use Redis or Memcached instead of the HSQLDB -- if, per instance, your load-balanced application requires them.

Install BotDetect Java CAPTCHA dependencies

The free version Maven artifacts are available from our public repository; while the enterprise version jars are available in the root folder of the enterprise version's archive.

To reference the BotDetect dependency from our public repository, the repository itself has to be declared first -- add the highlighted line to your app's backend build.gradle file:

repositories {
  maven {
    url "https://git.captcha.com/botdetect-java-captcha.git/blob_plain/HEAD:/"
  }
  ...    
}

Then, declare the BotDetect dependency in your app's backend build.gradle file, too:

dependencies {
  ...
  compile 'com.captcha:botdetect-servlet:4.0.beta3.7'
  ...
}

Reconfigure BotDetect CAPTCHA Component's Server-side Persistence Mechanism, If Needed

By default, BotDetect Java CAPTCHA uses HSQLDB as its server-side persistence mechanism. If that fits your application's requirements you can skip this step.

On the following links you can see how to reconfigure BotDetect to use Redis or Memcached instead of the HSQLDB -- if, per instance, your load-balanced application requires them.

Install BotDetect Java CAPTCHA dependencies

The free version Maven artifacts are available from our public repository; while the enterprise version jars are available in the root folder of the enterprise version's archive.

To reference the BotDetect dependency from our public repository, the repository itself has to be declared first -- add the highlighted line to your app's backend ivy-settings.xml file:

<ivysettings>
  <properties file="build.properties" />
  <settings defaultResolver="default-chain"/>
  <resolvers>
    <chain name="default-chain">
      <ibiblio name="botdetect" 
               root="https://git.captcha.com/botdetect-java-captcha.git/blob_plain/HEAD:" 
               m2compatible="true"/>
      ...
    </chain>
  </resolvers>
</ivysettings>

Then, declare the BotDetect dependency in your app's backend ivy.xml file, too:

<ivy-module version="2.0">
  <info organisation="org.apache" module="WebProject" />

  <!-- Classpath management, thanks Maven -->
  <configurations>
    <conf name="compile" description="compile dependencies"/>
    <conf name="runtime" description="runtime dependencies" extends="compile"/>
    <conf name="test"    description="test dependencies" extends="runtime"/>
  </configurations>

  <dependencies>
    <dependency org="com.captcha" 
	        name="botdetect-servlet" 
	        rev="4.0.beta3.7" 
	        conf="compile->default"/>
    ...
  </dependencies>
</ivy-module>

Ensure that your app's backend build.xml file has a build target with the ivy:retrieve task:

<target name="resolve" description="retrieve dependencies with ivy">
  <echo message="Getting dependencies..." />
  <ivy:retrieve />
  <ivy:cachepath pathid="compile.path" conf="compile" />
  <ivy:cachepath pathid="runtime.path" conf="runtime" />
  <ivy:cachepath pathid="test.path" conf="test" />
</target>

Reconfigure BotDetect CAPTCHA Component's Server-side Persistence Mechanism, If Needed

By default, BotDetect Java CAPTCHA uses HSQLDB as its server-side persistence mechanism. If that fits your application's requirements you can skip this step.

On the following links you can see how to reconfigure BotDetect to use Redis or Memcached instead of the HSQLDB -- if, per instance, your load-balanced application requires them.

Install BotDetect Java CAPTCHA dependencies

The free version BotDetect jars are available from our public repository; while the enterprise version jars are available in the root folder of the enterprise version's archive.

To declare the BotDetect dependencies from our public repository; add an additional target, consisting of the following lines, to your app's backend build.xml file:

<target name="botdetect-dependencies" description="BotDetect Java CAPTCHA library">
    <echo message="Getting BotDetect..." />
    <mkdir dir="lib" />
    <get src="https://git.captcha.com/botdetect-java-captcha.git/blob_plain/HEAD:/com/captcha/botdetect/4.0.beta3.7/botdetect-4.0.beta3.7.jar" dest="lib/botdetect-4.0.beta3.7.jar" usetimestamp="true" />
    <get src="https://git.captcha.com/botdetect-java-captcha.git/blob_plain/HEAD:/com/captcha/botdetect-servlet/4.0.beta3.7/botdetect-servlet-4.0.beta3.7.jar" dest="lib/botdetect-servlet-4.0.beta3.7.jar" usetimestamp="true" />
    <get src="http://central.maven.org/maven2/org/hsqldb/hsqldb/2.3.4/hsqldb-2.3.4.jar" dest="lib/hsqldb-2.3.4.jar" usetimestamp="true" />
</target>

To retrieve BotDetect dependencies during the build, reference the above added target element inside the depends attribute of a target element that compiles your backend app:

<target name="compile" depends="botdetect-dependencies">
  <copydir src="${web.dir}" dest="${build.dir}" />
  <mkdir dir="${web.classes.dir}" />
  <javac destdir="${web.classes.dir}" source="${jdk.version}" target="${jdk.version}"
    debug="true" includeantruntime="false" classpathref="compile.path">
    <src path="${src.dir}" />
  </javac>
</target>

Reconfigure BotDetect CAPTCHA Component's Server-side Persistence Mechanism, If Needed

By default, BotDetect Java CAPTCHA uses HSQLDB as its server-side persistence mechanism. If that fits your application's requirements you can skip this step.

On the following links you can see how to reconfigure BotDetect to use Redis or Memcached instead of the HSQLDB -- if, per instance, your load-balanced application requires them.

Register the simple-captcha-endpoint path, and map it to the SimpleCaptchaServlet, by adding the highlighted lines from the snippet below into your app's web.xml file.

<servlet>
  <servlet-name>BotDetect Captcha</servlet-name>
  <servlet-class>com.captcha.botdetect.web.servlet.SimpleCaptchaServlet</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>BotDetect Captcha</servlet-name>
  <url-pattern>/simple-captcha-endpoint</url-pattern>
</servlet-mapping>

Register the simple-captcha-endpoint path, and map it to the SimpleCaptchaServlet, by adding the highlighted lines from the snippet bellow into your app's 'application class' definition.

@SpringBootApplication
public class YourAppBackend {

  [...]

  @Bean
  ServletRegistrationBean captchaServletRegistration () {
    ServletRegistrationBean srb = new ServletRegistrationBean();
    srb.setServlet(new SimpleCaptchaServlet());
    srb.addUrlMappings("/simple-captcha-endpoint");
    return srb;
  }
}

Set the location of the botdetect.xml configuration file, by adding the highlighted lines from the snippet bellow into your app's 'application class' definition.

@SpringBootApplication
public class YourAppBackend {

  [...]

  @Bean
  public ServletContextInitializer initializer() {
    return new ServletContextInitializer() {

    @Override
    public void onStartup(ServletContext servletContext) throws ServletException {
      servletContext.setInitParameter(
	    "BDC_configFileLocation", "/WEB-INF/botdetect.xml");
    }
  }
}

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent, { static: true }) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint = 
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint';
  }

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint = 
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint';
  }

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent, { static: true }) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint =
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint';
  }

  // 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 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
          }
        });
  }
}

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

@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 {

  @ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint =
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint';
  }

  // 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 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
          }
        });
  }
}

Here is the your-form-with-captcha.component.service file example:

import { Injectable } from '@angular/core';
import { HttpHeaders, HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class YourFormWithCaptchaService {

  constructor(private http: HttpClient) { }

  send(data: Object): Observable<any> {
    const options = {
      headers: new HttpHeaders({'Content-Type': 'application/json; charset=utf-8'})
    };

    return this.http.post(
      'https://your-app-backend-hostname.your-domain.com/your-app-backend-path', 
      data, options);
  }
}

Here is the your-form-with-captcha.component.service file example:

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class YourFormWithCaptchaService {

  constructor(private http: Http) { }

  send(data: Object): Observable<any> {
    const headers = new Headers({'Content-Type': 'application/json; charset=utf-8'});
    const options = new RequestOptions({ headers: headers });

    return this.http.post(
      'https://your-app-backend-hostname.your-domain.com/your-app-backend-path', 
      data, options)
        .map((response: Response) => response.json())
        .catch((error:any) => Observable.throw(error.json().error));
  }
}