JSPM – angularjs-captcha@1.5.1

Package Exports

angularjs-captcha

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (angularjs-captcha) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Quick guide:

1) Captcha AngularJS Module Installation

npm install angularjs-captcha --save

2) Include Captcha AngularJS Module in Your Web App

<script src="node_modules/angularjs-captcha/dist/angularjs-captcha.min.js"></script>

3) Add Captcha AngularJS Module to Your AngularJS Module, 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: 'captcha-endpoint/BotDetectCaptcha.ashx'
  });
});

Java-based Captcha endpoint:

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

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

PHP-based Captcha endpoint:

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

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

4) Display Captcha In AngularJS Template

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

5) Validate Captcha on the Client-side

Using validateUnsafe(callback) method to validate Captcha code on form submit:

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

  // On form submit.
  $scope.validate = function() {

    var captcha = new Captcha();

    captcha.validateUnsafe(function(isCaptchaCodeCorrect) {

      if (isCaptchaCodeCorrect) {
        // Captcha code is correct
      } else {
        // Captcha code is incorrect
      }

    });
  };
   
});

Using correct-captcha directive attribute to validate Captcha code on blur event:

<input 
  type="text" 
  id="captchaCode"
  name="captchaCode"
  ng-model="captchaCode" 
  correct-captcha
>

6) Validate Captcha on the Server-side

These client-side captcha validations are just an usability improvement that you may use or not -- they do not protect your form from spammers at all.

As you are protecting some server-side action you must validate a Captcha at the server-side before executing that protected action.

Server-side Captcha validation with ASP.NET Captcha looks in this way:

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

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

Server-side Captcha validation with Java Captcha looks in this way:

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

Server-side Captcha validation with PHP Captcha looks in this way:

$captcha = new SimpleCaptcha();
$isHuman = $captcha->Validate($captchaCode, $captchaId);

Docs:

AngularJS CAPTCHA Integration Guide

Code Examples:

Dependencies:

BotDetect Captcha AngularJS Module requires BotDetect ASP.NET Captcha, BotDetect Java Captcha or BotDetect PHP Captcha library to generate Captcha challenges. Simple API support for ASP.NET Core and .NET Core will be released this month -- very likely during the week of 2018/11/19-25. See our roadmap for details.

Technical Support:

Through contact form on captcha.com.