update How to integrate reCAPTCHA into KVS default theme

[Tech Support]

In KVS 4.0.2 we added support for using Google reCAPTCHA instead of standard KVS captcha.

Using reCAPTCHA may give you these benefits:

• Better performance: since KVS won't be rendering captcha image anymore, this will reduce load on KVS engine.
• Better security: Google reCAPTCHA is very strong in terms of automation.
• Better user experience: users who are using Google Chrome browser will not be required to solve anything.

NOTE: captcha is not a 100% guarantee of disabling all non-humans from your site. There are spam systems where all captcha are solved in semi-automatic way. Such systems provide a huge amount of cheap workforce (e.g. humans) that are manually solving 1000s of captcha every hour. They can solve absolutely all captcha, so it is just a matter of price for spam bots to beat the captcha you are using.

KVS default theme version 5.3 and above already supports reCAPTCHA. You should go to Google reCAPTCHA admin panel and add a site of reCAPTCHA v2 type:

https://www.google.com/recaptcha/admin#list

From the added site you will then need 2 keys: Site key and Secret key, which you should enter into reCAPTCHA plugin in KVS admin panel:

That's it, KVS should now be using reCAPTCHA.

 

How to enable reCAPTCHA in older theme versions

Old theme versions do not know anything about reCAPTCHA and there is no way to automatically update them. In order to use reCAPTCHA in old themes you should apply massive template changes to all sections where captcha is rendered. This can be a huge set of templates. We recommend that you purchase KVS update service and let our team update your templates with this:

https://www.kernel-video-sharing.com/en/services/#update

If you want to make the changes yourself, please consider the following steps:

 

Step 1. Update theme JS minified code:

https://kvs-demo.com/js/main.min.js

Please note that if your project is using another JS code (custom JS code), it won't be possible for you to use reCAPTHA unless you make sure that your custom JS code can handle it.

Also there is no way to check if somebody did any custom changes in your old minified JS file. This may have happened if you ordered theme customization services from 3rd parties or did theme customizations by yourself. Mind your risk.

 

Step 2. Go to Website UI -> Search in templates section and search for all templates with $lang.urls.captcha text. Default theme version will return up to 14 templates:

 

Step 3. Put the same changes into every template. Search for <div class="image">, which should have similar code to this:

<div class="image">
   <img src="{{$lang.urls.captcha|replace:"%ID%":"logon"}}?rand={{$smarty.now}}" alt="{{$lang.common_forms.field_captcha_image}}"/>
   <label for="login_code" class="field-label required">{{$lang.common_forms.field_captcha}}</label>
   <input type="text" name="code" id="login_code" class="textfield" autocomplete="off"/>
   <div class="field-error up"></div>
</div>

And wrap it with the following:

{{if $recaptcha_site_key!=''}}
   <div data-name="code">
       <div data-recaptcha-key="{{$recaptcha_site_key}}" data-recaptcha-theme="{{if $lang.theme.style=='metal'}}dark{{else}}light{{/if}}"></div>
       <div class="field-error down"></div>
   </div>
{{else}}
   <div class="image">
       ...
   </div>
{{/if}}

NOTE: Please note the ending {{/if}} should not be missed, or you destroy template syntax.

 

Step 4. Go to Website UI -> Page components -> include_footer_general.tpl and add this code after theme JS file include (main.min.js):

{{if $recaptcha_site_key!=''}}
   <script>
       function recaptchaOnLoad() {
           $(document).trigger('recaptchaloaded');
       }
   </script>
   <script src="https://www.google.com/recaptcha/api.js?onload=recaptchaOnLoad&render=explicit"></script>
{{/if}}

 

Step 5. Go to Plugins -> Google reCAPTCHA and try to enable it. If all steps are done correctly, you should be able to see reCAPTCHA working on all forms.

 

NOTE: if you break template syntax when adding template changes, some forms or pages may not be rendered. In this case you can rollback your changes in Website UI -> Change history, which will show you all changed templates and their old versions.

[Tanjiro]

How about change recaptcha language? How can I change it ?

Edited August 22, 2023 by Tanjiro

[Tech Support]

Please go to Website UI -> Page components -> include_footer_general.tpl and find this line at the bottom:

<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaOnLoad&render=explicit"></script>

Update it in the following way:

<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaOnLoad&render=explicit&hl={{$lang.header.default_lang|default:"en"}}"></script>