Kirby reCaptcha

https://github.com/jenstornell/kirby-recaptcha

Kirby reCaptcha

Validate Google reCaptcha and do something with a PHP and a javascript callback. Some basic coding skills required.

Install

Kirby CLI

Run this command:

kirby plugin:install jenstornell/kirby-recaptcha

Manually

Add the folder kirby-recaptcha into /site/plugins/.

Setup

1. Register reCaptcha

Go to recaptcha and register the domain you want to use.

2. Setup config

You need to add secret and sitekey to your config.

c::set('plugin.recaptcha.secret', 'your-secret');
c::set('plugin.recaptcha.sitekey', 'your-sitekey');

3. Add javascript files

Add this to your footer.php snippet:

<?php
	echo js('/assets/plugins/kirby-recaptcha/js/script.js');
	echo js('https://www.google.com/recaptcha/api.js?hl=sv');
?>

It should be placed just before </body>.

  1. The first file is a setup for this Kirby plugin.
  2. The second file is a setup from Google.

The sv language code can be changed to your language.

Usage

1. Add a html form

Make sure it uses method that is post.

<form class="my-form" action="" method="post">
	<label for="name">Name:</label>
	<input name="name">

	<div class="g-recaptcha" data-sitekey="<?php echo c::get('plugin.recaptcha.sitekey'); ?>"></div>

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

2. Add your PHP callback as a plugin

Add a PHP callback into a plugin.

The PHP callback will make you do something when the captcha is successful. You have access to $post and $response.

function recaptchaCallback( $post, $response) {
	print_r( $post );
	print_r( $response );

	if( $post['g-recaptcha-selector'] == '.my-form') {
		if( $response['success'] ) {
			$array = array(
				'success' => true,
			);
		} else {
			$array = array(
				'success' => false,
				'message' => 'Failed!'
			);
		}
		return json_encode($array);
	}
}
  • The function name has to be recaptchaCallback.
  • In the $post the selector is included as well, called g-recaptcha-selector.
  • It should be placed just before </body>.

3. Add your javascript callback

This script is to run the reCaptcha.

<script>
document.addEventListener("DOMContentLoaded", function() {
	recaptcha.init({
		url: '<?php echo u(); ?>',
		selector: '.my-form',
		callback: function(xhr) {
			console.log(xhr);
		}
	});
});
</script>

Url

To make the javascript know about the route you need to send the root url.

Selector

Your selector to the html form like above is .my-form.

Callback

The callback can be used to get the xhr object. From that you can see if the captcha was successful or not.

Requirements

  • Kirby 2.3
  • Google Account

License

  • Kirby reCaptcha - MIT
  • Google Recaptcha - BSD
3 Likes

Version 0.2 is here:

0.2

  • Added namespaces
  • Making it easier and more correct than before
  • Code enhancements
3 Likes

Looks like this doesn’t exist anymore…

It seems that reCaptcha is no longer alive in Kirby. For a new web site, I want to implement a simple and still supported Captcha solution for a contact form in Kirby. As this thread is showing up on top in google search results, maybe some of the experienced users could point to some advisable solutions?
I think, this could help also other Kirby users.
Personally, I would be interested for the reasons behind the discontinuation.

Regards,
Bogi