reactjs-captcha

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

Requirements:

BotDetect Captcha React Component requires BotDetect ASP.NET Captcha, BotDetect Java Captcha or BotDetect PHP Captcha library to generate Captcha challenges. Simple API support for ASP.NET Core and .NET Core will be released this month -- very likely during the week of 2018/11/19-25. See our roadmap for details.

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 backend Captcha endpoint:

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

• ASP.NET-based Captcha endpoint:

class Example extends React.Component {

    constructor(props) {
        super(props);

        captchaSettings.set({
            captchaEndpoint: 'captcha-endpoint/BotDetectCaptcha.ashx'
        });
    }

    ...
}

• Java-based Captcha endpoint:

class Example extends React.Component {

    constructor(props) {
        super(props);

        captchaSettings.set({
            captchaEndpoint: 'captcha-endpoint/botdetectcaptcha'
        });
    }

    ...
}

• PHP-based Captcha endpoint:

class Example extends React.Component {

    constructor(props) {
        super(props);

        captchaSettings.set({
            captchaEndpoint: 'captcha-endpoint/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 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 ASP.NET Captcha is performed in the following way:

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

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

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