How To Add BotDetect CAPTCHA Protection to Angular Application

The following step ensures that BotDetect CAPTCHA library works properly in your Angular application. Please follow it carefully.

...
import { BotDetectCaptchaModule } from 'angular-captcha';

@NgModule({
  imports: [
    ...
    BotDetectCaptchaModule.forRoot({
      captchaEndpoint: 'captcha-endpoint/BotDetectCaptcha.ashx'
    })
  ],
  ...
})
export class AppModule { }

In the code above, we import BotDetectCaptchaModule, and then declare it in metadata imports of the NgModule. In case you want to add Captcha in a child module, you will need to use forChild instead of forRoot in the code above.

The BotDetectCaptchaModule requires you to configure BotDetect ASP.NET Captcha path to captchaEndpoint setting.

Before you set the path to captchaEndpoint setting, we need to clarify what we should set here:

• captcha-endpoint: is an example path, you need to set exact path to where you have deployed BotDetect ASP.NET Captcha library. If you deployed BotDetect ASP.NET Captcha library in the root of your domain, then you don't need to set this path.
• /BotDetectCaptcha.ashx: is HttpHandler path, which is described on Register BotDetect HttpHandler for CAPTCHA Requests guide below.

To ensure that you have set a right path to captchaEndpoint setting, check it by opening the following url in your browser: http://yourdomain.com/captcha-endpoint/BotDetectCaptcha.ashx (replace the exact path of your domain). If this results with an error message ("unknown command") then you set the right path, since that is the BotDetect Captcha who responded error (when you fail to set correct path, then your server will respond with 404 instead). Please note, in order to perform this check, BotDetect Captcha Generator needs to be installed & deployed to your server.

Display BotDetect CAPTCHA In Your Angular Template

Displaying the Captcha challenge can be as simple as:

<botdetect-captcha styleName="exampleCaptcha"></botdetect-captcha>

BotDetect Captcha Angular Module provides botdetect-captcha element to add Captcha in your forms. It has styleName attribute, which you can assign it a captcha style name defined in botdetect.xml configuration file.

ASP.NET Server-side Captcha validation

...

import { CaptchaComponent } from 'angular-captcha';

@Component({
  ...
})
export class ExampleComponent {

  /**
   * BotDetect CAPTCHA component.
   */
  @ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;

  constructor(private http: Http) { }

  /**
   * Validate captcha at server-side.
   */
  validate(value, valid): void {

    if (!valid) {
      return;
    }

    const exampleUrl = '/your-server-side-api-url';

    const postData = {
      captchaCode: this.captchaComponent.captchaCode,
      captchaId: this.captchaComponent.captchaId
    }

    const headers = new Headers({ 'Content-Type': 'application/json' });
    const options = new RequestOptions({ headers: headers });

    this.http.post(exampleUrl, data, options)
      .map((response: Response) => {

        if (response.json().success) {
          // CAPTCHA validation passed at server-side
        } else {
          // CAPTCHA validation falied at client-side
        }

        // reload Captcha image
        this.captchaComponent.reloadImage();
      })
      .catch((error:any) => Observable.throw(error.json().error));
  }

}

In the code above, we inject CaptchaComponent into ExampleComponent using @ViewChild. The CaptchaComponent exposes all Captcha workflow functions and vars that we will use during the form submission part of the workflow.

To validate Captcha at server-side, we need to send both captcha id (via captchaComponent.captchaId property) and captcha code visitor submited (via captchaComponent.captchaCode property) to server-side.

On request finish, we always reload Captcha by calling the reloadImage() function of CaptchaComponent. This is needed to generate the new captcha code for the current captcha id.

At server-side API, we take captchaId and captchaCode values sent from client-side, and using Validate(captchaCode, captchaId) method of SimpleCaptcha instance we validate Captcha code. Finally, we write the validation result as json string for sending it back to client.

• Server-side Captcha validation in Web API 2:

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

namespace ProductApp.Controllers
{
    public class ExampleController : ApiController
    {
        // POST api/example
        public HttpResponseMessage Post([FromBody]Models.BasicForm value)
        {
            // validate captcha
            SimpleCaptcha captcha = new SimpleCaptcha();
            bool isHuman = captcha.Validate(value.CaptchaCode, value.CaptchaId);

            if (isHuman)
            {
                // Captcha validation passed
                // TODO: do whatever you want here
            }

            // the object that stores validation result
            Dictionary<string, bool> validationResult = new Dictionary<string, bool>();
            validationResult.Add("success", isHuman);

            // write the validation result as json string for sending it back to client
            string jsonString = JsonConvert.SerializeObject(validationResult);
            HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK);
            response.Content = new StringContent(jsonString, Encoding.UTF8, "application/json");

            return response;
        }
    }
}

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

Namespace Controllers
    Public Class ExampleController
        Inherits ApiController

        ' POST: api/Example
        Public Function PostValue(<FromBody()> ByVal value As Models.BasicForm) As HttpResponseMessage
            ' validate captcha
            Dim captcha As SimpleCaptcha = New SimpleCaptcha()
            Dim isHuman As Boolean = captcha.Validate(value.CaptchaCode, value.CaptchaId)

            If isHuman Then
                ' Captcha validation passed
                ' TODO: Do whatever you want here
            End If

            ' the object that stores validation result
            Dim validationResult As Dictionary(Of String, Boolean) = New Dictionary(Of String, Boolean)()
            validationResult.Add("success", isHuman)

            ' write the validation result as json string for sending it back to client
            Dim jsonString = JsonConvert.SerializeObject(validationResult)
            Dim response As HttpResponseMessage = Request.CreateResponse(HttpStatusCode.OK)
            response.Content = New StringContent(jsonString, Encoding.UTF8, "application/json")

            Return response
        End Function

    End Class
