Necromancers Playing MTG


    1.6.1 • Public • Published

    BotDetect CAPTCHA AngularJS Module (JavaScript: Angular 1.x)

    For a comprehensive step-by-step integration guide please see our AngularJS Captcha Module Integration Guide.
    The guide covers the integration with the following backends:

    • ASP.NET (Core): web API with MVC Core
    • ASP.NET (Legacy): Web-API2, MVC1-5, Generic Handler
    • Java: Servlet, Spring, Struts
    • PHP: the plain PHP

    To give you a hint how AngularJS Captcha Module works we pasted bellow a few, not necessary up-to-date (and mostly frontend related), excerpts from the Integration Guide.

    Quick guide:

    1) AngularJS Captcha Module Installation
    npm install angularjs-captcha --save
    2) Include AngularJS Captcha Module in Your App
    <script src="node_modules/angularjs-captcha/dist/angularjs-captcha.min.js"></script>
    3) Inject AngularJS Captcha Module to Your AngularJS App, and Configure Backend Captcha Endpoint

    Endpoint configuration depends on which technology you use in the backend.

    • ASP.NET-based captcha endpoint:
    var app = angular.module('app', ['BotDetectCaptcha']);
    app.config(function(captchaSettingsProvider) {
    • Java-based captcha endpoint:
    var app = angular.module('app', ['BotDetectCaptcha']);
    app.config(function(captchaSettingsProvider) {
    • PHP-based captcha endpoint:
    var app = angular.module('app', ['BotDetectCaptcha']);
    app.config(function(captchaSettingsProvider) {
    4) Display Captcha In Your AngularJS Template
    <botdetect-captcha captchaStyleName="yourFirstCaptchaStyle"></botdetect-captcha>
    <input id="userCaptchaInput"
      ng-model="userCaptchaInput" >
    5) Captcha Validation: Client-side Code
        function ($scope, $http, $window, Captcha) {
      // process the form on submit event
      $scope.validate = function () {
        // create new AngularJS Captcha instance
        var captcha = new Captcha();
        // get the user-entered captcha code value to be validated at the backend side        
        var userEnteredCaptchaCode = captcha.getUserEnteredCaptchaCode();
        // get the id of a captcha instance that the user tried to solve
        var captchaId = captcha.getCaptchaId();
        var postData = {
          // add the user-entered captcha code value to the post data
          userEnteredCaptchaCode: userEnteredCaptchaCode,
          // add the id of a captcha instance to the post data
          captchaId: captchaId
        // post the captcha data to the /your-app-backend-path on your backend
          headers: { 'Content-Type': 'application/json; charset=utf-8' }
          method: 'POST',
          url: '',
          data: postData
          .then(function (response) {
            if ( == false) {
              // captcha validation failed; reload image
              // TODO: maybe display an error message, too
            } else {
              // TODO: captcha validation succeeded; proceed with the workflow
          }, function (error) {
            throw new Error(;
    6) Captcha Validation: Server-side Code

    The userEnteredCaptchaCode and captchaId values posted from the frontend are used to validate a captcha challenge on the backend.

    The validation is performed by calling the: Validate(userEnteredCaptchaCode, captchaId).

    // C#
    SimpleCaptcha yourFirstCaptcha = new SimpleCaptcha();
    bool isHuman = yourFirstCaptcha.Validate(userEnteredCaptchaCode, captchaId);
    ' VB.NET
    Dim yourFirstCaptcha As SimpleCaptcha = New SimpleCaptcha()
    Dim isHuman As Boolean = yourFirstCaptcha.Validate(userEnteredCaptchaCode, captchaId)
    • Server-side Captcha validation with Java Captcha looks in this way:
    SimpleCaptcha yourFirstCaptcha = SimpleCaptcha.load(request);
    boolean isHuman = yourFirstCaptcha.validate(userEnteredCaptchaCode, captchaId);
    • Server-side Captcha validation with PHP Captcha looks in this way:
    $yourFirstCaptcha = new SimpleCaptcha();
    $isHuman = $yourFirstCaptcha->Validate($userEnteredCaptchaCode, $captchaId);


    1. AngularJS Captcha Module Step-by-step Integration Guide -- read this one first

    2. AngularJS Captcha Module Basic Example -- partial code walk-through

    3. AngularJS Captcha Module Form Example -- partial code walk-through


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

    Technical Support:

    Through contact form on


    npm i angularjs-captcha

    DownloadsWeekly Downloads






    Unpacked Size

    36.4 kB

    Total Files


    Last publish