SmartCJ Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Google ReCaptcha ======

Google reCAPTCHA is a convenient alternative to traditional CAPTCHA for verifying visitors. Here's how to set it up:

1. Visit https://developers.google.com/recaptcha and register to obtain:
   - reCAPTCHA V3 Site Key
   - reCAPTCHA V3 Secret Key

2. Enter these values in Rotation > Settings > Social, and enable "Use Captcha on Comments?"


===== reCAPTCHA for comments =====

reCAPTCHA works by adding Google's JavaScript code to your form to verify the user is not a bot, storing the verification result in a hidden field. Here's an example for a comments page. Add this code to the HTML head section:

<code>

  <head>
    <title> <!--GALLERY_SLUG--> with reCAPTCHA</title>
     <script src="https://www.google.com/recaptcha/api.js?render=<!--TUBE_RECAPTCHA_SITE_KEY-->"></script>

<script>
function CheckRecaptcha() {
grecaptcha.ready(function() {
    grecaptcha.execute('<!--TUBE_RECAPTCHA_SITE_KEY-->', {action: 'report_form'}).then(function(token) {
       document.add_comment.recaptcha.value = token;
       document.add_comment.submit();
    });
});
}
</script>


</code>

Note that <!--TUBE_RECAPTCHA_SITE_KEY--> is your reCAPTCHA V3 Site Key (not the secret key).

Here's the comment form itself:
<code>


<? if ('<!--ERROR-->' != 'OK') echo "error: <!--ERROR-->"; ?>

<FORM name="add_comment" method="POST">
<input type="hidden" name="action" value="add_comment">
<input type="hidden" name="recaptcha" id="recaptcha" value=""> Google will write the answer here

<label>Name:</label> <input class="s_input" type="text" name='username' id='username' value="<?=$user['username']?>">
<br>

 <textarea class="s_text" class="ph2" name='comment' id='comment' rows=5 cols=35 value="Leave Your Comments Here"></textarea>

<input type=button value='Send comment' onClick=CheckRecaptcha()> Note: this is a button, not a submit button. The form only submits after Google approves the user.
</form>


</code>




===== reCAPTCHA Anticheat =====

reCAPTCHA can also be used to monitor traffic quality. Google analyzes traffic and reports the percentage it considers legitimate (non-bot).

Add the following code to your site (typically on index and category pages):

<code>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?render=<!--TUBE_RECAPTCHA_SITE_KEY-->"></script>

<script>
req_flag = false;
recaptcha_code = '';


if ('<!--RECAPTCHA_MAX_RATE-->') {
    if (Math.random() > '<!--RECAPTCHA_MAX_RATE-->') req_flag = true;
}


grecaptcha.ready(function() {
    grecaptcha.execute('<!--TUBE_RECAPTCHA_SITE_KEY-->', {action: 'index_page'}).then(function(token) {
       recaptcha_code = token;
    });
});


$(document).ready(function(){
	$('.gallery_link').each(function() {
		$(this).click(function(){
		    if (req_flag || recaptcha_code === '') return;
		    req_flag = true;

        	$.post('/',
	        {
                'action': 'check_recaptcha',
                'recaptcha_code': recaptcha_code,
    	    },
	        function (data) {
	  	        
	        }
	        );
		    
		});
	});


});



</script>
</code>


Add class='gallery_link' to links to galleries or categories as in the example below


<code>
<thumb num=1-10>
<a class='gallery_link' href='/gallery/<!--GALLERY_SLUG-->/index.html'> <!--GALLERY_ID--> </a> <br>
</thumb>
</code>

You can replace gallery_link with any class name. The key is to attach a bot detection event to your links using JavaScript: $('.gallery_link').each(function() { ... }).

4. In the admin panel, go to Settings > Layouts and enable the Google reCAPTCHA column.

Now you can view the percentage of legitimate traffic in Trade > reCAPTCHA column.

**Note:** Google allows only 1300 free checks per hour, so not all hits are analyzed—they're sampled based on RECAPTCHA_MAX_RATE. If you need unlimited checks, contact support about paid options.