End Namespace

• Server-side Captcha validation in a Generic Handler:

<%@ WebHandler Language="C#" Class="BasicHandler" %>
using System;
using System.Web;
using System.IO;
using Newtonsoft.Json;
using System.Collections.Generic;
using BotDetect.Web;

public class BasicHandler : 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 captchaId = formDataObj["captchaId"];
            string captchaCode = formDataObj["captchaCode"];

            // validate captcha
            SimpleCaptcha captcha = new SimpleCaptcha();
            bool isHuman = captcha.Validate(captchaCode, captchaId);

            if (isHuman)
            {
                // Captcha validation passed
                // TODO: do whatever you want here
            }

            // the object that stores validation result
            Dictionary<string, bool> validationResult = new Dictionary<string, bool>();
            validationResult.Add("success", isHuman);

            // write the validation result as json string for sending it back to client
            context.Response.ContentType = "application/json; charset=utf-8";
            context.Response.Write(JsonConvert.SerializeObject(validationResult));
        }
    }
}

<%@ WebHandler Language="VB" Class="BasicHandler" %>
Imports System
Imports System.Web
Imports Newtonsoft.Json
Imports System.IO
Imports BotDetect.Web

Public Class BasicHandler : 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 captchaId As String = formDataObj("captchaId")
            Dim captchaCode As String = formDataObj("captchaCode")

            ' validate captcha
            Dim captcha As SimpleCaptcha = New SimpleCaptcha()
            Dim isHuman As Boolean = captcha.Validate(captchaCode, captchaId)

            If isHuman Then
                ' Captcha validation passed
                ' TODO: Do whatever you want here
            End If

            ' the object that stores validation result
            Dim validationResult As Dictionary(Of String, Boolean) = New Dictionary(Of String, Boolean)()
            validationResult.Add("success", isHuman)

            ' write the validation result as json string for sending it back to client
            context.Response.ContentType = "application/json; charset=utf-8"
            context.Response.Write(JsonConvert.SerializeObject(validationResult))
        End If
    End Sub
End Class

ASP.NET server-side Configuration

Install BotDetect ASP.NET Captcha library on Server-side

Before integrating BotDetect Captcha in your Angular application, you need to ensure you have installed BotDetect ASP.NET Captcha library on your server where your Angular application back end is hosted. Here is where you can find how:

• Register BotDetect HttpHandler for CAPTCHA Requests

Configure BotDetect Captcha options

<?xml version="1.0" encoding="UTF-8"?>
<botdetect xmlns="https://captcha.com/schema/net" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="https://captcha.com/schema/net 
      https://captcha.com/schema/net/botdetect-4.4.0.xsd">

  <captchaStyles>
    
    <captchaStyle>
      <name>exampleCaptcha</name>
      <userInputID>captchaCode</userInputID>
      <codeLength>6</codeLength>
    </captchaStyle>

    <captchaStyle>
      <name>loginCaptcha</name>
      <userInputID>captchaCode</userInputID>
      <codeLength>4-6</codeLength>
      <codeStyle>Alphanumeric</codeStyle>
    </captchaStyle>

  </captchaStyles>

</botdetect>

To configure captcha options, you need to create botdetect.xml configuration file (with xml content like the one above this) in root folder of your project. The full list of available Captcha configuration options and related instructions at the Captcha configuration options page.

The following step ensures that BotDetect CAPTCHA library works properly in your Angular application. Please follow it carefully.

...
import { BotDetectCaptchaModule } from 'angular-captcha';

@NgModule({
  imports: [
    ...
    BotDetectCaptchaModule.forRoot({
      captchaEndpoint: 'captcha-endpoint/botdetectcaptcha'
    })
  ],
  ...
})
export class AppModule { }

In the code above, we import BotDetectCaptchaModule, and then declare it in metadata imports of the NgModule. In case you want to add Captcha in a child module, you will need to use forChild instead of forRoot in the code above.

The BotDetectCaptchaModule requires you to configure BotDetect Java Captcha path to captchaEndpoint setting.

Before you set the path to captchaEndpoint setting, we need to clarify what we should set here:

• captcha-endpoint: is an example path, you need to set exact path to where you have deployed BotDetect Java Captcha library. If you deployed BotDetect Java Captcha library in the root of your domain, then you don't need to set this path.
• /botdetectcaptcha: is SimpleCaptchaServlet path, which is described on Register SimpleCaptchaServlet guide below.

To ensure that you set the captchaEndpoint to right path, check it by opening the following url in your browser: http://yourdomain.com/captcha-endpoint/botdetectcaptcha (replace the 'yourdomain.com' with your domain). If opening the url in browser results with an error message ('unknown command') then you set the right path since it is the BotDetect Captcha that responded with 'unknown command' error. Otherwise, if you failed to set right path, then your server will respond with 404 instead.

Please note, in order to perform this check, BotDetect Captcha Generator needs to be deployed to your server (described in II. Captcha Generator server-side configuration).

