angularjs-captcha

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) {
  ...
 
  captchaSettingsProvider.setSettings({
    captchaEndpoint: 
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint.ashx'
  });
});
  • Java-based captcha endpoint:
var app = angular.module('app', ['BotDetectCaptcha']);
 
app.config(function(captchaSettingsProvider) {
  ...
 
  captchaSettingsProvider.setSettings({
    captchaEndpoint: 
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint'
  });
});
  • PHP-based captcha endpoint:
var app = angular.module('app', ['BotDetectCaptcha']);
 
app.config(function(captchaSettingsProvider) {
  ...
 
  captchaSettingsProvider.setSettings({
    captchaEndpoint: 
      'https://your-app-backend-hostname.your-domain.com/botdetect-captcha-lib/simple-botdetect.php'
  });
});
4) Display Captcha In Your AngularJS Template
<botdetect-captcha captchaStyleName="yourFirstCaptchaStyle"></botdetect-captcha>
<input id="userCaptchaInput"
  type="text" 
  name="userCaptchaInput"
  ng-model="userCaptchaInput" >
5) Captcha Validation: Client-side Code
app.controller('YourFormWithCaptchaController',
    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
    $http({
      headers: { 'Content-Type': 'application/json; charset=utf-8' }
      method: 'POST',
      url: 'https://your-app-backend-hostname.your-domain.com/your-app-backend-path',
      data: postData
    })
      .then(function (response) {
        if (response.data.success == false) {
          // captcha validation failed; reload image
          captcha.reloadImage();
          // TODO: maybe display an error message, too
        } else {
          // TODO: captcha validation succeeded; proceed with the workflow
        }
      }, function (error) {
        throw new Error(error.data);
      });
  };
});
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);

Documentation:

  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

Dependencies:

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

Technical Support:

Through contact form on captcha.com.

Package Sidebar

Install

npm i angularjs-captcha

Weekly Downloads

167

Version

1.6.1

License

none

Unpacked Size

36.4 kB

Total Files

7

Last publish

Collaborators

  • botdetect.support