howto KVS 6.2.1 - how to add support for Cloudflare Turnstile captcha

[Tech Support]

Starting from 6.2.1 update we added support for Cloudflare Turnstile captcha in addition to Google reCAPTCHA that was already supported before.

However using Cloudflare Turnstile will need minor template changes. The changes are provided for KVS default theme, but likely they will also work with other themes (from kvs-themes.com) that have support for reCAPTCHA, at least we do not see any potential issues at the moment.

First of all you should check if your theme version has support for reCAPTCHA, otherwise it won't be possible to use Turnstile as well. In order to check that you need to open Website UI -> Page components -> include_footer_general.tpl and check if you have this code block at the bottom:

{{if $recaptcha_site_key!=''}}
....
{{/if}}

If this block is present, then you can follow this guide to add support for Turnstile.

 

How to update a supported theme for Cloudflare Turnstile

Step 1. Update theme JS file from here:

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

NOTE: this file is minified and it is not expected that you've ever done any custom changes into it. If you did any changes there, they will be lost.

 

Step 2. In Website UI -> Page components -> include_footer_general.tpl replace this block:

{{if $recaptcha_site_key!=''}}
....
{{/if}}

with this:

{{if $recaptcha_site_key!=''}}
  {{if $recaptcha_type=='google'}}
 	<script src="https://www.google.com/recaptcha/api.js?render=explicit"></script>
  {{elseif $recaptcha_type=='cloudflare'}}
  	<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?compat=recaptcha"></script>
  {{/if}}
{{/if}}

 

Then your theme is ready for Cloudflare Turnstile captcha. You can go to their admin panel and create your site there. This will provide you a pair of Site key and Secret key, similar to Google reCAPTCHA. Input these keys into KVS Captcha plugin and switch to Cloudflare Turnstile. Then check your site's GUI that captcha is working.

[Mich]

I have a question and am unsure about something. Maybe you can help.

Do we need to edit only include_footer_general.tpl, or are there other files to be modified, such as in the blocks?

I have yet to update and check the new code responsible for reCAPTCHA.

You have typo in post reCAPCTHA ==> reCAPTCHA

 

 

[Tech Support]

21 hours ago, Mich said:

Do we need to edit only include_footer_general.tpl, or are there other files to be modified, such as in the blocks?

If the theme supports reCAPTCHA, then all changes in other places are already there. If it doesn't, this might be very old theme. Unfortunately we can't provide instructions for it, as the process would be very complicated as dozen of places would need to be replaced.

[drastic]

What exactly do we add to the JS file?

[Tech Support]

There are set of changes there.

[Tanjiro]

On 4/10/2024 at 1:54 PM, Tech Support said:

{{if $recaptcha_site_key!=''}}
  {{if $recaptcha_type=='google'}}
 	<script src="https://www.google.com/recaptcha/api.js?render=explicit"></script>
  {{elseif $recaptcha_type=='cloudflare'}}
  	<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?compat=recaptcha"></script>
  {{/if}}
{{/if}}

Shouldn't you add async ?

[Tech Support]

I think you can add both async and defer. We checked reCAPTCHA docs and they use both of it. While turnstile docs use only defer. We added both of them to our demo site and do not see any issues.