Display BotDetect CAPTCHA In Your Angular Template

Displaying the Captcha challenge can be as simple as:

<botdetect-captcha styleName="exampleCaptcha"></botdetect-captcha>

BotDetect Captcha Angular Module provides botdetect-captcha element to add Captcha in your forms. It has styleName attribute, which you can assign it a captcha style name defined in botdetect.xml configuration file.

PHP Server-side Captcha validation

...

import { CaptchaComponent } from 'angular-captcha';

@Component({
  ...
})
export class ExampleComponent {

  /**
   * BotDetect CAPTCHA component.
   */
  @ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;

  constructor(private http: Http) { }

  /**
   * Validate captcha at server-side.
   */
  validate(value, valid): void {

    if (!valid) {
      return;
    }

    const exampleUrl = '/your-server-side-api-url';

    const postData = {
      captchaCode: this.captchaComponent.captchaCode,
      captchaId: this.captchaComponent.captchaId
    }

    const headers = new Headers({ 'Content-Type': 'application/json' });
    const options = new RequestOptions({ headers: headers });

    this.http.post(exampleUrl, data, options)
      .map((response: Response) => {

        if (response.json().success) {
          // CAPTCHA validation passed at server-side
        } else {
          // CAPTCHA validation falied at client-side
        }

        // reload Captcha image
        this.captchaComponent.reloadImage();
      })
      .catch((error:any) => Observable.throw(error.json().error));
  }

}

In the code above, we inject CaptchaComponent into ExampleComponent using @ViewChild. The CaptchaComponent exposes all Captcha workflow functions and vars that we will use during the form submission part of the workflow.

To validate Captcha at server-side, we need to send both captcha id (via captchaComponent.captchaId property) and captcha code visitor submited (via captchaComponent.captchaCode property) to server-side.

On request finish, we always reload Captcha by calling the reloadImage() function of CaptchaComponent. This is needed to generate the new captcha code for the current captcha id.

At server-side API, we take captchaId and captchaCode values sent from client-side, and using Validate(captchaCode, captchaId) method of SimpleCaptcha instance we validate Captcha code. Finally, we write the validation result as json string for sending it back to client.

• Server-side Captcha validation in Plain PHP:

<?php
require("captcha-endpoint/simple-botdetect.php");

// directly accessing this script is an error
if (!$_SERVER['REQUEST_METHOD'] == "POST") {
  header("HTTP/1.1 400 Bad Request");
  exit;
}

$inputJSON = file_get_contents('php://input');
$input = json_decode($inputJSON, TRUE);
$userInput = $input["captchaCode"];
$captchaId = $input["captchaId"];

// Captcha validation
$ExampleCaptcha = new SimpleCaptcha();
$isHuman = $ExampleCaptcha->Validate($userInput, $captchaId);

if ($isHuman) {
  // Captcha validation passed
  // TODO: do whatever you want here
}
$result = array('success' => $isHuman);
echo json_encode($result, true);
exit;

• Server-side Captcha validation in Symfony:

<?php

namespace AppBundle\Controller;

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;

class ExampleController extends Controller
{
  /**
   * @Route("/api/example", methods={"POST"})
   */
  public function postExampleAction(Request $request)
  {
    $postData = json_decode($request->getContent());
    
    $captchaCode = $postData->captchaCode;
    $captchaId = $postData->captchaId;

    // validate captcha
    $captcha = $this->container->get('simple_captcha')->getInstance();
    $isHuman = $captcha->Validate($captchaCode, $captchaId);
    
    if ($isHuman) {
      // Captcha validation passed
      // TODO: do whatever you want here
    }

    // write the validation result as json string for sending it back to client
    $response = array('success' => $isHuman);
    return $this->json($response);
  }
}

• Server-side Captcha validation in Laravel:

<?php namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ExampleController extends Controller
{
  public function postAction(Request $request)
  {
    $captchaCode = $request->input('captchaCode');
    $captchaId = $request->input('captchaId');
    
    // validate captcha
    $isHuman = simple_captcha_validate($captchaCode, $captchaId);

    if ($isHuman) {
      // Captcha validation passed
      // TODO: do whatever you want here
    }
   
    // write the validation result as json string for sending it back to client
    $response = array('success' => $isHuman);
    return response()->json($response);
  }
}

• Server-side Captcha validation in CakePHP:

<?php 

namespace App\Controller;

use Cake\Controller\Controller;

class ExampleController extends Controller
{
  public function initialize()
  {
    parent::initialize();

    // load the Simple Captcha component
    $this->loadComponent('CakeCaptcha.SimpleCaptcha');
  }

  public function postExampleAction()
  {
    $this->autoRender = false;
    
    if ($this->request->is('post')) {
      $captchaCode = $this->request->data['captchaCode'];
      $captchaId = $this->request->data['captchaId'];
      
      // validate captcha
      $isHuman = simple_captcha_validate($captchaCode, $captchaId);

      if ($isHuman) {
        // Captcha validation passed
        // TODO: do whatever you want here
      }

      // write the validation result as json string for sending it back to client
      $result = array('success' => $isHuman);
      return $this->response->withType('application/json')
              ->withStringBody(json_encode($result));
    }
  }
}

