reactjs-captcha

BotDetect Captcha React Component (JavaScript: React 0.13.x/0.14.x/15/16+)

Requirements:

BotDetect Captcha React Component generate Captcha challenges using BotDetect Java or PHP Captcha library on the back end. BotDetect ASP.NET (Core) Captcha backend is not yet supported -- but the support is coming soon.

Quick guide:

1) Installation:

npm install reactjs-captcha --save

2) Importing React Captcha Component into Your Component

import { Captcha, captchaSettings } from 'reactjs-captcha';

3) Setting Captcha Endpoint:

• Java Captcha endpoint:

class Example extends React.Component {

    constructor(props) {
        super(props);

        captchaSettings.set({
            captchaEndpoint: '/botdetect-java-captcha-api-path-at-server-side/botdetectcaptcha'
        });
    }

    ...
}

• PHP Captcha endpoint:

class Example extends React.Component {

    constructor(props) {
        super(props);

        captchaSettings.set({
            captchaEndpoint: '/botdetect-php-captcha-api-path-at-server-side/simple-botdetect.php'
        });
    }

    ...
}

4) Displaying Captcha In Your View

class Example extends React.Component {

    ...

    render() {
        return (
            <Captcha styleName="exampleCaptcha" ref={(captcha) => {this.captcha = captcha}} />
        )
    }

}

5) Client-side Captcha validation

<input 
  type="text" 
  name="captchaCode"
  id="captchaCode"
  data-correct-captcha
>

document.getElementById('captchaCode').addEventListener('validatecaptcha', function (e) {
  let isCorrect = e.detail;
  if (isCorrect) {
    // UI Captcha validation passed
  } else {
    // UI Captcha validation failed
  }
});

6) Server-side Captcha validation:

The client-side Captcha validation is just an usability (but not security) improvement. Captcha's purpose is to protect some action on a server-side, and therefore server-side Captcha validation has to be called just before protected action at a server side is executed.

• Server-side Captcha validation with Java Captcha is performed in the following way:

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

• Server-side Captcha validation with PHP Captcha is performed in the following way:

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

Docs:

React CAPTCHA Integration Guide

Code Examples:

1. Basic React CAPTCHA Example

2. React CAPTCHA Form Example

Dependencies:

Captcha React component uses Captcha library for Captcha image and Captcha sound generation. At the moment challenges are generated in Java backend with BotDetect Java Captcha library and PHP backend with BotDetect PHP Captcha library, but BotDetect ASP.NET is going to work with Captcha React plugin soon as well.

Technical Support:

Through contact form on captcha.com.