bsmither Posted March 22, 2018 Share Posted March 22, 2018 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. Quote Link to comment Share on other sites More sharing options...
TDLWebs Posted April 6, 2018 Share Posted April 6, 2018 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! Quote Link to comment Share on other sites More sharing options...
bsmither Posted April 6, 2018 Author Share Posted April 6, 2018 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) Quote Link to comment Share on other sites More sharing options...
Daamon Posted May 12, 2018 Share Posted May 12, 2018 @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. Quote Link to comment Share on other sites More sharing options...
havenswift-hosting Posted May 12, 2018 Share Posted May 12, 2018 The latest versions of all CubeCart developed skins have been enhanced to support V2 although they dont support the Invisible method See https://github.com/cubecart/v6/issues/674 Quote Link to comment Share on other sites More sharing options...
bsmither Posted May 12, 2018 Author Share Posted May 12, 2018 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.