• Server-side Captcha validation in CodeIgniter:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Example extends CI_Controller {

  public function postExampleAction()
  {
    // load the BotDetect Captcha library
    $this->load->library('botdetect/BotDetectSimpleCaptcha');

    $captchaCode = $this->input->post('captchaCode');
    $captchaId = $this->input->post('captchaId');

    // validate captcha
    $isHuman = $this->botdetectsimplecaptcha->Validate($captchaCode, $captchaId);

    if ($isHuman) {
      // Captcha validation passed
      // TODO: do whatever you want here
    }

    // write the validation result as json string for sending it back to client
    $result = array('success' => $isHuman);

    return $this->output
      ->set_content_type('application/json')
      ->set_output(json_encode($result));
  }
}

PHP server-side Configuration

Install BotDetect PHP Captcha library on Server-side

Before integrating BotDetect Captcha in your Angular application, you need to ensure you have installed BotDetect PHP Captcha library on your server where your Angular application back end is hosted. Here is where you can find how:

• Include BotDetect Files in the PHP Website

Configure BotDetect Captcha options

<?xml version="1.0" encoding="UTF-8"?>
<botdetect xmlns="https://captcha.com/schema/php"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="https://captcha.com/schema/php
            https://captcha.com/schema/php/botdetect-4.2.3.xsd">

    <captchaStyles>
        <captchaStyle>
            <name>exampleCaptcha</name>
            <userInputID>captchaCode</userInputID>
            <codeLength>3-5</codeLength>
            <helpLinkMode>Image</helpLinkMode>
        </captchaStyle>

        <captchaStyle>
            <name>loginCaptcha</name>
            <userInputID>captchaCode</userInputID>
            <codeLength>4-6</codeLength>
            <helpLinkMode>Image</helpLinkMode>
        </captchaStyle>
    </captchaStyles>

</botdetect>

All BotDetect captcha options will be configured in config/botdetect.xml configuration file. The full list of available Captcha configuration options and related instructions at the Captcha configuration options page.

The following step ensures that BotDetect CAPTCHA library works properly in your AngularJS application. Please follow it carefully.

var app = angular.module('app', ['BotDetectCaptcha']);

app.config(function(captchaSettingsProvider) {
  ...
  
  captchaSettingsProvider.setSettings({
    captchaEndpoint: 'captcha-endpoint/BotDetectCaptcha.ashx'
  });
});

We add BotDetectCaptcha module to your AngularJS module as a dependency. It requires to configure BotDetect ASP.NET Captcha path to captchaEndpoint setting and in order to do this, in config function, we inject captchaSettingsProvider and then invoke setSettings() function as the code right above.

Before you set the path to captchaEndpoint setting, we need to clarify what we set here:

• captcha-endpoint: is an example path, you need to set exact path to where you have deployed BotDetect ASP.NET Captcha library. If you deployed BotDetect ASP.NET Captcha library in the root of your domain, then you don't need to set this path.
• /BotDetectCaptcha.ashx: is HttpHandler path, which is described on Register BotDetect HttpHandler for CAPTCHA Requests guide below.

To ensure that you have set a right path to captchaEndpoint setting, check it by opening the following url in your browser: http://yourdomain.com/captcha-endpoint/BotDetectCaptcha.ashx (replace the exact path of your domain). If this results with an error message ("unknown command") then you set the right path, since that is the BotDetect Captcha who responded error (when you fail to set correct path, then your server will respond with 404 instead). Please note, in order to perform this check, BotDetect Captcha Generator needs to be installed & deployed to your server.

Display BotDetect CAPTCHA In Your AngularJS Template

Displaying the Captcha challenge can be as simple as:

<botdetect-captcha styleName="exampleCaptcha"></botdetect-captcha>

BotDetect Captcha AngularJS Module provides botdetect-captcha element to add Captcha in your forms. It has styleName attribute, which you can assign it a captcha style name defined in botdetect.xml configuration file.

ASP.NET Server-side Captcha validation

var app = angular.module('app', ['BotDetectCaptcha']);

...

app.controller('ExampleController', function($scope, $http, Captcha) {

  var exampleUrl = '/your-server-side-api-url';
  
  $scope.validate = function(valid) {

    if (!valid) {
      return;
    }

    // create new BotDetect Captcha instance
    var captcha = new Captcha();
    
    // captcha id for validating captcha at server-side
    var captchaId = captcha.captchaId;
    
    // captcha code input value for validating captcha at server-side
    var captchaCode = $scope.captchaCode;

    var postData = {
      captchaId: captchaId,
      captchaCode: captchaCode
    };
    
    $http({
      method: 'POST',
      url: exampleUrl,
      dataType: 'json',
      contentType: 'application/json',
      data: JSON.stringify(postData)
    })
      .then(function(response) {
        if (response.data.success) {
          // CAPTCHA validation passed at server-side
        } else {
          // CAPTCHA validation falied at client-side
        }
        
        // reload Captcha image
        captcha.reloadImage();
      }, function(error) {
        throw new Error(error.data);
      });
  };
   
});

In the code above, we inject Captcha service into ExampleController. The Captcha service exposes all Captcha workflow functions and vars that we will use during the form submission part of the workflow.

To validate Captcha at server-side, we need to send captchaId property of Captcha service and captcha code visitor submited to server-side.

Once request finished, we always reload Captcha by calling the reloadImage() function of Captcha service. This is needed to generate the new captcha code for the current captcha id.

At server-side API, we take captchaId and captchaCode values sent from client-side, and using Validate(captchaCode, captchaId) method of SimpleCaptcha instance we validate Captcha code. Finally, we write the validation result as json string for sending it back to client.

