CaptchaMaker Installation Guide
Step 1: Front End
Step 2: Server Side
Step 1: Front-End Installation
CaptchaMaker is a premium Captcha tool that allows you to build and customize Captchas that match the look, feel, and branding of your website better than third-party captchas like reCAPTCHA. CaptchaMaker is meant for web developers, companies, and others who want to integrate branded captchas with their website. Once you have designed your own custom captcha with the CaptchaMaker Tool, you will receive the public and private keys needed to install your captcha by following these instructions.
HTML:
Place this code snippet inside your <form> tag, where you would like your Captcha image and input box to appear. Put the public key you were emailed when you created your captcha in the data-pubkey attribute.
<div class="captchamaker_wrapper" data-pubkey="pub_xxxxxxxxxxxxxxxx"></div>
JavaScript:
You must load the CaptchaMaker JavaScript API by placing this script tag before the closing </head> tag on your HTML template.
<script src="//www.captchamaker.com/js/captcha-api.js"></script>
JavaScript API:
The JavaScript library will create an instance of a captchamaker object, which is automatically initialized on pageload. You can trigger a new captcha to be generated by calling captchamaker.reload() (which is handy for ajax-powered applications).
Link To Us:
Do you like CaptchaMaker? Help us out by linking back to us from your form page!
<a href="http://www.captchamaker.com/">Captcha provided by Captchamaker.com</a>
Result: If you installed the JavaScript library and HTML snippet correctly, your custom designed captcha will appear on the page like this.
Customization:
While all changes to the captcha image itself must be made with the CaptchaMaker Tool, you can add your own custom styles to CaptchaMaker front-end to make it better fit with your existing form styles by resizing the image, moving the input form, etc. Use the following reference of CSS classes as a guide for applying your own styles.
| CSS Class | Element Description |
|---|---|
| .captchamaker_wrapper | <div> wrapper surrounding the Captcha image, buttons, and input field |
| .captchamaker_captcha | captcha image tag, can be rescaled as needed |
| .captchamaker_inputcontainer | <div> wrapper surrounding the Captcha input field and buttons |
| .captchamaker_reload, .captchamaker_playsound | function button classes |
| .captchamaker_input | <input> text field for the Captcha token value. Form field name is token. |
Step 2: Server-Side Installation
Your next step is to install the necessary validation code in your form's backend handler to verify that the user entered the correct Captcha value. To do this, you will send the user-provided value of the token field and your private key to the www.captchamaker.com/captcha/check.php, and validate the status that we return.
API Request:
URL: https://www.captchamaker.com/captcha/check.php
METHOD: GET / POST
| GET / POST Parameter | Description |
|---|---|
| token | Required. User's response to the Captcha challenge, posted to your form in the token field |
| pri_key | Required. Your private key, which looks like pri_xxxxxxxxxxxxxxxx. Provided on Captcha creation. |
| api_key | Optional. Your API key, which looks like api_xxxxxxxxxxxxxxxx. If you do not include an API key, your Captcha will eventually be deactivated. You will get a permenant API key immediately when you purchase a license. |
API Response:
The API will return a JSON object containing the status of the Captcha challenge and, if the status is fail, an error-code and a reason describing why the captcha challenge failed.
Array
(
[status] => success|fail
[error-code] => error code // only returned if status=fail
[reason] => error description // only returned if status=fail
)
API Error Code Reference:
| error-code | reason |
|---|---|
| INVALID_KEY | Invalid private key. |
| NO_KEY | No private key specified. |
| TRIAL_ENDED | Trial period exceeded. Please purchase an API key at https://www.captchamaker.com/buy |
| WRONG_TOKEN | Captcha response was entered incorrectly, previously used, or expired. |
Sample PHP Implementation:
This is an example PHP script that can be used to validate a CaptchMaker captcha. The user's captcha answer is sent via GET request (POSTs also work) to our form handler in the $_POST['token'] variable, and validated based on your private key. You must also pass your CaptchaMaker API Key in here once your trial period has expired.
<?php
/* Process form protected by CaptchaMaker */
$TOKEN = $_POST['token']; // Replace with the user's Captcha Response.
$PRIVATE_KEY = "pri_xxxxxxxxxxxxxxxx"; // Replace with your Private Key.
$API_KEY = "api_xxxxxxxxxxxxxxxx"; // Replace with your API Key (https://www.captchamaker.com/buy).
// During the trial period, set $API_KEY = "";
/* Build the Captch Check URL */
$checkUrl = "https://www.captchamaker.com/captcha/check.php?pri_key={$PRIVATE_KEY}&token={$TOKEN}";
if ( isset($API_KEY) && !empty($API_KEY) )
$checkUrl .= "&api_key={$API_KEY}";
/* Get json response from CaptchaMaker's server */
$response = (array)json_decode(file_get_contents($checkUrl));
/* Validate Captcha */
if ( $response['status'] !== "success" ) {
// The captcha was entered incorrectly.
// Uncomment the following line to debug issues.
// var_dump( $response );
print ("FAILED");
} else {
// Captcha Code was entered correctly.
// Finish processing form.
print ("SUCCESS");
// ...
}
?>