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 useRedis 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-interopto 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 useRedis 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 StringEnd 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.WebNamespace 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 ClassEnd 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 useRedis 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-interopto 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 useRedis 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 StringEnd Class

// route:// https://your-app-backend-hostname.your-domain.com/your-app-backend-pathusing 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-pathImports System.NetImports System.Net.HttpImports System.Web.HttpImports Newtonsoft.JsonImports BotDetect.WebNamespace 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 ClassEnd 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 useRedis 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-interopto 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 useRedis 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-pathusing 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-pathImports SystemImports System.WebImports Newtonsoft.JsonImports System.IOImports BotDetect.WebPublic 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 SubEnd 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 useRedis 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 snippetbellow into your app's 'application class' definition.

@SpringBootApplicationpublic 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 snippetbellow into your app's 'application class' definition.

@SpringBootApplicationpublic 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 useRedis 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 snippetbellow into your app's 'application class' definition.

@SpringBootApplicationpublic 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 snippetbellow into your app's 'application class' definition.

@SpringBootApplicationpublic 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 useRedis 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 snippetbellow into your app's 'application class' definition.

@SpringBootApplicationpublic 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 snippetbellow into your app's 'application class' definition.

@SpringBootApplicationpublic 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));  }}