• Server-side Captcha validation in Web API 2:

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

namespace ProductApp.Controllers
{
    public class ExampleController : ApiController
    {
        // POST api/example
        public HttpResponseMessage Post([FromBody]Models.BasicForm value)
        {
            // validate captcha
            SimpleCaptcha captcha = new SimpleCaptcha();
            bool isHuman = captcha.Validate(value.CaptchaCode, value.CaptchaId);

            if (isHuman)
            {
                // Captcha validation passed
                // TODO: do whatever you want here
            }

            // the object that stores validation result
            Dictionary<string, bool> validationResult = new Dictionary<string, bool>();
            validationResult.Add("success", isHuman);

            // write the validation result as json string for sending it back to client
            string jsonString = JsonConvert.SerializeObject(validationResult);
            HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK);
            response.Content = new StringContent(jsonString, Encoding.UTF8, "application/json");

            return response;
        }
    }
}

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

Namespace Controllers
    Public Class ExampleController
        Inherits ApiController

        ' POST: api/Example
        Public Function PostValue(<FromBody()> ByVal value As Models.BasicForm) As HttpResponseMessage
            ' validate captcha
            Dim captcha As SimpleCaptcha = New SimpleCaptcha()
            Dim isHuman As Boolean = captcha.Validate(value.CaptchaCode, value.CaptchaId)

            If isHuman Then
                ' Captcha validation passed
                ' TODO: Do whatever you want here
            End If

            ' the object that stores validation result
            Dim validationResult As Dictionary(Of String, Boolean) = New Dictionary(Of String, Boolean)()
            validationResult.Add("success", isHuman)

            ' write the validation result as json string for sending it back to client
            Dim jsonString = JsonConvert.SerializeObject(validationResult)
            Dim response As HttpResponseMessage = Request.CreateResponse(HttpStatusCode.OK)
            response.Content = New StringContent(jsonString, Encoding.UTF8, "application/json")

            Return response
        End Function

    End Class
End Namespace

• Server-side Captcha validation in a Generic Handler:

<%@ WebHandler Language="C#" Class="BasicHandler" %>
using System;
using System.Web;
using System.IO;
using Newtonsoft.Json;
using System.Collections.Generic;
using BotDetect.Web;

public class BasicHandler : 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 captchaId = formDataObj["captchaId"];
            string captchaCode = formDataObj["captchaCode"];

            // validate captcha
            SimpleCaptcha captcha = new SimpleCaptcha();
            bool isHuman = captcha.Validate(captchaCode, captchaId);

            if (isHuman)
            {
                // Captcha validation passed
                // TODO: do whatever you want here
            }

            // the object that stores validation result
            Dictionary<string, bool> validationResult = new Dictionary<string, bool>();
            validationResult.Add("success", isHuman);

            // write the validation result as json string for sending it back to client
            context.Response.ContentType = "application/json; charset=utf-8";
            context.Response.Write(JsonConvert.SerializeObject(validationResult));
        }
    }
}

<%@ WebHandler Language="VB" Class="BasicHandler" %>
Imports System
Imports System.Web
Imports Newtonsoft.Json
Imports System.IO
Imports BotDetect.Web

Public Class BasicHandler : 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 captchaId As String = formDataObj("captchaId")
            Dim captchaCode As String = formDataObj("captchaCode")

            ' validate captcha
            Dim captcha As SimpleCaptcha = New SimpleCaptcha()
            Dim isHuman As Boolean = captcha.Validate(captchaCode, captchaId)

            If isHuman Then
                ' Captcha validation passed
                ' TODO: Do whatever you want here
            End If

            ' the object that stores validation result
            Dim validationResult As Dictionary(Of String, Boolean) = New Dictionary(Of String, Boolean)()
            validationResult.Add("success", isHuman)

            ' write the validation result as json string for sending it back to client
            context.Response.ContentType = "application/json; charset=utf-8"
            context.Response.Write(JsonConvert.SerializeObject(validationResult))
        End If
    End Sub
End Class

ASP.NET server-side Configuration

Install BotDetect ASP.NET Captcha library on Server-side

Before integrating BotDetect Captcha in your Angular application, you need to ensure you have installed BotDetect ASP.NET Captcha library on your server where your Angular application back end is hosted. Here is where you can find how:

• Register BotDetect HttpHandler for CAPTCHA Requests

Configure BotDetect Captcha options

<?xml version="1.0" encoding="UTF-8"?>
<botdetect xmlns="https://captcha.com/schema/net" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="https://captcha.com/schema/net 
      https://captcha.com/schema/net/botdetect-4.4.0.xsd">

  <captchaStyles>
    
    <captchaStyle>
      <name>exampleCaptcha</name>
      <userInputID>captchaCode</userInputID>
      <codeLength>6</codeLength>
    </captchaStyle>

    <captchaStyle>
      <name>loginCaptcha</name>
      <userInputID>captchaCode</userInputID>
      <codeLength>4-6</codeLength>
      <codeStyle>Alphanumeric</codeStyle>
    </captchaStyle>

  </captchaStyles>

</botdetect>

To configure captcha options, you need to create botdetect.xml configuration file (with xml content like the one above this) in root folder of your project. The full list of available Captcha configuration options and related instructions at the Captcha configuration options page.

