Jump to content

reCaptcha V2 for CubeCart 5


bsmither

Recommended Posts

Google's reCaptcha V1 will go dark on 31 March, 2018. Warnings are already showing.

CubeCart 5 is coded to use only reCaptcha V1.

I have developed instructions to re-code CC5 to behave like CC6.1+. That is to say, instructions for:

* CC5 Skins - to display reCaptcha V2 (and maybe reCaptcha Invisible)
* Admin settings to choose V1, V2, or Invisible
* Language strings (definitions.xml only)
* Initial config settings in setup (if wanting to install another CC5 store)
* Hook added
* GUI class has new methods
* Cubecart class to use new GUI methods
* User class to use new GUI methods
* Catalogue class - minor edit
* Controller - minor edit

You will need to acquire your own reCaptcha keys for your domain name.

Note: The latest versions of the CC5 skins in the Marketplace simply adopt the template files from CC6's Foundation - apparently.

Note2: Tested on a personal development site, and a third-party site.

Link to comment
Share on other sites

  • 2 weeks later...

Hi bsmither,

One of my clients is still running with a V5 skin (although the site itself is V6.1.14) so I would be very interested to read your instructions. Can you let me know how to get them?

Thanks!

 

Link to comment
Share on other sites

Editing just the skin is as follows:

config.xml
---------------------------------------

Change the skin->info->version by appending "-reCaptchaV2" to it. For example:
<version>1.0-reCaptchaV2</version>

(Not really necessary for reCaptcha, but do this anyway) After </info>, add:

	<layout>
		<products>
			<perpage amount="6" />
			<perpage default="true" amount="12" />
			<perpage amount="24" />
			<perpage amount="48" />
			<perpage amount="96" />
		</products>
	</layout>
=======================================

main.php
---------------------------------------

Find:

  </head>

On a new blank line above that, add:

  {include file='templates/content.recaptcha.head.php'}



Find:

  {$COPYRIGHT}

On a new blank line above that, add:

  <div style="display: none" id="val_skin_folder">{$SKIN_FOLDER}</div>
  <div style="display: none" id="val_store_url">{$STORE_URL}</div>
  {if !empty($SKIN_COMMON)}<div style="display: none" id="val_skin_common_images">{$SKIN_COMMON}</div>{/if} 
=======================================

content.recaptcha.php
---------------------------------------

Every skin will be somewhat different. For example, existing CC5 versions:

Kurouto (and most other CubeCart CC5 skins):

WAS:

{if $RECAPTCHA}
<fieldset id="recaptcha-title">
  <legend>{$LANG.form.verify_human}</legend>
  <script type="text/javascript">
   var RecaptchaOptions = {
      theme : 'clean'
   };
  </script>
  {$DISPLAY_RECAPTCHA}
</fieldset>
{/if}

NOW:

{if $RECAPTCHA=='1' || $RECAPTCHA=='2'}
<fieldset id="recaptcha-title">
  <legend>{$LANG.form.verify_human}</legend>
  {if $RECAPTCHA=='2'}
    {if empty($CONFIG.recaptcha_public_key) || empty($CONFIG.recaptcha_secret_key)}
  <p>{$LANG.form.recaptcha_key_not_set}</p>
    {else}
  <div class="g-recaptcha" data-sitekey="{$CONFIG.recaptcha_public_key}"></div>
    {/if}
  {else}
  <script type="text/javascript">
  var RecaptchaOptions = {
    theme: 'clean'
  };
  </script>
{$DISPLAY_RECAPTCHA}
  {/if}
</fieldset>
{/if}
---------------------------------------

Blueprint:

WAS:

<script type="text/javascript">
	var RecaptchaOptions = {
		theme: 'custom',
		custom_theme_widget: 'recaptcha_widget'
	};
</script>
{if $RECAPTCHA}
	<div id="recaptcha" class="clearfix">
		<label for="recaptcha_response_field">{$LANG.form.verify_human}</label>
		<div id="recaptcha_widget" style="display:none; float: left;">
			<div id="recaptcha_image"></div>
			<div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>
			<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
			<a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a>
		</div>
		<script type="text/javascript" src="//www.google.com/recaptcha/api/challenge?k={$captcha_public}"></script>
		<noscript>
			<iframe src="//www.google.com/recaptcha/api/noscript?k={$captcha_public}" height="300" width="500" frameborder="0"></iframe><br>
			<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
			<input type="hidden" name="recaptcha_response_field" value="manual_challenge">
		</noscript>
	</div>
{/if}

NOW:

{if $RECAPTCHA=='1' || $RECAPTCHA=='2'}
<div id="recaptcha" class="clearfix">
	<label for="recaptcha_response_field">{$LANG.form.verify_human}</label>
  {if $RECAPTCHA=='2'}
    {if empty($CONFIG.recaptcha_public_key) || empty($CONFIG.recaptcha_secret_key)}
	<p>{$LANG.form.recaptcha_key_not_set}</p>
    {else}
	<div class="g-recaptcha" data-sitekey="{$CONFIG.recaptcha_public_key}"></div>
    {/if}
  {else}
	<script type="text/javascript">
	var RecaptchaOptions = {
		theme: 'custom',
		custom_theme_widget: 'recaptcha_widget'
	};
	</script>
	<div id="recaptcha_widget" style="display:none; float: left;">
		<div id="recaptcha_image"></div>
		<div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>
		<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
		<a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a>
	</div>
{$DISPLAY_RECAPTCHA}
  {/if}
</div>
{/if}
---------------------------------------

Vector:

WAS:

{if $RECAPTCHA}
	<script type="text/javascript">
		{literal}
			var RecaptchaOptions = {
				theme: 'custom',
				custom_theme_widget: 'recaptcha_widget'
			};
		{/literal}
	</script>
	<div class="row-fluid">
		<div id="recaptcha">
			<label for="recaptcha_response_field">{$LANG.form.verify_human}</label>
			<div id="recaptcha_widget">
				<div id="recaptcha_image"></div>
				<div class="input-append">
					{strip}
						<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" class="input-fill" />
						<button type="button" onclick="Recaptcha.reload()" class="btn"><i class="icon-refresh"></i></button>
					{/strip}
				</div>
			</div><!-- /#recaptcha_widget -->
			<script src="//www.google.com/recaptcha/api/challenge?k={$captcha_public}"></script>
			<noscript>
				<iframe src="//www.google.com/recaptcha/api/noscript?k={$captcha_public}" height="300" width="500" frameborder="0"></iframe><br>
				<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
				<input type="hidden" name="recaptcha_response_field" value="manual_challenge">
			</noscript>
		</div><!-- /#recaptcha -->
	</div>
{/if}

NOW:

{if $RECAPTCHA=='1' || $RECAPTCHA=='2'}
  {if $RECAPTCHA=='2'}
	<label for="recaptcha_response_field">{$LANG.form.verify_human}</label>
    {if empty($CONFIG.recaptcha_public_key) || empty($CONFIG.recaptcha_secret_key)}
	<p>{$LANG.form.recaptcha_key_not_set}</p>
    {else}
	<div class="g-recaptcha" data-sitekey="{$CONFIG.recaptcha_public_key}"></div>
    {/if}
  {else}
	<script type="text/javascript">
		{literal}
			var RecaptchaOptions = {
				theme: 'custom',
				custom_theme_widget: 'recaptcha_widget'
			};
		{/literal}
	</script>
	<div class="row-fluid">
		<div id="recaptcha">
			<label for="recaptcha_response_field">{$LANG.form.verify_human}</label>
			<div id="recaptcha_widget">
				<div id="recaptcha_image"></div>
				<div class="input-append">
					{strip}
						<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" class="input-fill" />
						<button type="button" onclick="Recaptcha.reload()" class="btn"><i class="icon-refresh"></i></button>
					{/strip}
				</div>
			</div><!-- /#recaptcha_widget -->
{$DISPLAY_RECAPTCHA}
		</div><!-- /#recaptcha -->
	</div>
  {/if}
{/if}
---------------------------------------


If too difficult to make the changes, try using the latest CubeCart Foundation template.
=======================================
=======================================


New Skin Files:

Create the new template:
content.recaptcha.head.php

Contents:

{if $RECAPTCHA=='2' || $RECAPTCHA=='3'}
<script src="https://www.google.com/recaptcha/api.js"></script>
{/if}
{if $RECAPTCHA=='3'}
<script>
function recaptchaSubmit(token) {
    $('.g-recaptcha').closest("form").submit();
}
</script>
{/if}
=======================================

Create the new template:
element.recaptcha.invisible.php

Contents:

{if $RECAPTCHA=='3'}
 data-sitekey="{$CONFIG.recaptcha_public_key}" data-callback="recaptchaSubmit"
{/if}
=======================================

You may need to have CubeCart clear its skin cache. (Admin, Maintenance, Rebuild tab, Clear Cache)

Link to comment
Share on other sites

  • 1 month later...

@bsmither Hi. I'm in the same boat - what I believe is a V5 skin, Mican, but with the latest CubeCart V6.2.0 and only getting the message "Verify you're a human" with recaptchaV2 turned on and no actual recaptcha displayed.

My question: do all of the above instructions and amendments to files relate to your first point "* CC5 Skins - to display reCaptcha V2 (and maybe reCaptcha Invisible)"?

Thanks.

Link to comment
Share on other sites

Yes. In response to a specific question, the code changes I posted earlier are only that portion of the entire project that relates to making the changes to the CC5 skin. The entire project involves more than what is covered in that specific post.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...