How To Add BotDetect CAPTCHA Protection to Angular Application

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

@NgModule({
  imports: [
    ...
    BotDetectCaptchaModule.forRoot({
      captchaEndpoint: '/botdetect-java-captcha-api-path-at-server-side/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:

• /botdetect-java-captcha-api-path-at-server-side: is an example path. You need to set the exact path to where you have installed BotDetect Java Captcha library before. In case you installed BotDetect Java Captcha library at root of your domain, you don't need to set this path.
• /botdetectcaptcha: is SimpleCaptchaServlet path, which is described on Register SimpleCaptchaServlet guide below.

To ensure that you have set a right path by captchaEndpoint setting, check it by opening the following url in your browser: http://yourdomain.com/botdetect-java-captcha-api-path-at-server-side/botdetectcaptcha (replace the exact path of your domain). If you see any error messages ("unknown command") thrown by BotDetect Captcha from this url, then you set the right path.

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.

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

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

In the code above, we import BotDetectCaptchaModule TODO, 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/simple-botdectect.php: is is the Handler URL of the PHP script processing Captcha challenge Http requests.

To ensure that you have set a right path by captchaEndpoint setting, check it by opening the following url in your browser: http://yourdomain.com/captcha-endpoint/simple-botdectect.php (replace the exact path of your domain). If you see any error messages ("unknown command") thrown by BotDetect Captcha from this url, then you set the right path.

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.

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 looks in this 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 Controller looks in this 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 looks in this 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;
  }
}

• Server-side Captcha validation in Plain PHP:

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.

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

This step is very important to make sure that BotDetect CAPTCHA library works properly in your AngularJS application, so please follow it carefully.

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

app.config(function(captchaSettingsProvider) {
  ...
  
  captchaSettingsProvider.setSettings({
    captchaEndpoint: '/botdetect-java-captcha-api-path-at-server-side/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:

• /botdetect-java-captcha-api-path-at-server-side: is an example path, you need to set exact path to where you have installed BotDetect Java Captcha library before. In case you install BotDetect Java Captcha library at root of your domain, then you won't need to set this path.
• /botdetectcaptcha: is SimpleCaptchaServlet path, which is described on Register SimpleCaptchaServlet 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/botdetect-java-captcha-api-path-at-server-side/botdetectcaptcha (replace the exact path of your domain). If you see any error messages ("unknown command") thrown by BotDetect Captcha from this url, then you set the right path.

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.

This step is very important to make sure that BotDetect CAPTCHA library works properly in your AngularJS application, so 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/simple-botdectect.php: is the Handler URL of the PHP script processing Captcha challenge Http requests.

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-botdectect.php (replace the exact path of your domain). If you see any error messages ("unknown command") thrown by BotDetect Captcha from this url, then you set the right path.

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.

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 looks in this 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 looks in this 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 looks in this 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;
  }
}

• Server-side Captcha validation in Plain PHP:

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.

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