The following step ensures that BotDetect CAPTCHA library works properly in your AngularJS application. Please follow it carefully.

var app = angular.module('app', ['BotDetectCaptcha']);

app.config(function(captchaSettingsProvider) {
  ...
  
  captchaSettingsProvider.setSettings({
    captchaEndpoint: 'captcha-endpoint/botdetectcaptcha'
  });
});

We add BotDetectCaptcha module to your AngularJS module as a dependency. It requires to configure BotDetect Java Captcha path to captchaEndpoint setting and in order to do this, in config function, we inject captchaSettingsProvider and then invoke setSettings() function as the code right above.

Before you set the path to captchaEndpoint setting, we need to clarify what we set here:

• captcha-endpoint: is an example path, you need to set exact path to where you have deployed BotDetect Java Captcha library. If you deployed BotDetect Java Captcha library in the root of your domain, then you don't need to set this path.
• /botdetectcaptcha: is SimpleCaptchaServlet path, which is described on Register SimpleCaptchaServlet guide below.

To ensure that you set the captchaEndpoint to right path, check it by opening the following url in your browser: http://yourdomain.com/captcha-endpoint/botdetectcaptcha (replace the 'yourdomain.com' with your domain). If opening the url in browser results with an error message ('unknown command') then you set the right path since it is the BotDetect Captcha that responded with 'unknown command' error. Otherwise, if you failed to set right path, then your server will respond with 404 instead.

Please note, in order to perform this check, BotDetect Captcha Generator needs to be deployed to your server (described in II. Captcha Generator server-side configuration).

Display BotDetect CAPTCHA In Your AngularJS Template

Displaying the Captcha challenge can be as simple as:

<botdetect-captcha styleName="exampleCaptcha"></botdetect-captcha>

BotDetect Captcha AngularJS Module provides botdetect-captcha element to add Captcha in your forms. It has styleName attribute, which you can assign it a captcha style name defined in botdetect.xml configuration file.

JAVA Server-side Captcha validation

var app = angular.module('app', ['BotDetectCaptcha']);

...

app.controller('ExampleController', function($scope, $http, Captcha) {

  var exampleUrl = '/your-server-side-api-url';
  
  $scope.validate = function(valid) {

    if (!valid) {
      return;
    }

    // create new BotDetect Captcha instance
    var captcha = new Captcha();
    
    // captcha id for validating captcha at server-side
    var captchaId = captcha.captchaId;
    
    // captcha code input value for validating captcha at server-side
    var captchaCode = $scope.captchaCode;

    var postData = {
      captchaId: captchaId,
      captchaCode: captchaCode
    };
    
    $http({
      method: 'POST',
      url: exampleUrl,
      dataType: 'json',
      contentType: 'application/json',
      data: JSON.stringify(postData)
    })
      .then(function(response) {
        if (response.data.success) {
          // CAPTCHA validation passed at server-side
        } else {
          // CAPTCHA validation falied at client-side
        }
        
        // reload Captcha image
        captcha.reloadImage();
      }, function(error) {
        throw new Error(error.data);
      });
  };
   
});

In the code above, we inject Captcha service into ExampleController. The Captcha service exposes all Captcha workflow functions and vars that we will use during the form submission part of the workflow.

To validate Captcha at server-side, we need to send captchaId property of Captcha service and captcha code visitor submited to server-side.

Once request finished, we always reload Captcha by calling the reloadImage() function of Captcha service. This is needed to generate the new captcha code for the current captcha id.

At server-side API, we take captchaId and captchaCode values sent from client-side, and using validate(captchaCode, captchaId) method of SimpleCaptcha instance we validate Captcha code. Finally, we write the validation result as json string for sending it back to client.

• Server-side Captcha validation in a Servlet is performed in the following way:

....

import com.captcha.botdetect.web.servlet.SimpleCaptcha;

public class ExampleServlet extends HttpServlet {

  @Override
  protected void doPost(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
   
    PrintWriter out = response.getWriter();
    Gson gson = new Gson();
    
    response.setContentType("application/json; charset=utf-8");
    
    JsonParser parser = new JsonParser();
    JsonObject formDataObj = (JsonObject) parser.parse(request.getReader());
    
    String captchaId = formDataObj.get("captchaId").getAsString();
    String captchaCode = formDataObj.get("captchaCode").getAsString();
    
    // validate captcha
    SimpleCaptcha captcha = SimpleCaptcha.load(request);
    boolean isHuman = captcha.validate(captchaCode, captchaId);
    
    if (isHuman) {
      // Captcha validation passed
      // TODO: do whatever you want here
    }
    
    // the object that stores validation result
    ExampleValidationResult validationResult = new ExampleValidationResult();
    validationResult.setSuccess(isHuman);
    
    try {
      // write the validation result as json string for sending it back to client
      out.write(gson.toJson(validationResult));
    } catch(Exception ex) {
      out.write(ex.getMessage());
    } finally {
      out.close();
    }
  }
}

• Server-side Captcha validation in a Spring MVC is performed in the following way:

...
import com.captcha.botdetect.web.servlet.SimpleCaptcha;

@Controller
public class ExampleController {

