Captcha

This page explains how to display and customize the CryptoLoot proof of work widget on your webpage. From a website owner's perspective the CryptoLoot captcha works exactly like a conventional captcha, such as Google's reCaptcha.

The captcha is embeded in an HTML form, runs client side in the user's browser and generates a token. The token is submitted together with the other form data. You can then validate this token on your server through our HTTP API.

Unlike with a conventional captcha however, the user does not have to “proof they're human”. Instead, the captcha is a “proof of work” – making it uneconomic for spammers to game your system.

Image showing the proof of work captcha

Embedding

To embed the CryptoLoot captcha, you have to load the captcha.js anywhere on your page and create a <div> with the CRLT-captcha class where you want to show the captcha.

The text in this <div> (Loading Captcha...) will be replaced by the captcha itself once it's loaded.

Note that the captcha is loaded from a different domain (verifypow.com) to avoid adblockers. This specific domain is only used for token verification.

<form action="?" method="post">
	<!-- other form fields -->

	<script src="https://verifypow.com/lib/captcha.js" async></script>
	<div class="CRLT-captcha" data-hashes="1024" data-key="SITE_KEY">
		<em>Loading Captcha...<br>
		If it doesn't load, please disable Adblock!</em>
	</div>

	<input type="submit" value="Submit"/>
</form>

When the captcha is completed, a field with the name CRLT-captcha-token will be filled with the token name. This field will be submitted with the rest of your form.

On the server side, you verify the received token through our HTTP API with /token/verify.

curl -X POST \
	-d "token=<CRLT-captcha-token>" \
	-d "hashes=1024" \
	-d "secret=<secret-key>" \
	"https://api.crypto-loot.org/token/verify"

# {"success": true, "hashes": 1024}

Note that you have to specify the number of hashes twice: once on the client side for the widget, so it knows when it's done, and once when verifying the token on the server, so the client can't cheat.

Options

You can specify various options as data- attributes with the div element. The data-key and data-hashes attributes are mandatory.

Full example

<form action="?" method="post">
	<!-- other form fields -->

	<script src="https://verifypow.com/lib/captcha.js" async></script>
	<script>
		function myCaptchaCallback(token) {
			alert('Hashes reached. Token is: ' + token);
		}
	</script>
	<div class="CRLT-captcha"
		data-hashes="1024"
		data-key="SITE_KEY"
		data-whitelabel="false"
		data-disable-elements="input[type=submit]"
		data-callback="myCaptchaCallback"
	>
		<em>Loading Captcha...<br>
		If it doesn't load, please disable Adblock!</em>
	</div>

	<!-- submit button will be automatically disabled and later enabled
		again when the captcha is solved -->
	<input type="submit" value="Submit"/>
</form>

Example of Token Verification Using PHP

$post_data = [
	'secret' => "SECRET-KEY", // <- Your secret key
	'token' => $_POST['CRLT-captcha-token'],
	'hashes' => 1024
];

$post_context = stream_context_create([
	'http' => [
		'header'  => "Content-type: application/x-www-form-urlencoded\r\n",
		'method'  => 'POST',
		'content' => http_build_query($post_data)
	]
]);

$url = 'https://api.crypto-loot.org/token/verify';
$response = json_decode(file_get_contents($url, false, $post_context));

if ($response && $response->success) {
	// All good. Token verified!
}

For a detailed explanation of the HTTP API including all possible error codes, please refer to the HTTP API documentation.