Necromancers Playing MTG

    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.

    Install

    npm i angularjs-captcha

    DownloadsWeekly Downloads

    116

    Version

    1.6.1

    License

    none

    Unpacked Size

    36.4 kB

    Total Files

    7

    Last publish

    Collaborators

    • botdetect.support