  @RequestMapping(value = "basic-captcha", method = RequestMethod.POST, produces = "application/json; charset=utf-8")
  @ResponseBody
  public String exampleCaptcha(HttpServletRequest request) {
    JsonParser parser = new JsonParser();
    JsonObject formDataObj = null;
    boolean result = false;

    try {
      formDataObj = (JsonObject) parser.parse(request.getReader());
    } catch (IOException ex) { }

    if (formDataObj != null) {
      String captchaId = formDataObj.get("captchaId").getAsString();
      String captchaCode = formDataObj.get("captchaCode").getAsString();

      // validate captcha
      SimpleCaptcha captcha = SimpleCaptcha.load(request);
      boolean isHuman = captcha.validate(captchaCode, captchaId);
      
      result = isHuman;
    }

    return "{\"success\":" + result.toString() + "}";
  }
}

• Server-side Captcha validation in a Struts Action is performed in the following way:

...
import com.captcha.botdetect.web.servlet.SimpleCaptcha;

public class ExampleAction {

  private boolean success = false;

  public boolean isSuccess() {
    return success;
  }

  public String execute() {
    HttpServletRequest request = ServletActionContext.getRequest();
    
    if (!request.getMethod().equalsIgnoreCase("post")) {
      return Action.ERROR;
    }

    Map<String, String> mapParams = request.getParameterMap();
    Set<String> setKeys = mapParams.keySet();
    Iterator<String> temp = setKeys.iterator();
    String data = temp.next();

    JsonParser parser = new JsonParser();
    JsonObject formDataObj = (JsonObject) parser.parse(data);

    if (formDataObj != null) {
      String captchaId = formDataObj.get("captchaId").getAsString();
      String captchaCode = formDataObj.get("captchaCode").getAsString();

      // validate captcha
      SimpleCaptcha captcha = SimpleCaptcha.load(request);
      boolean isHuman = captcha.validate(captchaCode, captchaId);
      
      this.success = isHuman;
    }

    return Action.SUCCESS;
  }
}

The following step ensures that BotDetect CAPTCHA library works properly in your AngularJS application. Please follow it carefully.

var app = angular.module('app', ['BotDetectCaptcha']);

app.config(function(captchaSettingsProvider) {
  ...
  
  captchaSettingsProvider.setSettings({
    captchaEndpoint: 'captcha-endpoint/simple-botdectect.php'
  });
});

We add BotDetectCaptcha module to your AngularJS module as a dependency. It requires to configure BotDetect PHP Captcha path to captchaEndpoint setting and in order to do this, in config function, we inject captchaSettingsProvider and then invoke setSettings() function as the code right above.

Before you set the path to captchaEndpoint setting, we need to clarify what we set here:

• captcha-endpoint: is an example path, you need to set exact path to where you have deployed BotDetect PHP Captcha library. If you deployed BotDetect PHP Captcha library in the root of your domain, then you don't need to set this path.
• This /simple-botdectect.php is the Handler URL of the PHP script processing Captcha challenge Http requests and this if you use the BotDetect Captcha library in a Plain PHP application. Use /simple-captcha-handler if you use the following:
  • Symfony framework and BotDetect Captcha Symfony Bundle
  • Laravel framework and BotDetect Captcha Laravel Package
  • CakePHP framework and BotDetect Captcha CakePHP Package
  • CodeIgniter framework and BotDetect Captcha CodeIgniter Library

To ensure that you have set a right path to captchaEndpoint setting, check it by opening the following url in your browser: http://yourdomain.com/captcha-endpoint/simple-botdetect.php (replace the exact path of your domain). If this results with an error message ("unknown command") then you set the right path, since that is the BotDetect Captcha that responded with error (when you fail to set correct path, then your server will respond with 404 instead). Please note, in order to perform this check, BotDetect Captcha Generator needs to be installed & deployed to your server.

Display BotDetect CAPTCHA In Your AngularJS Template

Displaying the Captcha challenge can be as simple as:

<botdetect-captcha styleName="exampleCaptcha"></botdetect-captcha>

BotDetect Captcha AngularJS Module provides botdetect-captcha element to add Captcha in your forms. It has styleName attribute, which you can assign it a captcha style name defined in botdetect.xml configuration file.

PHP Server-side Captcha validation

var app = angular.module('app', ['BotDetectCaptcha']);

...

app.controller('ExampleController', function($scope, $http, Captcha) {

  var exampleUrl = '/your-server-side-api-url';
  
  $scope.validate = function(valid) {

    if (!valid) {
      return;
    }

    // create new BotDetect Captcha instance
    var captcha = new Captcha();
    
    // captcha id for validating captcha at server-side
    var captchaId = captcha.captchaId;
    
    // captcha code input value for validating captcha at server-side
    var captchaCode = $scope.captchaCode;

    var postData = {
      captchaId: captchaId,
      captchaCode: captchaCode
    };
    
    $http({
      method: 'POST',
      url: exampleUrl,
      dataType: 'json',
      contentType: 'application/json',
      data: JSON.stringify(postData)
    })
      .then(function(response) {
        if (response.data.success) {
          // CAPTCHA validation passed at server-side
        } else {
          // CAPTCHA validation falied at client-side
        }
        
        // reload Captcha image
        captcha.reloadImage();
      }, function(error) {
        throw new Error(error.data);
      });
  };
   
});

In the code above, we inject Captcha service into ExampleController. The Captcha service exposes all Captcha workflow functions and vars that we will use during the form submission part of the workflow.

To validate Captcha at server-side, we need to send captchaId property of Captcha service and captcha code visitor submited to server-side.

