BotDetect CAPTCHA React Component: Simple API integration for React 13/14/15/16+
For a comprehensive step-by-step integration guide please see our React Captcha Component Integration Guide.
The guide covers the integration with the following backends:
- ASP.NET (Core): web API with MVC Core
- ASP.NET (Legacy): Web-API2, MVC1-5, Generic Handler
- Java: Servlet, Spring, Struts
- PHP: the plain PHP
To give you a hint how React Captcha Component works we pasted bellow a few, not necessary up-to-date (and mostly frontend related), excerpts from the Integration Guide.
Quick guide:
1) React Captcha Component Installation:
npm install reactjs-captcha --save
2) Setting Backend Captcha Endpoint
Endpoint configuration depends on which technology you use in the backend.
- ASP.NET-based captcha endpoint:
; Component { superprops; captchaSettings; } ... ;
- Java-based captcha endpoint:
; Component { superprops; captchaSettings; } ... ;
- PHP-based captcha endpoint:
; Component { superprops; captchaSettings; } ... ;
3) Import React Captcha Component and Display Captcha In Your View
; Component ... { return <Captcha captchaStyleName="yourFirstCaptchaStyle" ref= {thiscaptcha = captcha} /> <input id="yourFirstCaptchaUserInput" type="text" /> }
4) Captcha Validation: Client-side Code
// process the yourFormWithCaptcha on submit event { // the user-entered captcha code value to be validated at the backend side let userEnteredCaptchaCode = thiscaptcha; // the id of a captcha instance that the user tried to solve let captchaId = thiscaptcha; let postData = userEnteredCaptchaCode: userEnteredCaptchaCode captchaId: captchaId ; let self = this; // post the captcha data to the /your-app-backend-path on your backend. // make sure you import the axios in this view with: import axios from 'axios'; axios ; event;}
5) Captcha Validation: Server-side Code
The userEnteredCaptchaCode
and captchaId
values posted from the frontend are used to validate a captcha challenge on the backend.
The validation is performed by calling the: Validate(userEnteredCaptchaCode, captchaId)
.
- Server-side captcha validation with ASP.NET Captcha is performed in the following way:
// C#SimpleCaptcha yourFirstCaptcha = new SimpleCaptcha();bool isHuman = yourFirstCaptcha.Validate(userEnteredCaptchaCode, captchaId);
' VB.NETDim yourFirstCaptcha As SimpleCaptcha = New SimpleCaptcha()Dim isHuman As Boolean = yourFirstCaptcha.Validate(userEnteredCaptchaCode, captchaId)
- Server-side captcha validation with Java Captcha is performed in the following way:
SimpleCaptcha yourFirstCaptcha = SimpleCaptcha.;boolean isHuman = yourFirstCaptcha.;
- Server-side captcha validation with PHP Captcha is performed in the following way:
$yourFirstCaptcha = new SimpleCaptcha();$isHuman = $yourFirstCaptcha->Validate($userEnteredCaptchaCode, $captchaId);
Documentation:
-
React Captcha Component Step-by-step Integration Guide -- read this one first
-
React Captcha Component Basic Example -- partial code walk-through
-
React Captcha Component Form Example -- partial code walk-through
Dependencies:
The current version of the React Captcha Component requires one of the following BotDetect CAPTCHA backends:
Technical Support:
Through contact form on captcha.com.