JSPM – angular-captcha@3.6.0

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/6/7/8+)

For a comprehensive step-by-step integration guide please see our Angular 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 Angular Captcha Module works we pasted bellow a few excerpts from the Integration Guide.

Quick guide:

Step 1: Install Angular Captcha Module

npm install angular-captcha --save

and add the following lines into the import section of your app's app.module.ts file:

// import the Angular Captcha Module 
import { BotDetectCaptchaModule } from 'angular-captcha'; 

@NgModule({
  imports: [
    ...
    BotDetectCaptchaModule
  ],
  ...
})

Step 2: Set the captchaEndpoint in Your App's Frontend

Endpoint configuration depends on which technology you use in the backend.

ASP.NET-based backend:

import { CaptchaComponent } from 'angular-captcha'; 
 
export class YourFormWithCaptchaComponent {

  ngOnInit(): void {
    this.captchaComponent.captchaEndpoint = 
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint.ashx';
  }

Java-based backend:

import { CaptchaComponent } from 'angular-captcha'; 

export class YourFormWithCaptchaComponent {

  ngOnInit(): void {
    this.captchaComponent.captchaEndpoint = 
      'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint';
  }

PHP-based backend:

import { CaptchaComponent } from 'angular-captcha'; 

export class YourFormWithCaptchaComponent {

  ngOnInit(): void {
    this.captchaComponent.captchaEndpoint = 
      'https://your-app-backend-hostname.your-domain.com/botdetect-captcha-lib/simple-botdetect.php';
  }

Step 3: Displaying the Captcha Challenge in Your Form

Place the following lines in your form where you want to display captcha:

<botdetect-captcha captchaStyleName="yourFirstCaptchaStyle"></botdetect-captcha>  
<input id="userCaptchaInput" 
  name="userCaptchaInput" 
  ngModel 
  #userCaptchaInput="ngModel"  
  type="text" >

Step 4: Captcha Validation: Client-side Code

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { YourFormWithCaptchaService } from './your-form-with-captcha.service';

import { CaptchaComponent } from 'angular-captcha';

@Component({
  moduleId: module.id,
  selector: 'your-form-with-captcha',
  templateUrl: 'your-form-with-captcha.component.html',
  styleUrls: ['your-form-with-captcha.component.css'],
  providers: [YourFormWithCaptchaService]
})
export class YourFormWithCaptchaComponent {

  // uncomment the line bellow if you use Angular 2/4/5/6/7
  // @ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;

  // uncomment the line bellow if you use Angular 8
  // @ViewChild(CaptchaComponent, { static: true }) captchaComponent: CaptchaComponent;

  constructor(
    private yourFormWithCaptchaService: YourFormWithCaptchaService
  ) { }

  // Process the form on submit event.
  validate(value, valid): void {

    // get the user-entered captcha code value to be validated at the backend side        
    let userEnteredCaptchaCode = this.captchaComponent.userEnteredCaptchaCode;
    
    // get the id of a captcha instance that the user tried to solve
    let captchaId = this.captchaComponent.captchaId;

    const postData = {
      userEnteredCaptchaCode: userEnteredCaptchaCode,
      captchaId: captchaId
    };

    // post the captcha data to the /your-app-backend-path on your backend
    this.yourFormWithCaptchaService.send(postData)
      .subscribe(
        response => {
          if (response.success == false) {
            // captcha validation failed; reload image
            this.captchaComponent.reloadImage();
            // TODO: maybe display an error message, too
          } else {
            // TODO: captcha validation succeeded; proceed with the workflow
          }
        },
        error => {
          throw new Error(error);
        });
  }
}

Step 5: 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).

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

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

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

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

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

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

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

Documentation:

Angular Captcha Module Step-by-step Integration Guide -- read this one first

Angular Captcha Module Basic Example -- partial code walk-through

Angular Captcha Module Form Example -- partial code walk-through

Dependencies:

The current version of the Angular Captcha Module requires one of the following BotDetect CAPTCHA backends:

Support:

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