Angular & AngularJS Captcha Modules: The Simple API Basics Example

Click on the link below that matches the Angular version that you are using:

..............................................................

Angular 2/4/5/6/7/8-based Frontend

Click on the link below that matches your BotDetect CAPTCHA Angular Module usage scenario:

First Time Here?

The Angular CAPTCHA Integration Guide is the best place to start!

[back to top of page]

..............................................................

Angular-based Frontend and the web API with MVC Core 1/2 on Backend

This is a partial walk-through of the example source code. It is not meant to replace a proper step-by-step guide. If you are new to BotDetect, skip it for now; and do start your first Angular captcha integration by following our step-by-step Angular CAPTCHA Integration Guide.

Introduction

This Angular captcha example shows the minimal code required to display and validate captchas in an application with an Angular frontend and a web API with MVC Core 1/2 backend.

Download the BotDetect ASP.NET CAPTCHA Component and run this example

Within this page, the root folder of the extracted archive is referred as the <BDC-DIR>.

This example is in the <BDC-DIR>/core-on-core/examples/s_api-captcha-angular-webapi_mvccore2/ folder; and contains the following files:

Frontend: app.module.ts

The angular-src/app/app.module.ts source file does the following:

  • Loads the BotDetect CAPTCHA Angular Module into the page
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppRoutingModule } from './app-routing.module';
import { BotDetectCaptchaModule } from 'angular-captcha';

import { AppComponent } from './app.component';
import { BasicComponent }   from './basic/basic.component';
import { ContactComponent }   from './contact/contact.component';

import { BasicSuccessNotifyComponent }   from './notify/basic-notify/basic-success-notify.component';
import { ContactSuccessNotifyComponent }   from './notify/contact-notify/contact-success-notify.component';

import { ValuesPipe } from './values.pipe';

