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

• Using validateUnsafe(callback) method to validate Captcha code on form submit:

...
import { Captcha } from 'reactjs-captcha';

class Example extends React.Component {

  constructor(props) {
    super(props);
  }
  
  // On form submit.
  formSubmit(event) {
    
    this.captcha.validateUnsafe(function(isCaptchaCodeCorrect) {

      if (isCaptchaCodeCorrect) {
        // Captcha code is correct
      } else {
        // Captcha code is incorrect
      }

    });

    event.preventDefault();
  }

  render() {
    ...
  }
}

export default Example;

OR

• Using data-correct-captcha directive attribute to validate Captcha code on blur event:

<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:

These client-side captcha validations are just an UI usability improvement that you may use or not -- they do not protect your form from spammers at all.

As you are protecting some server-side action you must validate a Captcha at the server-side before executing that protected action.

• 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.