angular-captcha

BotDetect Captcha Angular Module (TypeScript: Angular 2/4/5/6+)

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.