@NgModule({
  declarations: [
    AppComponent,
    BasicComponent,
    ContactComponent,
    ValuesPipe,
    BasicSuccessNotifyComponent,
    ContactSuccessNotifyComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ReactiveFormsModule,
    AppRoutingModule,
    // import Captcha Angular Module
    BotDetectCaptchaModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

[back to the top of angular & web api with mvc core 1/2 backend section]

[back to top of page]

Frontend: basic.component.html

The angular-src/app/basic/basic.component.html source file does the following:

  • Displays the captcha and user-input markups on the page
<form novalidate #f="ngForm" (ngSubmit)="validate(f.value, f.valid)">

  <div class="alert alert-success" *ngIf="successMessages">
    {{ successMessages }}
  </div>

  <div class="alert alert-error" *ngIf="errorMessages">
    {{ errorMessages }}
  </div>

  <!-- captcha challenge: placeholder -->
  <botdetect-captcha captchaStyleName="angularBasicCaptcha"></botdetect-captcha>  

  <label>
    <span>Retype the characters from the picture:</span>
    <!-- captcha code: user-input textbox -->
    <input
      type="text"
      id="userCaptchaInput"
      name="userCaptchaInput"
      ngModel
      #userCaptchaInput="ngModel"  
    >
  </label>

  <button type="submit">Validate</button>
</form>

[back to the top of angular & web api with mvc core 1/2 backend section]

[back to top of page]

Frontend: basic.component.ts

The angular-src/app/basic/basic.component.ts source file does the following:

  • Loads the captcha challenges from backend
  • Sets the captchaEndpoint property to point to the captcha endpoint path on backend
  • Processes the captcha validation results:
    • when the captcha validation fails -- it reloads captcha and displays an error message
    • when the captcha validation succeeds -- it executes by the captcha protected action
import { Component, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { BasicService } from './basic.service';

@Component({
  moduleId: module.id,
  selector: 'basic-form',
  templateUrl: 'basic.component.html',
  styleUrls: ['basic.component.css'],
  providers: [BasicService]
})
export class BasicComponent {

  /**
   * Captcha validation messages.
   */
  errorMessages: string;

  /**
   * BotDetect CAPTCHA component.
   */
  
  // if you use Angular 2/4/5/6/7 use this line:
  @ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;

  // if you use Angular 8 use this line instead of the above one:
  // @ViewChild(CaptchaComponent, { static: true }) captchaComponent: CaptchaComponent;  

  constructor(
    private basicService: BasicService,
    private router: Router  
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint = 'simple-captcha-endpoint.ashx';
  }

  /**
   * 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 = {
      // 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 backend
    this.basicService.send(postData)
      .subscribe(
        response => {
          if (response.success == false) {
            // captcha validation failed; show the error message
            this.errorMessages = 'CAPTCHA validation failed!';
            // call the this.captchaComponent.reloadImage()
            // in order to generate a new captcha challenge
            this.captchaComponent.reloadImage();
          } else {
            // captcha validation succeeded; proceed with the workflow
            this.router.navigate(['/basic-success-notify']) 
          }
        },
        error => {
          throw new Error(error);
        });
  }

}

[back to the top of angular & web api with mvc core 1/2 backend section]

[back to top of page]

Frontend: basic.service.ts

The angular-src/app/basic/basic.service.ts source file does the following:

  • Sends the post request with the captcha id and the user entered captcha code to backend
import { Injectable }    from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';

import { Observable } from 'rxjs/Rx';

@Injectable()
export class BasicService {

  // basic api url
  basicUrl = 'api/basic-captcha';

  constructor(private http: Http) { }

  send(data: Object): Observable<any> {
    const headers = new Headers({ 'Content-Type': 'application/json' });
    const options = new RequestOptions({ headers: headers });

    return this.http.post(this.basicUrl, data, options)
      .map((response: Response) => response.json())
      .catch((error:any) => Observable.throw(error.json().error));
  }
}

[back to the top of angular & web api with mvc core 1/2 backend section]

[back to top of page]

Backend: appsettings.json

The appsettings.json source file contains the following:

  • BotDetect configuration section that defines the CaptchaEndpointPath path
{
  "Logging": {
    "IncludeScopes": false,
    "LogLevel": {
      "Default": "Warning"
    }
  },
  "BotDetect": {
    "CaptchaEndpointPath": "simple-captcha-endpoint.ashx"
  }
}

[back to the top of angular & web api with mvc core 1/2 backend section]

[back to top of page]

Backend: Startup.cs

The Startup.cs source file does the following:

  • Configures the application pipeline to use SimpleCaptcha middleware
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;

using BotDetect.Web;
using BotDetect.Web.Http;

namespace AngularWebAPIwithMVC6CaptchaExample
{
    public class Startup
    {
        public Startup(IHostingEnvironment env)
        {
            var builder = new ConfigurationBuilder()
                .SetBasePath(env.ContentRootPath)
                .AddJsonFile("appsettings.json", optional: false, reloadOnChange: true)
                .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)
                .AddEnvironmentVariables();
            Configuration = builder.Build();
        }

        public IConfigurationRoot Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            // You can omit the next line on .NET Core 2.0 or higher
            services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();

            services.AddMemoryCache(); // Adds a default in-memory 
                                       // implementation of 
                                       // IDistributedCache

            // Add framework services.
            services.AddMvc();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
        {
            loggerFactory.AddConsole(Configuration.GetSection("Logging"));
            loggerFactory.AddDebug();

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseDefaultFiles(options);
            app.UseStaticFiles();

            // Configure the application pipeline to use SimpleCaptcha middleware
            app.UseSimpleCaptcha(Configuration.GetSection("BotDetect"));

            app.UseMvc();
        }
    }
}

[back to the top of angular & web api with mvc core 1/2 backend section]

[back to top of page]

Backend: botdetect.xml

The botdetect.xml source file contains the following:

  • Captcha style definitions consisting of:
    • The name of a captcha style
    • The ID of an <input> element in which user enters captcha codes
    • Other option settings -- the captcha code length in this particular case
<?xml version="1.0" encoding="UTF-8"?>
<botdetect xmlns="https://captcha.com/schema/net"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="https://captcha.com/schema/net 
     https://captcha.com/schema/net/botdetect-4.4.2.xsd">

  <captchaStyles>
    <captchaStyle>
      <name>angularBasicCaptcha</name>
      <userInputID>userCaptchaInput</userInputID>
      <codeLength>3-5</codeLength>
    </captchaStyle>
  </captchaStyles>
</botdetect>

[back to the top of angular & web api with mvc core 1/2 backend section]

[back to top of page]

Backend: BasicApiController.cs

The Controllers/BasicApiController.cs source file does the following:

  • Extracts the userEnteredCaptchaCode and captchaId values posted from the frontend
  • Validates captchas by calling the Validate(userEnteredCaptchaCode, captchaId) method
  • Returns the json-formatted captcha validation results to frontend
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;

using BotDetect.Web;

namespace AngularWebAPIwithMVC6CaptchaExample.Controllers
{
    [Produces("application/json")]
    [Route("api/basic-captcha")]
    public class BasicApiController : Controller
    {
        [HttpPost]
        public IActionResult Post([FromBody] Models.BasicFormModel data)
        {
            // create a captcha instance to be used for the captcha validation
            SimpleCaptcha captcha = new SimpleCaptcha();
            // execute the captcha validation
            bool isHuman = captcha.Validate(data.UserEnteredCaptchaCode, data.CaptchaId);

            // create an object that stores the validation result
            Dictionary<string, bool> validationResult = new Dictionary<string, bool>();

            if (isHuman == false)
            {
                // captcha validation failed
                validationResult.Add("success", false);
                // TODO: consider logging the attempt
            }
            else
            {
                // captcha validation succeeded
                validationResult.Add("success", true);
            }

            // return the json string with the validation result to the frontend
            return Json(validationResult);
        }
    }
}

[back to the top of angular & web api with mvc core 1/2 backend section]

[back to top of angular section]

[back to top of page]

..............................................................

Angular-based Frontend and the Legacy ASP.NET Web-API 2 on Backend

This is a partial walk-through of the example source code. It is not meant to replace a proper step-by-step guide. If you are new to BotDetect, skip it for now; and do start your first Angular captcha integration by following our step-by-step Angular CAPTCHA Integration Guide.

Introduction

This Angular captcha example shows the minimal code required to display and validate captchas in an application with an Angular frontend and a legacy ASP.NET Web-API 2 backend.

Download the BotDetect ASP.NET CAPTCHA Component and run this example

Within this page, the root folder of the extracted archive is referred as the <BDC-DIR>.

This example is in the <BDC-DIR>/lgcy-on-lgcy/examples/s_api-captcha-angular-webapi2/csharp/ folder; and contains the following files:

Frontend: app.module.ts

The angular-src/app/app.module.ts source file does the following:

  • Loads the BotDetect CAPTCHA Angular Module into the page
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppRoutingModule } from './app-routing.module';
import { BotDetectCaptchaModule } from 'angular-captcha';

import { AppComponent } from './app.component';
import { BasicComponent }   from './basic/basic.component';
import { ContactComponent }   from './contact/contact.component';

import { BasicSuccessNotifyComponent }   from './notify/basic-notify/basic-success-notify.component';
import { ContactSuccessNotifyComponent }   from './notify/contact-notify/contact-success-notify.component';

import { ValuesPipe } from './values.pipe';

@NgModule({
  declarations: [
    AppComponent,
    BasicComponent,
    ContactComponent,
    ValuesPipe,
    BasicSuccessNotifyComponent,
    ContactSuccessNotifyComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ReactiveFormsModule,
    AppRoutingModule,
    // import Captcha Angular Module
    BotDetectCaptchaModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

[back to the top of angular & legacy asp.net web-api 2 backend section]

[back to top of page]

Frontend: basic.component.html

The angular-src/app/basic/basic.component.html source file does the following:

  • Displays the captcha and user-input markups on the page
<form novalidate #f="ngForm" (ngSubmit)="validate(f.value, f.valid)">

  <div class="alert alert-success" *ngIf="successMessages">
    {{ successMessages }}
  </div>

  <div class="alert alert-error" *ngIf="errorMessages">
    {{ errorMessages }}
  </div>

  <!-- captcha challenge: placeholder -->
  <botdetect-captcha captchaStyleName="angularBasicCaptcha"></botdetect-captcha>

  <label>
    <span>Retype the characters from the picture:</span>
    <!-- captcha code: user-input textbox -->
    <input
      type="text"
      id="userCaptchaInput"
      name="userCaptchaInput"
      ngModel
      #userCaptchaInput="ngModel"  
    >
  </label>

  <button type="submit">Validate</button>
</form>

[back to the top of angular & legacy asp.net web-api 2 backend section]

[back to top of page]

Frontend: basic.component.ts

The angular-src/app/basic/basic.component.ts source file does the following:

  • Loads the captcha challenges from backend
  • Sets the captchaEndpoint property to point to the captcha endpoint path on backend
  • Processes the captcha validation results:
    • when the captcha validation fails -- it reloads captcha and displays an error message
    • when the captcha validation succeeds -- it executes by the captcha protected action
import { Component, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { BasicService } from './basic.service';

@Component({
  moduleId: module.id,
  selector: 'basic-form',
  templateUrl: 'basic.component.html',
  styleUrls: ['basic.component.css'],
  providers: [BasicService]
})
export class BasicComponent {

  /**
   * Captcha validation messages.
   */
  errorMessages: string;

  /**
   * BotDetect CAPTCHA component.
   */
  
  // if you use Angular 2/4/5/6/7 use this line:
  @ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;

  // if you use Angular 8 use this line instead of the above one:
  // @ViewChild(CaptchaComponent, { static: true }) captchaComponent: CaptchaComponent;  

  constructor(
    private basicService: BasicService,
    private router: Router  
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint = 'simple-captcha-endpoint.ashx';
  }

  /**
   * 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 = {
      // 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 backend
    this.basicService.send(postData)
      .subscribe(
        response => {
          if (response.success == false) {
            // captcha validation failed; show the error message
            this.errorMessages = 'CAPTCHA validation failed!';
            // call the this.captchaComponent.reloadImage()
            // in order to generate a new captcha challenge
            this.captchaComponent.reloadImage();
          } else {
            // captcha validation succeeded; proceed with the workflow
            this.router.navigate(['/basic-success-notify']) 
          }
        },
        error => {
          throw new Error(error);
        });
  }

}

[back to the top of angular & legacy asp.net web-api 2 backend section]

[back to top of page]

Frontend: basic.service.ts

The angular-src/app/basic/basic.service.ts source file does the following:

  • Sends the post request with the captcha id and the user entered captcha code to backend
import { Injectable }    from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';

import { Observable } from 'rxjs/Rx';

@Injectable()
export class BasicService {

  // basic api url
  basicUrl = 'api/webapi/basic';

  constructor(private http: Http) { }

  send(data: Object): Observable<any> {
    const headers = new Headers({ 'Content-Type': 'application/json' });
    const options = new RequestOptions({ headers: headers });

    return this.http.post(this.basicUrl, data, options)
      .map((response: Response) => response.json())
      .catch((error:any) => Observable.throw(error.json().error));
  }
}

[back to the top of angular & legacy asp.net web-api 2 backend section]

[back to top of page]

Backend: web.config

The web.config source file does the following:

  • Registers the simple-captcha-endpoint.ashx path
  • Maps it to the BotDetect.Web.SimpleCaptchaHandler
<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <appSettings></appSettings>
  <system.web>
    <compilation debug="false" targetFramework="4.5"/>
    <httpRuntime targetFramework="4.5"/>
    <httpHandlers>
      <!-- Register the HttpHandler used for BotDetect Captcha requests -->
      <add verb="GET" path="simple-captcha-endpoint.ashx" 
	   type="BotDetect.Web.SimpleCaptchaHandler, BotDetect"/>
    </httpHandlers>
  </system.web>
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false"/>
    <handlers>
      <!-- Register the HttpHandler used for BotDetect Captcha requests (IIS 7.0+) -->
      <remove name="BotDetectCaptchaHandler"/>
      <add name="BotDetectCaptchaHandler" preCondition="integratedMode" 
	   verb="GET" path="simple-captcha-endpoint.ashx"
	   type="BotDetect.Web.SimpleCaptchaHandler, BotDetect"/>
    </handlers>
  </system.webServer>
</configuration>

[back to the top of angular & legacy asp.net web-api 2 backend section]

[back to top of page]

Backend: botdetect.xml

The botdetect.xml source file contains the following:

  • Captcha style definitions consisting of:
    • The name of a captcha style
    • The ID of an <input> element in which user enters captcha codes
    • Other option settings -- the captcha code length in this particular case
<?xml version="1.0" encoding="UTF-8"?>
<botdetect xmlns="https://captcha.com/schema/net"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="https://captcha.com/schema/net
            https://captcha.com/schema/net/botdetect-4.4.2.xsd">

    <captchaStyles>
        <captchaStyle>
            <name>angularBasicCaptcha</name>
            <userInputID>userCaptchaInput</userInputID>
            <codeLength>3-5</codeLength>
        </captchaStyle>
    </captchaStyles>
</botdetect>

[back to the top of angular & legacy asp.net web-api 2 backend section]

[back to top of page]

Backend: WebApiController.cs

The Backend/Controllers/WebApiController.cs source file does the following:

  • Extracts the userEnteredCaptchaCode and captchaId values posted from the frontend
  • Validates captchas by calling the Validate(userEnteredCaptchaCode, captchaId) method
  • Returns the json-formatted captcha validation results to frontend
using System.Collections.Generic;
using System.Text.RegularExpressions;
using System.Web.Http;

using BotDetect.Web;

namespace AngularWebAPICaptchaExampleCSharp.Backend.Controllers
{
    public class WebApiController : ApiController
    {

        // POST api/webapi/basic
        public IHttpActionResult Basic([FromBody]CaptchaBasicModel data)
        {
            // create a captcha instance to be used for the captcha validation
            SimpleCaptcha captcha = new SimpleCaptcha();
            // execute the captcha validation
            bool isHuman = captcha.Validate(data.UserEnteredCaptchaCode, data.CaptchaId);

            // create an object that stores the validation result
            Dictionary<string, bool> validationResult = new Dictionary<string, bool>();

            if (isHuman == false)
            {
                // captcha validation failed
                validationResult.Add("success", false);
                // TODO: consider logging the attempt
            }
            else
            {
                // captcha validation succeeded
                validationResult.Add("success", true);
            }

            // return the json string with the validation result to the frontend
            return Ok(validationResult);
        }
    }
	
    public class CaptchaBasicModel
    {
        [JsonProperty("captchaId")]
        public string CaptchaId { get; set; }

        [JsonProperty("userEnteredCaptchaCode")]
        public string UserEnteredCaptchaCode { get; set; }
    }
	
}

[back to the top of angular & legacy asp.net web-api 2 backend section]

[back to top of angular section]

[back to top of page]

..............................................................

Angular-based Frontend and the Legacy ASP.NET Generic Handler on Backend

This is a partial walk-through of the example source code. It is not meant to replace a proper step-by-step guide. If you are new to BotDetect, skip it for now; and do start your first Angular captcha integration by following our step-by-step Angular CAPTCHA Integration Guide.

Introduction

This Angular captcha example shows the minimal code required to display and validate captchas in an application with an Angular frontend and a legacy ASP.NET Generic Handler backend.

Download the BotDetect ASP.NET CAPTCHA Component and run this example

Within this page, the root folder of the extracted archive is referred as the <BDC-DIR>.

This example is in the <BDC-DIR>/lgcy-on-lgcy/examples/s_api-captcha-angular-generic_handler/csharp/ folder; and contains the following files:

Frontend: app.module.ts

The angular-src/app/app.module.ts source file does the following:

  • Loads the BotDetect CAPTCHA Angular Module into the page
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppRoutingModule } from './app-routing.module';
import { BotDetectCaptchaModule } from 'angular-captcha';

import { AppComponent } from './app.component';
import { BasicComponent }   from './basic/basic.component';
import { ContactComponent }   from './contact/contact.component';

import { BasicSuccessNotifyComponent }   from './notify/basic-notify/basic-success-notify.component';
import { ContactSuccessNotifyComponent }   from './notify/contact-notify/contact-success-notify.component';

import { ValuesPipe } from './values.pipe';

@NgModule({
  declarations: [
    AppComponent,
    BasicComponent,
    ContactComponent,
    ValuesPipe,
    BasicSuccessNotifyComponent,
    ContactSuccessNotifyComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ReactiveFormsModule,
    AppRoutingModule,
    // import Captcha Angular Module
    BotDetectCaptchaModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

[back to the top of angular & legacy asp.net generic handler backend section]

[back to top of page]

Frontend: basic.component.html

The angular-src/app/basic/basic.component.html source file does the following:

  • Displays the captcha and user-input markups on the page
<form novalidate #f="ngForm" (ngSubmit)="validate(f.value, f.valid)">

  <div class="alert alert-success" *ngIf="successMessages">
    {{ successMessages }}
  </div>

  <div class="alert alert-error" *ngIf="errorMessages">
    {{ errorMessages }}
  </div>

  <!-- captcha challenge: placeholder -->
  <botdetect-captcha captchaStyleName="angularBasicCaptcha"></botdetect-captcha>

  <label>
    <span>Retype the characters from the picture:</span>
    <!-- captcha code: user-input textbox -->
    <input
      type="text"
      id="userCaptchaInput"
      name="userCaptchaInput"
      ngModel
      #userCaptchaInput="ngModel"  
    >
  </label>

  <button type="submit">Validate</button>
</form>

[back to the top of angular & legacy asp.net generic handler backend section]

[back to top of page]

Frontend: basic.component.ts

The angular-src/app/basic/basic.component.ts source file does the following:

  • Loads the captcha challenges from backend
  • Sets the captchaEndpoint property to point to the captcha endpoint path on backend
  • Processes the captcha validation results:
    • when the captcha validation fails -- it reloads captcha and displays an error message
    • when the captcha validation succeeds -- it executes by the captcha protected action
import { Component, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { BasicService } from './basic.service';

@Component({
  moduleId: module.id,
  selector: 'basic-form',
  templateUrl: 'basic.component.html',
  styleUrls: ['basic.component.css'],
  providers: [BasicService]
})
export class BasicComponent {

  /**
   * Captcha validation messages.
   */
  errorMessages: string;

  /**
   * BotDetect CAPTCHA component.
   */
  
  // if you use Angular 2/4/5/6/7 use this line:
  @ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;

  // if you use Angular 8 use this line instead of the above one:
  // @ViewChild(CaptchaComponent, { static: true }) captchaComponent: CaptchaComponent;  

  constructor(
    private basicService: BasicService,
    private router: Router  
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint = 'simple-captcha-endpoint.ashx';
  }

  /**
   * 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 = {
      // 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 backend
    this.basicService.send(postData)
      .subscribe(
        response => {
          if (response.success == false) {
            // captcha validation failed; show the error message
            this.errorMessages = 'CAPTCHA validation failed!';
            // call the this.captchaComponent.reloadImage()
            // in order to generate a new captcha challenge
            this.captchaComponent.reloadImage();
          } else {
            // captcha validation succeeded; proceed with the workflow
            this.router.navigate(['/basic-success-notify']) 
          }
        },
        error => {
          throw new Error(error);
        });
  }

}

[back to the top of angular & legacy asp.net generic handler backend section]

[back to top of page]

Frontend: basic.service.ts

The angular-src/app/basic/basic.service.ts source file does the following:

  • Sends the post request with the captcha id and the user entered captcha code to backend
import { Injectable }    from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';

import { Observable } from 'rxjs/Rx';

@Injectable()
export class BasicService {

  // basic api url
  basicUrl = 'BasicHandler.ashx';

  constructor(private http: Http) { }

  send(data: Object): Observable<any> {
    const headers = new Headers({ 'Content-Type': 'application/json' });
    const options = new RequestOptions({ headers: headers });

    return this.http.post(this.basicUrl, data, options)
      .map((response: Response) => response.json())
      .catch((error:any) => Observable.throw(error.json().error));
  }
}

[back to the top of angular & legacy asp.net generic handler backend section]

[back to top of page]

Backend: web.config

The web.config source file does the following:

  • Registers the simple-captcha-endpoint.ashx path
  • Maps it to the BotDetect.Web.SimpleCaptchaHandler
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.5"/>
    <httpRuntime targetFramework="4.5"/>
    <httpHandlers>
      <!-- Register the HttpHandler used for BotDetect Captcha requests -->
      <add verb="GET" path="simple-captcha-endpoint.ashx"
           type="BotDetect.Web.SimpleCaptchaHandler, BotDetect"/>
    </httpHandlers>
  </system.web>
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <handlers>
      <!-- Register the HttpHandler used for BotDetect Captcha requests (IIS 7.0+) -->
      <remove name="BotDetectCaptchaHandler"/>
      <add name="BotDetectCaptchaHandler" preCondition="integratedMode"
           verb="GET" path="simple-captcha-endpoint.ashx"
           type="BotDetect.Web.SimpleCaptchaHandler, BotDetect"/>
    </handlers>
  </system.webServer>
</configuration>

[back to the top of angular & legacy asp.net generic handler backend section]

[back to top of page]

Backend: botdetect.xml

The botdetect.xml source file contains the following:

  • Captcha style definitions consisting of:
    • The name of a captcha style
    • The ID of an <input> element in which user enters captcha codes
    • Other option settings -- the captcha code length in this particular case
<?xml version="1.0" encoding="UTF-8"?>
<botdetect xmlns="https://captcha.com/schema/net"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="https://captcha.com/schema/net
            https://captcha.com/schema/net/botdetect-4.4.2.xsd">

    <captchaStyles>
        <captchaStyle>
            <name>angularBasicCaptcha</name>
            <userInputID>userCaptchaInput</userInputID>
            <codeLength>3-5</codeLength>
        </captchaStyle>
    </captchaStyles>
</botdetect>

[back to the top of angular & legacy asp.net generic handler backend section]

[back to top of page]

Backend: BasicHandler.ashx

The BasicHandler.ashx source file does the following:

  • Extracts the userEnteredCaptchaCode and captchaId values posted from the frontend
  • Validates captchas by calling the Validate(userEnteredCaptchaCode, captchaId) method
  • Returns the json-formatted captcha validation results to frontend
<%@ WebHandler Language="C#" Class="BasicHandler" %>

using System;
using System.Web;
using System.IO;
using Newtonsoft.Json;
using System.Collections.Generic;

using BotDetect.Web;

public class BasicHandler : IHttpHandler
{
    public void ProcessRequest (HttpContext context)
    {
        if (HttpContext.Current.Request.HttpMethod == "POST")
        {
            string dataJson = new StreamReader(context.Request.InputStream).ReadToEnd();

            Dictionary<string, string> formDataObj = new Dictionary<string, string>();
            formDataObj = JsonConvert.DeserializeObject<Dictionary<string, string>>(dataJson);

            string userEnteredCaptchaCode = formDataObj["userEnteredCaptchaCode"];
            string captchaId = formDataObj["captchaId"];

            // create a captcha instance to be used for the captcha validation
            SimpleCaptcha captcha = new SimpleCaptcha();
            // execute the captcha validation
            bool isHuman = captcha.Validate(userEnteredCaptchaCode, captchaId);
           
            // create an object that stores the validation result
            Dictionary<string, bool> validationResult = new Dictionary<string, bool>();

            if (isHuman == false)
            {
                // captcha validation failed
                validationResult.Add("success", false);
            }
            else
            {
                // captcha validation succeeded
                validationResult.Add("success", true);
            }

            // return the json string with the validation result to the frontend
            context.Response.ContentType = "application/json; charset=utf-8";
            context.Response.Write(JsonConvert.SerializeObject(validationResult));
        }
        else
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("Only HTTP POST requests are allowed.");
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

[back to the top of angular & legacy asp.net generic handler backend section]

[back to top of angular section]

[back to top of page]

..............................................................

Angular-based Frontend and Java Servlet on Backend

This is a partial walk-through of the example source code. It is not meant to replace a proper step-by-step guide. If you are new to BotDetect, skip it for now; and do start your first Angular captcha integration by following our step-by-step Angular CAPTCHA Integration Guide.

Introduction

This Angular captcha example shows the minimal code required to display and validate captchas in an application with an Angular frontend and a Java Servlet backend.

Download the BotDetect Java CAPTCHA Library archive and run this example

Within this page, the root folder of the extracted archive is referred as the <BDC-DIR>.

This example is in the <BDC-DIR>/examples/s_api-captcha-angular-servlet/ folder; and contains the following files:

Frontend: app.module.ts

The src/main/webapp/angular-src/app/app.module.ts source file does the following:

  • Loads the BotDetect CAPTCHA Angular Module into the page
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppRoutingModule } from './app-routing.module';
import { BotDetectCaptchaModule } from 'angular-captcha';

import { AppComponent } from './app.component';
import { BasicComponent }   from './basic/basic.component';
import { ContactComponent }   from './contact/contact.component';

import { BasicSuccessNotifyComponent }   from './notify/basic-notify/basic-success-notify.component';
import { ContactSuccessNotifyComponent }   from './notify/contact-notify/contact-success-notify.component';

import { ValuesPipe } from './values.pipe';

@NgModule({
  declarations: [
    AppComponent,
    BasicComponent,
    ContactComponent,
    ValuesPipe,
    BasicSuccessNotifyComponent,
    ContactSuccessNotifyComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ReactiveFormsModule,
    AppRoutingModule,
    // import Captcha Angular Module
    BotDetectCaptchaModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

[back to the top of angular & java servlet backend section]

[back to top of page]

Frontend: basic.component.html

The src/main/webapp/angular-src/app/basic/basic.component.html source file does the following:

  • Displays the captcha and user-input markups on the page
<form novalidate #f="ngForm" (ngSubmit)="validate(f.value, f.valid)">

  <div class="alert alert-success" *ngIf="successMessages">
    {{ successMessages }}
  </div>

  <div class="alert alert-error" *ngIf="errorMessages">
    {{ errorMessages }}
  </div>

  <!-- captcha challenge: placeholder -->
  <botdetect-captcha captchaStyleName="angularBasicCaptcha"></botdetect-captcha>

  <label>
    <span>Retype the characters from the picture:</span>
    <!-- captcha code: user-input textbox -->
    <input
      type="text"
      id="userCaptchaInput"
      name="userCaptchaInput"
      ngModel
      #userCaptchaInput="ngModel"  
    >
  </label>

  <button type="submit">Validate</button>
</form>

[back to the top of angular & java servlet backend section]

[back to top of page]

Frontend: basic.component.ts

The src/main/webapp/angular-src/app/basic/basic.component.ts source file does the following:

  • Loads the captcha challenges from backend
  • Sets the captchaEndpoint property to point to the captcha endpoint path on backend
  • Processes the captcha validation results:
    • when the captcha validation fails -- it reloads captcha and displays an error message
    • when the captcha validation succeeds -- it executes by the captcha protected action
import { Component, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { BasicService } from './basic.service';

@Component({
  moduleId: module.id,
  selector: 'basic-form',
  templateUrl: 'basic.component.html',
  styleUrls: ['basic.component.css'],
  providers: [BasicService]
})
export class BasicComponent {

  /**
   * Captcha validation messages.
   */
  errorMessages: string;

  /**
   * BotDetect CAPTCHA component.
   */
  
  // if you use Angular 2/4/5/6/7 use this line:
  @ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;

  // if you use Angular 8 use this line instead of the above one:
  // @ViewChild(CaptchaComponent, { static: true }) captchaComponent: CaptchaComponent;  

  constructor(
    private basicService: BasicService,
    private router: Router  
  ) { }

    ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint = 'simple-captcha-endpoint';
  }

  /**
   * 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 = {
      // 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 backend
    this.basicService.send(postData)
      .subscribe(
        response => {
          if (response.success == false) {
            // captcha validation failed; show the error message
            this.errorMessages = 'CAPTCHA validation failed!';
            // call the this.captchaComponent.reloadImage()
            // in order to generate a new captcha challenge
            this.captchaComponent.reloadImage();
          } else {
            // captcha validation succeeded; proceed with the workflow
            this.router.navigate(['/basic-success-notify']) 
          }
        },
        error => {
          throw new Error(error);
        });
  }

}

[back to the top of angular & java servlet backend section]

[back to top of page]

Frontend: basic.service.ts

The src/main/webapp/angular-src/app/basic/basic.service.ts source file does the following:

  • Sends the post request with the captcha id and the user entered captcha code to backend
import { Injectable }    from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';

import { Observable } from 'rxjs/Rx';

@Injectable()
export class BasicService {

  // basic api url
  basicUrl = 'basic-captcha';

  constructor(private http: Http) { }

  send(data: Object): Observable<any> {
    const headers = new Headers({ 'Content-Type': 'application/json' });
    const options = new RequestOptions({ headers: headers });

    return this.http.post(this.basicUrl, data, options)
      .map((response: Response) => response.json())
      .catch((error:any) => Observable.throw(error.json().error));
  }
}

[back to the top of angular & java servlet backend section]

[back to top of page]

Backend: web.xml

The src/main/webapp/WEB-INF/web.xml source file does the following:

  • Registers the simple-captcha-endpoint path
  • Maps it to the com.captcha.botdetect.web.servlet.SimpleCaptchaServlet
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee                 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <servlet>
        <servlet-name>BotDetect Captcha</servlet-name>
        <servlet-class>com.captcha.botdetect.web.servlet.SimpleCaptchaServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>BotDetect Captcha</servlet-name>
        <url-pattern>/simple-captcha-endpoint</url-pattern>
    </servlet-mapping>
    <servlet>
        <servlet-name>Basic Captcha</servlet-name>
        <servlet-class>com.captcha.botdetect.examples.angular.basic_form.BasicServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>Basic Captcha</servlet-name>
        <url-pattern>/basic-captcha</url-pattern>
    </servlet-mapping>
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
</web-app>

[back to the top of angular & java servlet backend section]

[back to top of page]

Backend: botdetect.xml

The src/main/webapp/WEB-INF/botdetect.xml source file contains the following:

  • Captcha style definitions consisting of:
    • The name of a captcha style
    • The ID of an <input> element in which user enters captcha codes
    • Other option settings -- the captcha code length in this particular case
<?xml version="1.0" encoding="UTF-8"?>
<botdetect xmlns="https://captcha.com/schema/java" 
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="https://captcha.com/schema/java 
            https://captcha.com/schema/java/botdetect-4.0.beta3.7.xsd">

    <captchaStyles>
        <captchaStyle>
            <name>angularBasicCaptcha</name>
            <userInputID>userCaptchaInput</userInputID>
            <codeLength>3-5</codeLength>
        </captchaStyle>
    </captchaStyles>
</botdetect>

[back to the top of angular & java servlet backend section]

[back to top of page]

Backend: BasicServlet.java

The src/main/java/com/captcha/botdetect/examples/angular/basic_form/
BasicServlet.java source file does the following:

  • Extracts the userEnteredCaptchaCode and captchaId values posted from the frontend
  • Validates captchas by calling the validate(userEnteredCaptchaCode, captchaId) method
  • Returns the json-formatted captcha validation results to frontend
package com.captcha.botdetect.examples.angular.basic_form;

import com.captcha.botdetect.web.servlet.SimpleCaptcha;
import com.google.gson.Gson;
import com.google.gson.JsonObject;
import com.google.gson.JsonParser;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class BasicServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
       
        PrintWriter out = response.getWriter();
        Gson gson = new Gson();
        
        response.setContentType("application/json; charset=utf-8");
        
        JsonParser parser = new JsonParser();
        JsonObject formDataObj = (JsonObject) parser.parse(request.getReader());
        
        String userEnteredCaptchaCode = formDataObj.get("userEnteredCaptchaCode").getAsString();
        String captchaId = formDataObj.get("captchaId").getAsString();
        
        // create a captcha instance to be used for the captcha validation
        SimpleCaptcha captcha = SimpleCaptcha.load(request);
        // execute the captcha validation
        boolean isHuman = captcha.validate(userEnteredCaptchaCode, captchaId);
        
        // create an object that stores the validation result
        BasicValidationResult validationResult = new BasicValidationResult();
        
        if (isHuman == false) {
            // captcha validation failed
            validationResult.setSuccess(false);
            // TODO: consider logging the attempt
        } else {
            // captcha validation succeeded
            validationResult.setSuccess(true);
        }
        
        try {
            // return the json string with the validation result to the frontend
            out.write(gson.toJson(validationResult));
        } catch(Exception ex) {
            out.write(ex.getMessage());
        } finally {
            out.close();
        }
    }
}

class BasicValidationResult {

    private boolean success;

    public BasicValidationResult() {
    }

    public boolean getSuccess() {
        return success;
    }

    public void setSuccess(boolean success) {
        this.success = success;
    }
}

[back to the top of angular & java servlet backend section]

[back to top of angular section]

[back to top of page]

..............................................................

Angular-based Frontend and the plain PHP on Backend

This is a partial walk-through of the example source code. It is not meant to replace a proper step-by-step guide. If you are new to BotDetect, skip it for now; and do start your first Angular captcha integration by following our step-by-step Angular CAPTCHA Integration Guide.

Introduction

This Angular captcha example shows the minimal code required to display and validate captchas in an application with an Angular frontend and the plain PHP backend.

Download the BotDetect PHP CAPTCHA Library archive and run this example

Within this page, the root folder of the extracted archive is referred as the <BDC-DIR>.

This example is in the <BDC-DIR>/examples/s_api-captcha-angular-plainphp/ folder; and contains the following files:

Frontend: app.module.ts

The angular-src/app/app.module.ts source file does the following:

  • Loads the BotDetect CAPTCHA Angular Module into the page
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppRoutingModule } from './app-routing.module';
import { BotDetectCaptchaModule } from 'angular-captcha';

import { AppComponent } from './app.component';
import { BasicComponent }   from './basic/basic.component';
import { ContactComponent }   from './contact/contact.component';

import { BasicSuccessNotifyComponent }   from './notify/basic-notify/basic-success-notify.component';
import { ContactSuccessNotifyComponent }   from './notify/contact-notify/contact-success-notify.component';

import { ValuesPipe } from './values.pipe';

@NgModule({
  declarations: [
    AppComponent,
    BasicComponent,
    ContactComponent,
    ValuesPipe,
    BasicSuccessNotifyComponent,
    ContactSuccessNotifyComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ReactiveFormsModule,
    AppRoutingModule,
    // import Captcha Angular Module
    BotDetectCaptchaModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

[back to the top of angular & plain php backend section]

[back to top of page]

Frontend: basic.component.html

The angular-src/app/basic/basic.component.html source file does the following:

  • Displays the captcha and user-input markups on the page
<form novalidate #f="ngForm" (ngSubmit)="validate(f.value, f.valid)">

  <div class="alert alert-error" *ngIf="errorMessages">
    {{ errorMessages }}
  </div>

  <!-- captcha challenge: placeholder -->
  <botdetect-captcha captchaStyleName="angularBasicCaptcha"></botdetect-captcha>

  <label>
    <span>Retype the characters from the picture:</span>
    <!-- captcha code: user-input textbox -->
    <input
      type="text"
      id="userCaptchaInput"
      name="userCaptchaInput"
      ngModel
      #userCaptchaInput="ngModel"  
    >
  </label>

  <button type="submit">Validate</button>
</form>

[back to the top of angular & plain php backend section]

[back to top of page]

Frontend: basic.component.ts

The angular-src/app/basic/basic.component.ts source file does the following:

  • Loads the captcha challenges from backend
  • Sets the captchaEndpoint property to point to the captcha endpoint path on backend
  • Processes the captcha validation results:
    • when the captcha validation fails -- it reloads captcha and displays an error message
    • when the captcha validation succeeds -- it executes by the captcha protected action
import { Component, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Rx';

import { CaptchaComponent } from 'angular-captcha';

import { BasicService } from './basic.service';

@Component({
  moduleId: module.id,
  selector: 'basic-form',
  templateUrl: 'basic.component.html',
  styleUrls: ['basic.component.css'],
  providers: [BasicService]
})
export class BasicComponent {

  /**
   * Captcha validation messages.
   */
  errorMessages: string;

  /**
   * BotDetect CAPTCHA component.
   */
  
  // if you use Angular 2/4/5/6/7 use this line:
  @ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;

  // if you use Angular 8 use this line instead of the above one:
  // @ViewChild(CaptchaComponent, { static: true }) captchaComponent: CaptchaComponent;  

  constructor(
    private basicService: BasicService,
    private router: Router  
  ) { }

  ngOnInit(): void {
    // set the captchaEndpoint property to point to 
    // the captcha endpoint path on your app's backend
    this.captchaComponent.captchaEndpoint = 'botdetect-captcha-lib/simple-botdetect.php';
  }

  /**
   * 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 = {
      // 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 backend
    this.basicService.send(postData)
      .subscribe(
        response => {
          if (response.success == false) {
            // captcha validation failed; show the error message
            this.errorMessages = 'CAPTCHA validation failed!';
            // call the this.captchaComponent.reloadImage()
            // in order to generate a new captcha challenge
            this.captchaComponent.reloadImage();
          } else {
            // captcha validation succeeded; proceed with the workflow
            this.router.navigate(['/basic-success-notify']) 
          }
        },
        error => {
          throw new Error(error);
        });
  }

}

[back to the top of angular & plain php backend section]

[back to top of page]

Frontend: basic.service.ts

The angular-src/app/basic/basic.service.ts source file does the following:

  • Sends the post request with the captcha id and the user entered captcha code to backend
import { Injectable }    from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';

import { Observable } from 'rxjs/Rx';

@Injectable()
export class BasicService {

  // basic api url
  basicUrl = 'basic.php';

  constructor(private http: Http) { }

  send(data: Object): Observable<any> {
    const headers = new Headers({ 'Content-Type': 'application/json' });
    const options = new RequestOptions({ headers: headers });

    return this.http.post(this.basicUrl, data, options)
      .map((response: Response) => response.json())
      .catch((error:any) => Observable.throw(error.json().error));
  }
}

[back to the top of angular & plain php backend section]

[back to top of page]

Backend: botdetect.xml

The botdetect-captcha-lib/config/botdetect.xml source file contains the following:

  • Captcha style definitions consisting of:
    • The name of a captcha style
    • The ID of an <input> element in which user enters captcha codes
    • Other option settings -- the captcha code length in this particular case
<?xml version="1.0" encoding="UTF-8"?>
<botdetect xmlns="https://captcha.com/schema/php"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="https://captcha.com/schema/php
      https://captcha.com/schema/php/botdetect-4.2.5.xsd">

  <captchaStyles>
    <captchaStyle>
      <name>angularBasicCaptcha</name>
      <userInputID>userCaptchaInput</userInputID>
      <codeLength>3-5</codeLength>
    </captchaStyle>
  </captchaStyles>
</botdetect>

[back to the top of angular & plain php backend section]

[back to top of page]

Backend: basic.php

The basic.php source file does the following:

  • Extracts the $userEnteredCaptchaCode and $captchaId values posted from the frontend
  • Validates captchas by calling the Validate($userEnteredCaptchaCode, $captchaId) method
  • Returns the json-formatted captcha validation results to frontend
<?php header('Content-Type: application/json');

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

  require('botdetect-captcha-lib/simple-botdetect.php');

  $postedData = (array) json_decode(file_get_contents('php://input'), true);

  $userEnteredCaptchaCode = $postedData['userEnteredCaptchaCode'];
  $captchaId = $postedData['captchaId'];

  // create a captcha instance to be used for the captcha validation
  $captcha = new SimpleCaptcha();
  // execute the captcha validation
  $isHuman = $captcha->Validate($userEnteredCaptchaCode, $captchaId);

  if ($isHuman == false) {
    // captcha validation failed
    $result = array('success' => false);
    // TODO: consider logging the attempt
  } else {
    // captcha validation succeeded
    $result = array('success' => true);
  }

  // return the json string with the validation result to the frontend
  echo json_encode($result); exit;
}

[back to the top of angular & plain php backend section]

[back to top of angular section]

[back to top of page]

..............................................................

Please Note

The new experimental Simple API is still work-in-progress. This Integration Guide & Examples require you to have the Angular Captcha Module v3.7.4 or AngularJS Captcha Module v1.6.1 on frontend, and one of the following BotDetect CAPTCHA releases on backend: ASP.NET v4.4.2+, Java v4.0.Beta3.7+, PHP v4.2.5+.

Click on the link below that matches the Angular version that you are using:

..............................................................

AngularJS-based Frontend

Click on the link below that matches your BotDetect CAPTCHA Angular Module usage scenario:

First Time Here?

The AngularJS CAPTCHA Integration Guide is the best place to start!

[back to top of page]

..............................................................

AngularJS-based Frontend and the web API with MVC Core 1/2 on Backend

This is a partial walk-through of the example source code. It is not meant to replace a proper step-by-step guide. If you are new to BotDetect, skip it for now; and do start your first AngularJS captcha integration by following our step-by-step AngularJS CAPTCHA Integration Guide.

Introduction

This AngularJS captcha example shows the minimal code required to display and validate captchas in an application with an AngularJS frontend and a web API with MVC Core 1/2 backend.

Download the BotDetect ASP.NET CAPTCHA Component and run this example

Within this page, the root folder of the extracted archive is referred as the <BDC-DIR>.

This example is in the <BDC-DIR>/core-on-core/examples/s_api-captcha-angularjs-webapi_mvccore2/ folder; and contains the following files:

Frontend: index.html

The wwwroot/index.html source file does the following:

  • Loads the BotDetect CAPTCHA AngularJS Module into the page
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>BotDetect AngularJS CAPTCHA Examples</title>
  <link href="styles/styles.css" type="text/css" rel="stylesheet">
</head>
<body>
  <header>
    <div class="header-content"><h1>BotDetect AngularJS CAPTCHA Examples</h1></div>
  </header>

  <nav ng-controller="NavigationController">
    <ul class="nav">
      <li><a href="#/basic" ng-class="{ active: isActive('/basic')}">Basic Example</a></li>
        <li><a href="#/contact" ng-class="{ active: isActive('/contact')}">Contact Example</a></li>
    </ul>
  </nav>

  <section id="main-content">
    <ng-view></ng-view>
  </section>

  
  <script src="node_modules/angularjs/angular.min.js"></script>
  <script src="node_modules/angularjs/angular-route.min.js"></script>

  <script src="node_modules/angularjs-captcha/dist/angularjs-captcha.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

[back to the top of angularjs & web api with mvc core 1/2 backend section]

[back to top of page]

Frontend: basic-captcha.html

The wwwroot/templates/basic/basic-captcha.html source file does the following:

  • Displays the captcha and user-input markups on the page
<form name="basicForm" novalidate ng-controller="BasicController" ng-submit="validate(basicForm.$valid)">

  <div class="alert alert-error" ng-show="errorMessages">
    {{ errorMessages }}
  </div>

  <!-- captcha challenge: placeholder -->
  <botdetect-captcha captchaStyleName="angularBasicCaptcha"></botdetect-captcha>

  <label>
    <span>Retype the characters from the picture:</span>
    <!-- captcha code: user-input textbox -->
    <input type="text" 
        name="userCaptchaInput"
        id="userCaptchaInput"
        ng-model="userCaptchaInput"  
    >
  </label>

  <button type="submit">Validate</button>
</form>

[back to the top of angularjs & web api with mvc core 1/2 backend section]

[back to top of page]

Frontend: app.js

The wwwroot/app.js source file does the following:

  • Loads the captcha challenges from backend
  • Sends the post request with the captcha id and the user entered captcha code to backend
  • Processes the captcha validation results:
    • when the captcha validation fails -- it reloads captcha and displays an error message
    • when the captcha validation succeeds -- it executes by the captcha protected action
var app = angular.module('app', ['BotDetectCaptcha', 'ngRoute']);

app.config(function ($routeProvider, captchaSettingsProvider) {
  $routeProvider
    .when('/basic', { templateUrl: 'templates/basic/basic-captcha.html' })
    .when('/contact', { templateUrl: 'templates/contact/contact-captcha.html' })
    .when('/basic-success-notify', { templateUrl: 'templates/notify/basic-success-notify.html' })
    .when('/contact-success-notify', { templateUrl: 'templates/notify/contact-success-notify.html' })
    .otherwise({ redirectTo: '/basic' });

  // set the captchaEndpoint property to point to 
  // the captcha endpoint path on your app's backend
  captchaSettingsProvider.setSettings({
    captchaEndpoint: 'simple-captcha-endpoint.ashx'
  });
});

app.controller('BasicController', function ($scope, $http, $window, Captcha) {

  // validation messages
  $scope.errorMessages = '';

  // 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 backend
    $http({
      method: 'POST',
      url: 'api/basic-captcha',
      data: JSON.stringify(postData)
    })
      .then(function (response) {
        if (response.data.success == false) {
          // captcha validation failed; show the error message
          $scope.errorMessages = 'CAPTCHA validation failed!';
          // call the captcha.reloadImage()
          // in order to generate a new captcha challenge
          captcha.reloadImage();
        } else {
          // captcha validation succeeded; proceed with the workflow
          $window.location.href = '#/basic-success-notify';
        }
      }, function (error) {
        console.log(error.data);
      });
  };

});

[back to the top of angularjs & web api with mvc core 1/2 backend section]

[back to top of page]

Backend: appsettings.json

The appsettings.json source file contains the following:

  • BotDetect configuration section that defines the CaptchaEndpointPath path
{
  "Logging": {
    "IncludeScopes": false,
    "LogLevel": {
      "Default": "Warning"
    }
  },
  "BotDetect": {
    "CaptchaEndpointPath": "simple-captcha-endpoint.ashx"
  }
}

[back to the top of angularjs & web api with mvc core 1/2 backend section]

[back to top of page]

Backend: Startup.cs

The Startup.cs source file does the following:

  • Configures the application pipeline to use SimpleCaptcha middleware
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;

using BotDetect.Web;
using BotDetect.Web.Http;

namespace AngularJSWebAPIwithMVC6CaptchaExample
{
    public class Startup
    {
        public Startup(IHostingEnvironment env)
        {
            var builder = new ConfigurationBuilder()
                .SetBasePath(env.ContentRootPath)
                .AddJsonFile("appsettings.json", optional: false, reloadOnChange: true)
                .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)
                .AddEnvironmentVariables();
            Configuration = builder.Build();
        }

        public IConfigurationRoot Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            // You can omit the next line on .NET Core 2.0 or higher
            services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();

            services.AddMemoryCache(); // Adds a default in-memory 
                                       // implementation of 
                                       // IDistributedCache

            // Add framework services.
            services.AddMvc();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
        {
            loggerFactory.AddConsole(Configuration.GetSection("Logging"));
            loggerFactory.AddDebug();

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseDefaultFiles(options);
            app.UseStaticFiles();

            // Configure the application pipeline to use SimpleCaptcha middleware
            app.UseSimpleCaptcha(Configuration.GetSection("BotDetect"));

            app.UseMvc();
        }
    }
}

[back to the top of angularjs & web api with mvc core 1/2 backend section]

[back to top of page]

Backend: botdetect.xml

The botdetect.xml source file contains the following:

  • Captcha style definitions consisting of:
    • The name of a captcha style
    • The ID of an <input> element in which user enters captcha codes
    • Other option settings -- the captcha code length in this particular case
<?xml version="1.0" encoding="UTF-8"?>
<botdetect xmlns="https://captcha.com/schema/net"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="https://captcha.com/schema/net 
     https://captcha.com/schema/net/botdetect-4.4.2.xsd">

  <captchaStyles>
    <captchaStyle>
      <name>angularBasicCaptcha</name>
      <userInputID>userCaptchaInput</userInputID>
      <codeLength>3-5</codeLength>
    </captchaStyle>
  </captchaStyles>
</botdetect>

[back to the top of angularjs & web api with mvc core 1/2 backend section]

[back to top of page]

Backend: BasicApiController.cs

The Controllers/BasicApiController.cs source file does the following:

  • Extracts the userEnteredCaptchaCode and captchaId values posted from the frontend
  • Validates captchas by calling the Validate(userEnteredCaptchaCode, captchaId) method
  • Returns the json-formatted captcha validation results to frontend
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;

using BotDetect.Web;

namespace AngularJSWebAPIwithMVC6CaptchaExample.Controllers
{
    [Produces("application/json")]
    [Route("api/basic-captcha")]
    public class BasicApiController : Controller
    {
        [HttpPost]
        public IActionResult Post([FromBody] Models.BasicFormModel data)
        {
            // create a captcha instance to be used for the captcha validation
            SimpleCaptcha captcha = new SimpleCaptcha();
            // execute the captcha validation
            bool isHuman = captcha.Validate(data.UserEnteredCaptchaCode, data.CaptchaId);

            // create an object that stores the validation result
            Dictionary<string, bool> validationResult = new Dictionary<string, bool>();

            if (isHuman == false)
            {
                // captcha validation failed
                validationResult.Add("success", false);
                // TODO: consider logging the attempt
            }
            else
            {
                // captcha validation succeeded
                validationResult.Add("success", true);
            }

            // return the json string with the validation result to the frontend
            return Json(validationResult);
        }
    }
}

[back to the top of angularjs & web api with mvc core 1/2 backend section]

[back to top of angularjs section]

[back to top of page]

..............................................................

AngularJS-based Frontend and the Legacy ASP.NET Web-API 2 on Backend

This is a partial walk-through of the example source code. It is not meant to replace a proper step-by-step guide. If you are new to BotDetect, skip it for now; and do start your first AngularJS captcha integration by following our step-by-step AngularJS CAPTCHA Integration Guide.

Introduction

This AngularJS captcha example shows the minimal code required to display and validate captchas in an application with an AngularJS frontend and a legacy ASP.NET Web-API 2 backend.

Download the BotDetect ASP.NET CAPTCHA Component and run this example

Within this page, the root folder of the extracted archive is referred as the <BDC-DIR>.

This example is in the <BDC-DIR>/lgcy-on-lgcy/examples/s_api-captcha-angularjs-webapi2/csharp/ folder; and contains the following files:

Frontend: index.html

The index.html source file does the following:

  • Loads the BotDetect CAPTCHA AngularJS Module into the page
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>BotDetect AngularJS CAPTCHA Examples</title>
  <link href="styles/styles.css" type="text/css" rel="stylesheet">
</head>
<body>
  <header>
    <div class="header-content"><h1>BotDetect AngularJS CAPTCHA Examples</h1></div>
  </header>

  <nav ng-controller="NavigationController">
    <ul class="nav">
      <li><a href="#/basic" ng-class="{ active: isActive('/basic')}">Basic Example</a></li>
        <li><a href="#/contact" ng-class="{ active: isActive('/contact')}">Contact Example</a></li>
    </ul>
  </nav>

  <section id="main-content">
    <ng-view></ng-view>
  </section>

  
  <script src="node_modules/angularjs/angular.min.js"></script>
  <script src="node_modules/angularjs/angular-route.min.js"></script>

  <script src="node_modules/angularjs-captcha/dist/angularjs-captcha.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

[back to the top of angularjs & legacy asp.net web-api 2 backend section]

[back to top of page]

Frontend: basic-captcha.html

The templates/basic/basic-captcha.html source file does the following:

  • Displays the captcha and user-input markups on the page
<form name="basicForm" novalidate ng-controller="BasicController" ng-submit="validate(basicForm.$valid)">

  <div class="alert alert-error" ng-show="errorMessages">
    {{ errorMessages }}
  </div>

  <!-- captcha challenge: placeholder -->
  <botdetect-captcha captchaStyleName="angularBasicCaptcha"></botdetect-captcha>

  <label>
    <span>Retype the characters from the picture:</span>
    <!-- captcha code: user-input textbox -->
    <input type="text" 
        name="userCaptchaInput"
        id="userCaptchaInput"
        ng-model="userCaptchaInput"  
    >
  </label>

  <button type="submit">Validate</button>
</form>

[back to the top of angularjs & legacy asp.net web-api 2 backend section]

[back to top of page]

Frontend: app.js

The app.js source file does the following:

  • Loads the captcha challenges from backend
  • Sends the post request with the captcha id and the user entered captcha code to backend
  • Processes the captcha validation results:
    • when the captcha validation fails -- it reloads captcha and displays an error message
    • when the captcha validation succeeds -- it executes by the captcha protected action
var app = angular.module('app', ['BotDetectCaptcha', 'ngRoute']);

app.config(function ($routeProvider, captchaSettingsProvider) {
  $routeProvider
    .when('/basic', { templateUrl: 'templates/basic/basic-captcha.html' })
    .when('/contact', { templateUrl: 'templates/contact/contact-captcha.html' })
    .when('/basic-success-notify', { templateUrl: 'templates/notify/basic-success-notify.html' })
    .when('/contact-success-notify', { templateUrl: 'templates/notify/contact-success-notify.html' })
    .otherwise({ redirectTo: '/basic' });

  // set the captchaEndpoint property to point to 
  // the captcha endpoint path on your app's backend
  captchaSettingsProvider.setSettings({
    captchaEndpoint: 'simple-captcha-endpoint.ashx'
  });
});

app.controller('BasicController', function ($scope, $http, $window, Captcha) {

  // validation messages
  $scope.errorMessages = '';

  // 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 backend
    $http({
      method: 'POST',
      url: 'api/webapi/basic',
      data: JSON.stringify(postData)
    })
      .then(function (response) {
        if (response.data.success == false) {
          // captcha validation failed; show the error message
          $scope.errorMessages = 'CAPTCHA validation failed!';
          // call the captcha.reloadImage()
          // in order to generate a new captcha challenge
          captcha.reloadImage();
        } else {
          // captcha validation succeeded; proceed with the workflow
          $window.location.href = '#/basic-success-notify';
        }
      }, function (error) {
        console.log(error.data);
      });
  };

});

[back to the top of angularjs & legacy asp.net web-api 2 backend section]

[back to top of page]

Backend: web.config

The web.config source file does the following:

  • Registers the simple-captcha-endpoint.ashx path
  • Maps it to the BotDetect.Web.SimpleCaptchaHandler
<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <appSettings></appSettings>
  <system.web>
    <compilation debug="false" targetFramework="4.5"/>
    <httpRuntime targetFramework="4.5"/>
    <httpHandlers>
      <!-- Register the HttpHandler used for BotDetect Captcha requests -->
      <add verb="GET" path="simple-captcha-endpoint.ashx" 
	   type="BotDetect.Web.SimpleCaptchaHandler, BotDetect"/>
    </httpHandlers>
  </system.web>
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false"/>
    <handlers>
      <!-- Register the HttpHandler used for BotDetect Captcha requests (IIS 7.0+) -->
      <remove name="BotDetectCaptchaHandler"/>
      <add name="BotDetectCaptchaHandler" preCondition="integratedMode" 
	   verb="GET" path="simple-captcha-endpoint.ashx"
	   type="BotDetect.Web.SimpleCaptchaHandler, BotDetect"/>
    </handlers>
  </system.webServer>
</configuration>

[back to the top of angularjs & legacy asp.net web-api 2 backend section]

[back to top of page]

Backend: botdetect.xml

The botdetect.xml source file contains the following:

  • Captcha style definitions consisting of:
    • The name of a captcha style
    • The ID of an <input> element in which user enters captcha codes
    • Other option settings -- the captcha code length in this particular case
<?xml version="1.0" encoding="UTF-8"?>
<botdetect xmlns="https://captcha.com/schema/net"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="https://captcha.com/schema/net
            https://captcha.com/schema/net/botdetect-4.4.2.xsd">

    <captchaStyles>
        <captchaStyle>
            <name>angularBasicCaptcha</name>
            <userInputID>userCaptchaInput</userInputID>
            <codeLength>3-5</codeLength>
        </captchaStyle>
    </captchaStyles>
</botdetect>

[back to the top of angularjs & legacy asp.net web-api 2 backend section]

[back to top of page]

Backend: WebApiController.cs

The Backend/Controllers/WebApiController.cs source file does the following:

  • Extracts the userEnteredCaptchaCode and captchaId values posted from the frontend
  • Validates captchas by calling the Validate(userEnteredCaptchaCode, captchaId) method
  • Returns the json-formatted captcha validation results to frontend
using System.Collections.Generic;
using System.Text.RegularExpressions;
using System.Web.Http;

using BotDetect.Web;

namespace AngularJSWebAPICaptchaExampleCSharp.Backend.Controllers
{
    public class WebApiController : ApiController
    {

        // POST api/webapi/basic
        public IHttpActionResult Basic([FromBody]CaptchaBasicModel data)
        {
            // create a captcha instance to be used for the captcha validation
            SimpleCaptcha captcha = new SimpleCaptcha();
            // execute the captcha validation
            bool isHuman = captcha.Validate(data.UserEnteredCaptchaCode, data.CaptchaId);

            // create an object that stores the validation result
            Dictionary<string, bool> validationResult = new Dictionary<string, bool>();

            if (isHuman == false)
            {
                // captcha validation failed
                validationResult.Add("success", false);
                // TODO: consider logging the attempt
            }
            else
            {
                // captcha validation succeeded
                validationResult.Add("success", true);
            }

            // return the json string with the validation result to the frontend
            return Ok(validationResult);
        }
    }
	
    public class CaptchaBasicModel
    {
        [JsonProperty("captchaId")]
        public string CaptchaId { get; set; }

        [JsonProperty("userEnteredCaptchaCode")]
        public string UserEnteredCaptchaCode { get; set; }
    }
	
}

[back to the top of angularjs & legacy asp.net web-api 2 backend section]

[back to top of angularjs section]

[back to top of page]

..............................................................

AngularJS-based Frontend and the Legacy ASP.NET Generic Handler on Backend

This is a partial walk-through of the example source code. It is not meant to replace a proper step-by-step guide. If you are new to BotDetect, skip it for now; and do start your first AngularJS captcha integration by following our step-by-step AngularJS CAPTCHA Integration Guide.

Introduction

This AngularJS captcha example shows the minimal code required to display and validate captchas in an application with an AngularJS frontend and a legacy ASP.NET Generic Handler backend.

Download the BotDetect ASP.NET CAPTCHA Component and run this example

Within this page, the root folder of the extracted archive is referred as the <BDC-DIR>.

This example is in the <BDC-DIR>/lgcy-on-lgcy/examples/s_api-captcha-angularjs-generic_handler/csharp/ folder; and contains the following files:

Frontend: index.html

The index.html source file does the following:

  • Loads the BotDetect CAPTCHA AngularJS Module into the page
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>BotDetect AngularJS CAPTCHA Examples</title>
  <link href="styles/styles.css" type="text/css" rel="stylesheet">
</head>
<body>
  <header>
    <div class="header-content"><h1>BotDetect AngularJS CAPTCHA Examples</h1></div>
  </header>

  <nav ng-controller="NavigationController">
    <ul class="nav">
      <li><a href="#/basic" ng-class="{ active: isActive('/basic')}">Basic Example</a></li>
        <li><a href="#/contact" ng-class="{ active: isActive('/contact')}">Contact Example</a></li>
    </ul>
  </nav>

  <section id="main-content">
    <ng-view></ng-view>
  </section>

  
  <script src="node_modules/angularjs/angular.min.js"></script>
  <script src="node_modules/angularjs/angular-route.min.js"></script>

  <script src="node_modules/angularjs-captcha/dist/angularjs-captcha.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

[back to the top of angularjs & legacy asp.net generic handler backend section]

[back to top of page]

Frontend: basic-captcha.html

The templates/basic/basic-captcha.html source file does the following:

  • Displays the captcha and user-input markups on the page
<form name="basicForm" novalidate ng-controller="BasicController" ng-submit="validate(basicForm.$valid)">

  <div class="alert alert-error" ng-show="errorMessages">
    {{ errorMessages }}
  </div>

  <!-- captcha challenge: placeholder -->
  <botdetect-captcha captchaStyleName="angularBasicCaptcha"></botdetect-captcha>

  <label>
    <span>Retype the characters from the picture:</span>
    <!-- captcha code: user-input textbox -->
    <input type="text" 
        name="userCaptchaInput"
        id="userCaptchaInput"
        ng-model="userCaptchaInput"  
    >
  </label>

  <button type="submit">Validate</button>
</form>

[back to the top of angularjs & legacy asp.net generic handler backend section]

[back to top of page]

Frontend: app.js

The app.js source file does the following:

  • Loads the captcha challenges from backend
  • Sends the post request with the captcha id and the user entered captcha code to backend
  • Processes the captcha validation results:
    • when the captcha validation fails -- it reloads captcha and displays an error message
    • when the captcha validation succeeds -- it executes by the captcha protected action
var app = angular.module('app', ['BotDetectCaptcha', 'ngRoute']);

app.config(function ($routeProvider, captchaSettingsProvider) {
  $routeProvider
    .when('/basic', { templateUrl: 'templates/basic/basic-captcha.html' })
    .when('/contact', { templateUrl: 'templates/contact/contact-captcha.html' })
    .when('/basic-success-notify', { templateUrl: 'templates/notify/basic-success-notify.html' })
    .when('/contact-success-notify', { templateUrl: 'templates/notify/contact-success-notify.html' })
    .otherwise({ redirectTo: '/basic' });

  // set the captchaEndpoint property to point to 
  // the captcha endpoint path on your app's backend
  captchaSettingsProvider.setSettings({
    captchaEndpoint: 'simple-captcha-endpoint.ashx'
  });
});

app.controller('BasicController', function ($scope, $http, $window, Captcha) {

  // validation messages
  $scope.errorMessages = '';

  // 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 backend
    $http({
      method: 'POST',
      url: 'BasicHandler.ashx',
      data: JSON.stringify(postData)
    })
      .then(function (response) {
        if (response.data.success == false) {
          // captcha validation failed; show the error message
          $scope.errorMessages = 'CAPTCHA validation failed!';
          // call the captcha.reloadImage()
          // in order to generate a new captcha challenge
          captcha.reloadImage();
        } else {
          // captcha validation succeeded; proceed with the workflow
          $window.location.href = '#/basic-success-notify';
        }
      }, function (error) {
        console.log(error.data);
      });
  };

});

[back to the top of angularjs & legacy asp.net generic handler backend section]

[back to top of page]

Backend: web.config

The web.config source file does the following:

  • Registers the simple-captcha-endpoint.ashx path
  • Maps it to the BotDetect.Web.SimpleCaptchaHandler
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.5"/>
    <httpRuntime targetFramework="4.5"/>
    <httpHandlers>
      <!-- Register the HttpHandler used for BotDetect Captcha requests -->
      <add verb="GET" path="simple-captcha-endpoint.ashx"
           type="BotDetect.Web.SimpleCaptchaHandler, BotDetect"/>
    </httpHandlers>
  </system.web>
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <handlers>
      <!-- Register the HttpHandler used for BotDetect Captcha requests (IIS 7.0+) -->
      <remove name="BotDetectCaptchaHandler"/>
      <add name="BotDetectCaptchaHandler" preCondition="integratedMode"
           verb="GET" path="simple-captcha-endpoint.ashx"
           type="BotDetect.Web.SimpleCaptchaHandler, BotDetect"/>
    </handlers>
  </system.webServer>
</configuration>

[back to the top of angularjs & legacy asp.net generic handler backend section]

[back to top of page]

Backend: botdetect.xml

The botdetect.xml source file contains the following:

  • Captcha style definitions consisting of:
    • The name of a captcha style
    • The ID of an <input> element in which user enters captcha codes
    • Other option settings -- the captcha code length in this particular case
<?xml version="1.0" encoding="UTF-8"?>
<botdetect xmlns="https://captcha.com/schema/net"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="https://captcha.com/schema/net
            https://captcha.com/schema/net/botdetect-4.4.2.xsd">

    <captchaStyles>
        <captchaStyle>
            <name>angularBasicCaptcha</name>
            <userInputID>userCaptchaInput</userInputID>
            <codeLength>3-5</codeLength>
        </captchaStyle>
    </captchaStyles>
</botdetect>

[back to the top of angularjs & legacy asp.net generic handler backend section]

[back to top of page]

Backend: BasicHandler.ashx

The BasicHandler.ashx source file does the following:

  • Extracts the userEnteredCaptchaCode and captchaId values posted from the frontend
  • Validates captchas by calling the Validate(userEnteredCaptchaCode, captchaId) method
  • Returns the json-formatted captcha validation results to frontend
<%@ WebHandler Language="C#" Class="BasicHandler" %>

using System;
using System.Web;
using System.IO;
using Newtonsoft.Json;
using System.Collections.Generic;

using BotDetect.Web;

public class BasicHandler : IHttpHandler
{
    public void ProcessRequest (HttpContext context)
    {
        if (HttpContext.Current.Request.HttpMethod == "POST")
        {
            string dataJson = new StreamReader(context.Request.InputStream).ReadToEnd();

            Dictionary<string, string> formDataObj = new Dictionary<string, string>();
            formDataObj = JsonConvert.DeserializeObject<Dictionary<string, string>>(dataJson);

            string userEnteredCaptchaCode = formDataObj["userEnteredCaptchaCode"];
            string captchaId = formDataObj["captchaId"];

            // create a captcha instance to be used for the captcha validation
            SimpleCaptcha captcha = new SimpleCaptcha();
            // execute the captcha validation
            bool isHuman = captcha.Validate(userEnteredCaptchaCode, captchaId);
           
            // create an object that stores the validation result
            Dictionary<string, bool> validationResult = new Dictionary<string, bool>();

            if (isHuman == false)
            {
                // captcha validation failed
                validationResult.Add("success", false);
            }
            else
            {
                // captcha validation succeeded
                validationResult.Add("success", true);
            }

            // return the json string with the validation result to the frontend
            context.Response.ContentType = "application/json; charset=utf-8";
            context.Response.Write(JsonConvert.SerializeObject(validationResult));
        }
        else
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("Only HTTP POST requests are allowed.");
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

[back to the top of angularjs & legacy asp.net generic handler backend section]

[back to top of angularjs section]

[back to top of page]

..............................................................

AngularJS-based Frontend and Java Servlet on Backend

This is a partial walk-through of the example source code. It is not meant to replace a proper step-by-step guide. If you are new to BotDetect, skip it for now; and do start your first AngularJS captcha integration by following our step-by-step AngularJS CAPTCHA Integration Guide.

Introduction

This AngularJS captcha example shows the minimal code required to display and validate captchas in an application with an AngularJS frontend and a Java Servlet backend.

Download the BotDetect Java CAPTCHA Library archive and run this example

Within this page, the root folder of the extracted archive is referred as the <BDC-DIR>.

This example is in the <BDC-DIR>/examples/s_api-captcha-angularjs-servlet/ folder; and contains the following files:

Frontend: index.html

The src/main/webapp/index.html source file does the following:

  • Loads the BotDetect CAPTCHA AngularJS Module into the page
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>BotDetect AngularJS CAPTCHA Examples</title>
  <link href="styles/styles.css" type="text/css" rel="stylesheet">
</head>
<body>
  <header>
    <div class="header-content"><h1>BotDetect AngularJS CAPTCHA Examples</h1></div>
  </header>

  <nav ng-controller="NavigationController">
    <ul class="nav">
      <li><a href="#/basic" ng-class="{ active: isActive('/basic')}">Basic Example</a></li>
        <li><a href="#/contact" ng-class="{ active: isActive('/contact')}">Contact Example</a></li>
    </ul>
  </nav>

  <section id="main-content">
    <ng-view></ng-view>
  </section>

  
  <script src="node_modules/angularjs/angular.min.js"></script>
  <script src="node_modules/angularjs/angular-route.min.js"></script>

  <script src="node_modules/angularjs-captcha/dist/angularjs-captcha.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

[back to the top of angularjs & java servlet backend section]

[back to top of page]

Frontend: basic-captcha.html

The src/main/webapp/templates/basic/basic-captcha.html source file does the following:

  • Displays the captcha and user-input markups on the page
<form name="basicForm" novalidate ng-controller="BasicController" ng-submit="validate(basicForm.$valid)">

  <div class="alert alert-error" ng-show="errorMessages">
    {{ errorMessages }}
  </div>

  <!-- captcha challenge: placeholder -->
  <botdetect-captcha captchaStyleName="angularBasicCaptcha"></botdetect-captcha>

  <label>
    <span>Retype the characters from the picture:</span>
    <!-- captcha code: user-input textbox -->
    <input type="text" 
        name="userCaptchaInput"
        id="userCaptchaInput"
        ng-model="userCaptchaInput"  
    >
  </label>

  <button type="submit">Validate</button>
</form>

[back to the top of angularjs & java servlet backend section]

[back to top of page]

Frontend: app.js

The src/main/webapp/app.js source file does the following:

  • Loads the captcha challenges from backend
  • Sends the post request with the captcha id and the user entered captcha code to backend
  • Processes the captcha validation results:
    • when the captcha validation fails -- it reloads captcha and displays an error message
    • when the captcha validation succeeds -- it executes by the captcha protected action
var app = angular.module('app', ['BotDetectCaptcha', 'ngRoute']);

app.config(function ($routeProvider, captchaSettingsProvider) {
  $routeProvider
    .when('/basic', { templateUrl: 'templates/basic/basic-captcha.html' })
    .when('/contact', { templateUrl: 'templates/contact/contact-captcha.html' })
    .when('/basic-success-notify', { templateUrl: 'templates/notify/basic-success-notify.html' })
    .when('/contact-success-notify', { templateUrl: 'templates/notify/contact-success-notify.html' })
    .otherwise({ redirectTo: '/basic' });

  // set the captchaEndpoint property to point to 
  // the captcha endpoint path on your app's backend
  captchaSettingsProvider.setSettings({
    captchaEndpoint: 'simple-captcha-endpoint'
  });
});

app.controller('BasicController', function ($scope, $http, $window, Captcha) {

  // validation messages
  $scope.errorMessages = '';

  // 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 backend
    $http({
      method: 'POST',
      url: 'basic-captcha',
      data: JSON.stringify(postData)
    })
      .then(function (response) {
        if (response.data.success == false) {
          // captcha validation failed; show the error message
          $scope.errorMessages = 'CAPTCHA validation failed!';
          // call the captcha.reloadImage()
          // in order to generate a new captcha challenge
          captcha.reloadImage();
        } else {
          // captcha validation succeeded; proceed with the workflow
          $window.location.href = '#/basic-success-notify';
        }
      }, function (error) {
        console.log(error.data);
      });
  };

});

[back to the top of angularjs & java servlet backend section]

[back to top of page]

Backend: web.xml

The src/main/webapp/WEB-INF/web.xml source file does the following:

  • Registers the simple-captcha-endpoint path
  • Maps it to the com.captcha.botdetect.web.servlet.SimpleCaptchaServlet
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee                 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <servlet>
        <servlet-name>BotDetect Captcha</servlet-name>
        <servlet-class>com.captcha.botdetect.web.servlet.SimpleCaptchaServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>BotDetect Captcha</servlet-name>
        <url-pattern>/simple-captcha-endpoint</url-pattern>
    </servlet-mapping>
    <servlet>
        <servlet-name>Basic Captcha</servlet-name>
        <servlet-class>com.captcha.botdetect.examples.angularjs.basic_form.BasicServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>Basic Captcha</servlet-name>
        <url-pattern>/basic-captcha</url-pattern>
    </servlet-mapping>
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
</web-app>

[back to the top of angularjs & java servlet backend section]

[back to top of page]

Backend: botdetect.xml

The src/main/webapp/WEB-INF/botdetect.xml source file contains the following:

  • Captcha style definitions consisting of:
    • The name of a captcha style
    • The ID of an <input> element in which user enters captcha codes
    • Other option settings -- the captcha code length in this particular case
<?xml version="1.0" encoding="UTF-8"?>
<botdetect xmlns="https://captcha.com/schema/java" 
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="https://captcha.com/schema/java 
            https://captcha.com/schema/java/botdetect-4.0.beta3.7.xsd">

    <captchaStyles>
        <captchaStyle>
            <name>angularBasicCaptcha</name>
            <userInputID>userCaptchaInput</userInputID>
            <codeLength>3-5</codeLength>
        </captchaStyle>
    </captchaStyles>
</botdetect>

[back to the top of angularjs & java servlet backend section]

[back to top of page]

Backend: BasicServlet.java

The src/main/java/com/captcha/botdetect/examples/angularjs/basic_form/
BasicServlet.java source file does the following:

  • Extracts the userEnteredCaptchaCode and captchaId values posted from the frontend
  • Validates captchas by calling the validate(userEnteredCaptchaCode, captchaId) method
  • Returns the json-formatted captcha validation results to frontend
package com.captcha.botdetect.examples.angularjs.basic_form;

import com.captcha.botdetect.web.servlet.SimpleCaptcha;
import com.google.gson.Gson;
import com.google.gson.JsonObject;
import com.google.gson.JsonParser;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class BasicServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
       
        PrintWriter out = response.getWriter();
        Gson gson = new Gson();
        
        response.setContentType("application/json; charset=utf-8");
        
        JsonParser parser = new JsonParser();
        JsonObject formDataObj = (JsonObject) parser.parse(request.getReader());
        
        String userEnteredCaptchaCode = formDataObj.get("userEnteredCaptchaCode").getAsString();
        String captchaId = formDataObj.get("captchaId").getAsString();
        
        // create a captcha instance to be used for the captcha validation
        SimpleCaptcha captcha = SimpleCaptcha.load(request);
        // execute the captcha validation
        boolean isHuman = captcha.validate(userEnteredCaptchaCode, captchaId);
        
        // create an object that stores the validation result
        BasicValidationResult validationResult = new BasicValidationResult();
        
        if (isHuman == false) {
            // captcha validation failed
            validationResult.setSuccess(false);
            // TODO: consider logging the attempt
        } else {
            // captcha validation succeeded
            validationResult.setSuccess(true);
        }
        
        try {
            // return the json string with the validation result to the frontend
            out.write(gson.toJson(validationResult));
        } catch(Exception ex) {
            out.write(ex.getMessage());
        } finally {
            out.close();
        }
    }
}

class BasicValidationResult {

    private boolean success;

    public BasicValidationResult() {
    }

    public boolean getSuccess() {
        return success;
    }

    public void setSuccess(boolean success) {
        this.success = success;
    }
}

[back to the top of angularjs & java servlet backend section]

[back to top of angularjs section]

[back to top of page]

..............................................................

AngularJS-based Frontend and the plain PHP on Backend

This is a partial walk-through of the example source code. It is not meant to replace a proper step-by-step guide. If you are new to BotDetect, skip it for now; and do start your first AngularJS captcha integration by following our step-by-step AngularJS CAPTCHA Integration Guide.

Introduction

This AngularJS captcha example shows the minimal code required to display and validate captchas in an application with an AngularJS frontend and the plain PHP backend.

Download the BotDetect PHP CAPTCHA Library archive and run this example

Within this page, the root folder of the extracted archive is referred as the <BDC-DIR>.

This example is in the <BDC-DIR>/examples/s_api-captcha-angularjs-plainphp/ folder; and contains the following files:

Frontend: index.html

The index.html source file does the following:

  • Loads the BotDetect CAPTCHA AngularJS Module into the page
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>BotDetect AngularJS CAPTCHA Examples</title>
  <link href="styles/styles.css" type="text/css" rel="stylesheet">
</head>
<body>
  <header>
    <div class="header-content"><h1>BotDetect AngularJS CAPTCHA Examples</h1></div>
  </header>

  <nav ng-controller="NavigationController">
    <ul class="nav">
      <li><a href="#/basic" ng-class="{ active: isActive('/basic')}">Basic Example</a></li>
        <li><a href="#/contact" ng-class="{ active: isActive('/contact')}">Contact Example</a></li>
    </ul>
  </nav>

  <section id="main-content">
    <ng-view></ng-view>
  </section>

  
  <script src="node_modules/angularjs/angular.min.js"></script>
  <script src="node_modules/angularjs/angular-route.min.js"></script>

  <script src="node_modules/angularjs-captcha/dist/angularjs-captcha.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

[back to the top of angularjs & plain php backend section]

[back to top of page]

Frontend: basic-captcha.html

The templates/basic/basic-captcha.html source file contains the following:

  • Displays the captcha and user-input markups on the page
<form name="basicForm" novalidate ng-controller="BasicController" ng-submit="validate(basicForm.$valid)">

  <div class="alert alert-error" ng-show="errorMessages">
    {{ errorMessages }}
  </div>

  <!-- captcha challenge: placeholder -->
  <botdetect-captcha captchaStyleName="angularBasicCaptcha"></botdetect-captcha>

  <label>
    <span>Retype the characters from the picture:</span>
    <!-- captcha code: user-input textbox -->
    <input type="text" 
        name="userCaptchaInput"
        id="userCaptchaInput"
        ng-model="userCaptchaInput"  
    >
  </label>

  <button type="submit">Validate</button>
</form>

[back to the top of angularjs & plain php backend section]

[back to top of page]

Frontend: app.js

The app.js source file does the following:

  • Loads the captcha challenges from backend
  • Sends the post request with the captcha id and the user entered captcha code to backend
  • Processes the captcha validation results:
    • when the captcha validation fails -- it reloads captcha and displays an error message
    • when the captcha validation succeeds -- it executes by the captcha protected action
var app = angular.module('app', ['BotDetectCaptcha', 'ngRoute']);

app.config(function ($routeProvider, captchaSettingsProvider) {
  $routeProvider
    .when('/basic', { templateUrl: 'templates/basic/basic-captcha.html' })
    .when('/contact', { templateUrl: 'templates/contact/contact-captcha.html' })
    .when('/basic-success-notify', { templateUrl: 'templates/notify/basic-success-notify.html' })
    .when('/contact-success-notify', { templateUrl: 'templates/notify/contact-success-notify.html' })
    .otherwise({ redirectTo: '/basic' });

  // set the captchaEndpoint property to point to 
  // the captcha endpoint path on your app's backend
  captchaSettingsProvider.setSettings({
    captchaEndpoint: 'botdetect-captcha-lib/simple-botdetect.php'
  });
});

app.controller('BasicController', function ($scope, $http, $window, Captcha) {

  // validation messages
  $scope.errorMessages = '';

  // 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 backend
    $http({
      method: 'POST',
      url: 'basic.php',
      data: postData
    })
      .then(function (response) {
        if (response.data.success == false) {
          // captcha validation failed; show the error message
          $scope.errorMessages = 'CAPTCHA validation failed!';
          // call the captcha.reloadImage()
          // in order to generate a new captcha challenge
          captcha.reloadImage();
        } else {
          // captcha validation succeeded; proceed with the workflow
          $window.location.href = '#/basic-success-notify';
        }
      }, function (error) {
        console.log(error.data);
      });
  };

});

[back to the top of angularjs & plain php backend section]

[back to top of page]

Backend: botdetect.xml

The botdetect-captcha-lib/config/botdetect.xml source file contains the following:

  • Captcha style definitions consisting of:
    • The name of a captcha style
    • The ID of an <input> element in which user enters captcha codes
    • Other option settings -- the captcha code length in this particular case
<?xml version="1.0" encoding="UTF-8"?>
<botdetect xmlns="https://captcha.com/schema/php"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="https://captcha.com/schema/php
            https://captcha.com/schema/php/botdetect-4.2.5.xsd">

  <captchaStyles>
    <captchaStyle>
      <name>angularBasicCaptcha</name>
      <userInputID>userCaptchaInput</userInputID>
      <codeLength>3-5</codeLength>
    </captchaStyle>
  </captchaStyles>
</botdetect>

[back to the top of angularjs & plain php backend section]

[back to top of page]

Backend: basic.php

The basic.php source file does the following:

  • Extracts the $userEnteredCaptchaCode and $captchaId values posted from the frontend
  • Validates captchas by calling the Validate($userEnteredCaptchaCode, $captchaId) method
  • Returns the json-formatted captcha validation results to frontend
<?php header('Content-Type: application/json');

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

  require('botdetect-captcha-lib/simple-botdetect.php');

  $postedData = (array) json_decode(file_get_contents('php://input'), true);

  $userEnteredCaptchaCode = $postedData['userEnteredCaptchaCode'];
  $captchaId = $postedData['captchaId'];

  // create a captcha instance to be used for the captcha validation
  $captcha = new SimpleCaptcha();
  // execute the captcha validation
  $isHuman = $captcha->Validate($userEnteredCaptchaCode, $captchaId);

  if ($isHuman == false) {
    // captcha validation failed
    $result = array('success' => false);
    // TODO: consider logging the attempt
  } else {
    // captcha validation succeeded
    $result = array('success' => true);
  }

  // return the json string with the validation result to the frontend
  echo json_encode($result); exit;
}

[back to the top of angularjs & plain php backend section]

[back to top of angularjs section]

[back to top of page]

Please Note

The new experimental Simple API is still work-in-progress. This Integration Guide & Examples require you to have the Angular Captcha Module v3.7.4 or AngularJS Captcha Module v1.6.1 on frontend, and one of the following BotDetect CAPTCHA releases on backend: ASP.NET v4.4.2+, Java v4.0.Beta3.7+, PHP v4.2.5+.

Current BotDetect Versions

Popular Content

© Captcha, Inc. 2004-2023. All rights reserved.

BotDetect, BotDetect CAPTCHA, Lanap, Lanap CAPTCHA, Lanap BotDetect, Lanap BotDetect CAPTCHA, Lanapsoft, Lanapsoft CAPTCHA, Lanapsoft BotDetect, Lanapsoft BotDetect CAPTCHA, and Lanap Software are trademarks of Captcha, Inc. All other product, brand, and company names are mentioned for identification purposes only and are trademarks or registered trademarks of their respective owners.

Captcha, Inc. -- formerly: Lanapsoft, Inc. / Lanap, Inc.