JSPM – angular-captcha@3.0.4

Package Exports

angular-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 (angular-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 Angular Module (TypeScript / Angular 2/4/5+)

Requirements:

Captcha Angular module requires Captcha library to generate image&sound Captcha challenges. Currently, it works with BotDetect Java Captcha library and BotDetect PHP Captcha library, but ASP.NET library is coming soon.

Quickstart:

Step 1: Install Captcha Angular Module

npm install angular-captcha --save

Step 2: Load Captcha Angular Module

If you use SystemJS, declare the following in your SystemJS config file:

  map: {
    ...
    'angular-captcha': 'npm:angular-captcha'
  },
  packages: {
    ...
    'angular-captcha': {
      defaultExtension: 'js',
      main: 'index'
    },

Step 3: Declare Captcha Angular Module

Java Captcha endpoint:

import { BotDetectCaptchaModule } from 'angular-captcha';

@NgModule({
  imports: [
    ...
    BotDetectCaptchaModule.forRoot({
      captchaEndpoint: '/botdetect-java-captcha-api-path-at-server-side/botdetectcaptcha'
    })
  ],
  ...
})

PHP Captcha endpoint:

import { BotDetectCaptchaModule } from 'angular-captcha';

@NgModule({
  imports: [
    ...
    BotDetectCaptchaModule.forRoot({
      captchaEndpoint: '/botdetect-php-captcha-api-path-at-server-side/simple-botdetect.php'
    })
  ],
  ...
})

Step 4: Displaying the Captcha Challenge

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

Step 5: Client-side Captcha Validation

<input
  type="text"
  id="captchaCode"
  name="captchaCode"
  #captchaCode="ngModel"
  ngModel
  correctCaptcha
>

Step 6: Server-side Captcha Validation

The client-side Captcha validation is just UI make-up. The purpose of Captcha is to ensure some server-side action is initiated by a human. Therefore, you must validate Captcha at server-side.

If you have Java Captcha library on a server side validation would look similar to this:

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

If you have PHP Captcha library on a server side validation would look similar to this:

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

Documentation:

Angular CAPTCHA Integration Guide

Examples:

Basic Angular CAPTCHA Example

Angular CAPTCHA Form Example

Support:

Send us questions, suggestions contact form on captcha.com.