Once request finished, we always reload Captcha by calling the reloadImage() function of Captcha service. This is needed to generate the new captcha code for the current captcha id.

At server-side API, we take captchaId and captchaCode values sent from client-side, and using Validate(captchaCode, captchaId) method of SimpleCaptcha instance we validate Captcha code. Finally, we write the validation result as json string for sending it back to client.

• Server-side Captcha validation in Plain PHP:

<?php
require("captcha-endpoint/simple-botdetect.php");

// directly accessing this script is an error
if (!$_SERVER['REQUEST_METHOD'] == "POST") {
  header("HTTP/1.1 400 Bad Request");
  exit;
}

$inputJSON = file_get_contents('php://input');
$input = json_decode($inputJSON, TRUE);
$userInput = $input["captchaCode"];
$captchaId = $input["captchaId"];

// Captcha validation
$ExampleCaptcha = new SimpleCaptcha("exampleCaptcha");
$isHuman = $ExampleCaptcha->Validate($userInput, $captchaId);

if ($isHuman) {
  // Captcha validation passed
  // TODO: do whatever you want here
}
$result = array('success' => $isHuman);
echo json_encode($result, true);
exit;

• Server-side Captcha validation in Symfony:

<?php

namespace AppBundle\Controller;

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;

class ExampleController extends Controller
{
  /**
   * @Route("/api/example", methods={"POST"})
   */
  public function postExampleAction(Request $request)
  {
    $postData = json_decode($request->getContent());
    
    $captchaCode = $postData->captchaCode;
    $captchaId = $postData->captchaId;

    // validate captcha
    $captcha = $this->container->get('simple_captcha')->getInstance();
    $isHuman = $captcha->Validate($captchaCode, $captchaId);
    
    if ($isHuman) {
      // Captcha validation passed
      // TODO: do whatever you want here
    }

    // write the validation result as json string for sending it back to client
    $response = array('success' => $isHuman);
    return $this->json($response);
  }
}

• Server-side Captcha validation in Laravel:

<?php namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ExampleController extends Controller
{
  public function postAction(Request $request)
  {
    $captchaCode = $request->input('captchaCode');
    $captchaId = $request->input('captchaId');
    
    // validate captcha
    $isHuman = simple_captcha_validate($captchaCode, $captchaId);

    if ($isHuman) {
      // Captcha validation passed
      // TODO: do whatever you want here
    }
   
    // write the validation result as json string for sending it back to client
    $response = array('success' => $isHuman);
    return response()->json($response);
  }
}

• Server-side Captcha validation in CakePHP:

<?php 

namespace App\Controller;

use Cake\Controller\Controller;

class ExampleController extends Controller
{
  public function initialize()
  {
    parent::initialize();

    // load the Simple Captcha component
    $this->loadComponent('CakeCaptcha.SimpleCaptcha');
  }

  public function postExampleAction()
  {
    $this->autoRender = false;
    
    if ($this->request->is('post')) {
      $captchaCode = $this->request->data['captchaCode'];
      $captchaId = $this->request->data['captchaId'];
      
      // validate captcha
      $isHuman = simple_captcha_validate($captchaCode, $captchaId);

      if ($isHuman) {
        // Captcha validation passed
        // TODO: do whatever you want here
      }

      // write the validation result as json string for sending it back to client
      $result = array('success' => $isHuman);
      return $this->response->withType('application/json')
              ->withStringBody(json_encode($result));
    }
  }
}

• Server-side Captcha validation in CodeIgniter:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Example extends CI_Controller {

  public function postExampleAction()
  {
    // load the BotDetect Captcha library
    $this->load->library('botdetect/BotDetectSimpleCaptcha');

    $captchaCode = $this->input->post('captchaCode');
    $captchaId = $this->input->post('captchaId');

    // validate captcha
    $isHuman = $this->botdetectsimplecaptcha->Validate($captchaCode, $captchaId);

    if ($isHuman) {
      // Captcha validation passed
      // TODO: do whatever you want here
    }

    // write the validation result as json string for sending it back to client
    $result = array('success' => $isHuman);

    return $this->output
      ->set_content_type('application/json')
      ->set_output(json_encode($result));
  }
}

PHP server-side Configuration

Install BotDetect PHP Captcha library on Server-side

Before integrating BotDetect Captcha in your Angular application, you need to ensure you have installed BotDetect PHP Captcha library on your server where your Angular application back end is hosted. Here is where you can find how:

• Include BotDetect Files in the PHP Website

Configure BotDetect Captcha options

<?xml version="1.0" encoding="UTF-8"?>
<botdetect xmlns="https://captcha.com/schema/php"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="https://captcha.com/schema/php
            https://captcha.com/schema/php/botdetect-4.2.3.xsd">

    <captchaStyles>
        <captchaStyle>
            <name>exampleCaptcha</name>
            <userInputID>captchaCode</userInputID>
            <codeLength>3-5</codeLength>
            <helpLinkMode>Image</helpLinkMode>
        </captchaStyle>

        <captchaStyle>
            <name>loginCaptcha</name>
            <userInputID>captchaCode</userInputID>
            <codeLength>4-6</codeLength>
            <helpLinkMode>Image</helpLinkMode>
        </captchaStyle>
    </captchaStyles>

</botdetect>

All BotDetect captcha options will be configured in config/botdetect.xml configuration file. The full list of available Captcha configuration options and related instructions at the Captcha configuration options page.