JSPM

  • Created
  • Published
  • Downloads 857
  • Score
    100M100P100Q102661F

BotDetect Captcha Angular Module (TypeScript / Angular 2+)

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+)

Requirements:

Captcha Angular module requires Captcha library to generate image&sound Captcha challenges. Currently, it works with BotDetect Java Captcha library, but ASP.NET and PHP libraries are 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
import { BotDetectCaptchaModule } from 'angular-captcha';

@NgModule({
  imports: [
    ...
    BotDetectCaptchaModule.forRoot({
      captchaEndpoint: '/botdetect-java-captcha-api-path-at-server-side/botdetectcaptcha'
    })
  ],
  ...
})
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:

// validate captcha
SimpleCaptcha captcha = SimpleCaptcha.load(request);
boolean 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.