Google recaptcha V2 on CouchCMS forms


We've created an addon for CouchCMS that creates a new CMS input type for the Google V2 reCaptcha as seen below.

Google reCaptcha

CouchCMS has a Captcha type of its own but it's not as user friendly or simple to use as the new reCaptcha box, which requires just one click from a user to verify themselves as human. Read more about Google reCaptcha V2.

 

REQUIRED: For Google Recaptcha V2 to work, you must obtain a SECRET key and a SITE key from Google

If you aren't familiar with Couch's Input tags within Forms, you should familiarise yourself before reading this post.

 

To Install the Addon, Extract the Recaptcha folder into Couch's 'couch/addons' folder.

 

Locate "Kfunctions.php" inside of the 'couch/addons' folder

NOTE: There may only be a file named 'kfunctions.example.php' in the addon folder. Please rename this file to 'kfunctions.php'.

 

Add the following lines to your 'kfunctions.php' file:

 

PHP

require_once( K_COUCH_DIR.'addons/recaptcha/recaptcha.php' );

define( 'RECAPTCHA_SITE_KEY', 'your_site_key' );

define( 'RECAPTCHA_SECRET_KEY', 'your_secret_key' );

 

Now you may place the new input type anywhere within a CouchCMS form to render the Google reCaptcha box.

HTML

<cms:input type="recaptcha" name="recaptcha" />

 

This new input type has some parameters that allow access to the Google reCaptchas documented parameters such as language changes, changing the theme of the reCaptcha and offering javascript callbacks.

Parameters

errMessage

Optional. The message to show when the reCaptcha does not return successful or is not filled in. This will output with couches 'k_error' list. (See: Couch concept - Forms)


These parameters are all related to reCaptchas parameters and allows for control of them via the couch input tag. Please read Google's documentation.

captcha_type

Optional. Google's Parameter 'data-type'. Default: 'image'

theme

Optional. Google's parameter 'data-theme'. Default: 'light'

onload_callback

Optional. From Google Doc's: "The callback function that gets called when all the dependencies have loaded."

 

If onload_callback parameter is present, the render parameter (See the google docs) will automatically be 'Explicit'. This means you will need to render the reCaptcha widget via the Javascript API.

lang

Optional. Google's language parameter. (See: language codes) for a list of supported languages and codes to use.

callback

Optional. Callback parameter - From Google Docs: "Your callback function that's executed when the user submits a successful CAPTCHA response."

expired_callback

Optional. Expired callback parameter - From Google Docs: "Your callback function that's executed when the recaptcha response expires and the user needs to solve a new CAPTCHA."

tabindex

Optional. Google data-tabindex parameter - From Google Docs: "The tabindex of the widget and challenge. If other elements in your page use tabindex, it should be set to make user navigation easier."

Share this post

No comments.

Leave a comment


You can use the following HTML tags: <a><br><strong><b><em><i><blockquote><pre><code><ul><ol><li><del>