Skip to main content

Tutorial: Integrating Cloudflare Turnstile with Sngine

<h1>Tutorial: Integrating Cloudflare Turnstile with Sngine</h1>
<p>
This tutorial will guide you through integrating <strong>Cloudflare Turnstile</strong> into your Sngine platform while keeping Google reCAPTCHA. Turnstile will be added to both the <strong>Contact Form</strong> and the <strong>Sign-Up Form</strong> for enhanced security.</p>

<h2>
1. <strong>Upload the files<span style="color: rgb(53, 152, 219);"> (If you don't want to do the manual work)</span></strong></h2>

<p><strong><span style="color: rgb(224, 62, 45);">
Skip step 3 if you just uploaded all the files, if you don't want to overwrite the file because you have a modified theme, continue to step 2</span></strong></p>

<p><strong><span style="color: rgb(224, 62, 45);">
Download the<span style="color: rgb(132, 63, 161);"> zip</span> and upload to your <span style="color: rgb(132, 63, 161);">root</span>, pay attention that this files will be <spanoverwritten

style="color: rgb(132, 63, 161);">overwritten</span></span></strong></p>
<p><span style="color: rgb(132, 63, 161);"><strong>
/includes/ajax/admin/settings.php</strong></span></p>

<p><span style="color: rgb(132, 63, 161);"><strong>
/includes/class-user.php</strong></span></p>

<p><span style="color: rgb(132, 63, 161);"><strong>
/content/themes/default/templates/admin.settings.tpl</strong></span></p>

<p><span style="color: rgb(132, 63, 161);"><strong>
/content/themes/default/templates/contact.tpl</strong></span></p>

<p><span style="color: rgb(132, 63, 161);"><strong>
/content/themes/default/templates/_sign_form.tpl</strong></span></p>

<hr>

<h2>
2. Add the&nbsp;<strong> Database&nbsp;</strong></h2> <p>


Add new options for Cloudflare Turnstile in the database.</p>

<p>
Use the file included visit yoursite.com/installCloud.php and run the script&nbsp;</p> <h3>


Or do it manually as it show bellow</h3>

<h3>
Run the following SQL queries:</h3>

<pre><code class="language-sql">
CREATE TABLE IF NOT EXISTS `system_options` (
    `option_name` VARCHAR(255) NOT NULL,
    `option_value` TEXT NOT NULL,
    PRIMARY KEY (`option_name`)
);

INSERT INTO `system_options` (`option_name`, `option_value`) VALUES ('turnstile_enabled', '0');
INSERT INTO `system_options` (`option_name`, `option_value`) VALUES ('turnstile_site_key', '');
INSERT INTO `system_options` (`option_name`, `option_value`) VALUES ('turnstile_secret_key', '');
</code></pre>

<hr>

<h2>
You are done if you have uploaded all the files</h2>

<p>
Now visit yousite.com/admincp/settings/security and look for and add you key</p>

<p><img

src="https://scriptstribe.com/content/uploads/tutorials/cloudSet.png"
 alt=""

width="534"
3. height="314"></p>
<h2>&nbsp;</h2>
<h2><span style="color: rgb(132, 63, 161);">3.&nbsp;<strong>Or Edit the code manually</strong></span></h2>

<h2>
2. <strong>Admin Panel Settings</strong></h2>

<h3>
Add Turnstile Settings in <code>Admin Settings</code>:</h3>

<p>
Open /content/themes/default/templates/admin.settings.tpl</p>

<p><strong>
Look For&nbsp;</strong></p> 


 <pre>&nbsp;&lt;div class="row form-group"&gt;>
          <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label class="col-md-3 form-label"&gt;<br>&nbsp;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;           {__("reCAPTCHA Site Key")}
          <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/label&gt;>
          <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="col-md-9"&gt;<br>&nbsp;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;           {if !$user-&gt;>_data['user_demo']}
              <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" class="form-control" name="reCAPTCHA_site_key" value="{$system['reCAPTCHA_site_key']}"&gt;<br>&nbsp;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;           {else}
              <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="password" class="form-control" value="*********"&gt;<br>&nbsp;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;           {/if}
          <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;>
        <br>&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;>

        <br><br>&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="row form-group"&gt;>
          <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label class="col-md-3 form-label"&gt;<br>&nbsp;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;           {__("reCAPTCHA Secret Key")}
          <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/label&gt;>
          <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="col-md-9"&gt;<br>&nbsp;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;           {if !$user-&gt;>_data['user_demo']}
              <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" class="form-control" name="reCAPTCHA_secret_key" value="{$system['reCAPTCHA_secret_key']}"&gt;<br>&nbsp;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;           {else}
              <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="password" class="form-control" value="*********"&gt;<br>&nbsp;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;           {/if}
          <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;>
        <br>&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;>
 <br>&nbsp;&lt;!-- success --&gt;</pre>

<p><strong>
And after this add


</strong></p>
<pre><code class="language-smarty">&lt;!-- Cloudflare Turnstile Enabled --&gt;>
&lt;<div class="form-table-row"&gt;>
    &lt;<div class="avatar"&gt;>
        {include file='__svg_icons.tpl' icon="shield" width="40px" height="40px"}
    &lt;</div&gt;>
    &lt;<div&gt;>
        &lt;<div class="form-label h6"&gt;>{__("Cloudflare Turnstile Enabled")}&lt;</div&gt;>
        &lt;<div class="form-text d-none d-sm-block"&gt;>{__("Enable or disable Cloudflare Turnstile security.")}&lt;</div&gt;>
    &lt;</div&gt;>
    &lt;<div class="text-end"&gt;>
        &lt;<label class="switch" for="turnstile_enabled"&gt;>
            &lt;<input type="checkbox" name="turnstile_enabled" id="turnstile_enabled" {if $system['turnstile_enabled']}checked{/if}&gt;>
            &lt;<span class="slider round"&gt;&lt;></span&gt;>
        &lt;</label&gt;>
    &lt;</div&gt;>
&lt;</div&gt;>

&lt;<!-- Turnstile Site Key --&gt;>
&lt;<div class="row form-group"&gt;>
    &lt;<label class="col-md-3 form-label"&gt;>{__("Turnstile Site Key")}&lt;</label&gt;>
    &lt;<div class="col-md-9"&gt;>
        &lt;<input type="text" class="form-control" name="turnstile_site_key" value="{$system['turnstile_site_key']}"&gt;>
    &lt;</div&gt;>
&lt;</div&gt;>

&lt;<!-- Turnstile Secret Key --&gt;>
&lt;<div class="row form-group"&gt;>
    &lt;<label class="col-md-3 form-label"&gt;>{__("Turnstile Secret Key")}&lt;</label&gt;>
    &lt;<div class="col-md-9"&gt;>
        &lt;<input type="text" class="form-control" name="turnstile_secret_key" value="{$system['turnstile_secret_key']}"&gt;
    &lt;/div&gt;
&lt;/div&gt;>
    </code></prediv>
<hr/div>
<h2>




3. <strong>Save Turnstile Settings</strong></h2>

<h3>
In <code>includes/ajax/admin/settings.php</code>, under the <strong>security</strong> case, add:</h3>

<pre><code class="language-php">
case 'security':
    $_POST['turnstile_enabled'] = (isset($_POST['turnstile_enabled'])) ? '1' : '0';

    update_system_options([
        'turnstile_enabled'    =&gt;> secure($_POST['turnstile_enabled']),
        'turnstile_site_key'   =&gt;> secure($_POST['turnstile_site_key']),
        'turnstile_secret_key' =&gt;> secure($_POST['turnstile_secret_key']),
    ]);
    break;
</code></pre>

<hr>

<h2>
4. <strong>Add Turnstile to Forms (I added after the Recapcha code)</strong></h2>

<h3><strong>
Contact Form</strong> (<code>contact.tpl</code>)</h3>

<pre><code class="language-smarty">
{if $system['turnstile_enabled']}
    &lt;<div class="form-group"&gt;>
        &lt;<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer&gt;&lt;></script&gt;>
        &lt;<div class="cf-turnstile" data-sitekey="{$system['turnstile_site_key']}"&gt;&lt;></div&gt;>
    &lt;</div&gt;>
{/if}
</code></pre>

<h3><strong>
Sign-Up Form</strong> (<code>_sign_form.tpl</code>&nbsp;</h3> <pre><code

class="language-smarty">
{if $system['turnstile_enabled']}
    &lt;<div class="form-group"&gt;>
        &lt;<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer&gt;&lt;></script&gt;>
        &lt;<div class="cf-turnstile" data-sitekey="{$system['turnstile_site_key']}"&gt;&lt;></div&gt;>
    &lt;</div&gt;>
{/if}
</code></pre>

<hr>

<h2>
5. <strong>Verify Turnstile on Submission</strong></h2>

<h3>
In <code>class-user.php</code>, update the verification logic:</h3>

<p><strong>
Look For</strong>&nbsp;</p> <div>

<pre>&nbsp;
 $custom_fields = $this-&gt;>set_custom_fields($args);<br><br>&nbsp;

 &nbsp;   /* check reCAPTCHA */<br><br>&nbsp;

 &nbsp;   if ($system['reCAPTCHA_enabled'] &amp;&amp; $args['from_web']) {<br><br>&nbsp;

 &nbsp; &nbsp;     $recaptcha = new \ReCaptcha\ReCaptcha($system['reCAPTCHA_secret_key'], new \ReCaptcha\RequestMethod\CurlPost());<br><br>&nbsp;

 &nbsp; &nbsp;     $resp = $recaptcha-&gt;>verify($args['g-recaptcha-response'], get_user_ip());<br><br>&nbsp;

 &nbsp; &nbsp;     if (!$resp-&gt;>isSuccess()) {<br><br>&nbsp;

 &nbsp; &nbsp; &nbsp;       throw new ValidationException(__("The security check is incorrect. Please try again"));<br><br>&nbsp;

 &nbsp; &nbsp;     }<br><br>&nbsp;

 &nbsp;   }</pre>

<div><strong>


And after that add&nbsp;</strong></div> </div>

<pre><code

class="language-php">
/* Check Cloudflare Turnstile */
if ($system['turnstile_enabled'] &amp;&amp; $from_web) {
    if (empty($_POST['cf-turnstile-response'])) {
        throw new ValidationException(__("Please complete the Cloudflare security check."));
    }

    $verify_url = "https://challenges.cloudflare.com/turnstile/v0/siteverify";
    $data = [
        'secret'   =&gt;> $system['turnstile_secret_key'],
        'response' =&gt;> $_POST['cf-turnstile-response'],
        'remoteip' =&gt;> get_user_ip(),
    ];

    $options = [
        'http' =&gt;> [
            'header'  =&gt;> "Content-type: application/x-www-form-urlencoded\r\n",
            'method'  =&gt;> 'POST',
            'content' =&gt;> http_build_query($data),
        ]
    ];

    $context  = stream_context_create($options);
    $response = file_get_contents($verify_url, false, $context);
    $result = json_decode($response);

    if (!$result-&gt;>success) {
        throw new ValidationException(__("The Cloudflare Turnstile check failed. Please try again."));
    }
}
</code></pre>

<hr>

<h2>
✅ <strong>Congrats</strong></h2>

<p>
You've successfully integrated <strong>Cloudflare Turnstile</strong> into your Sngine platform alongside <strong>Google reCAPTCHA</strong>. Now your platform is doubly protected against spam and bot attacks!</p>

<hr>

<p><strong>
Need Help?</strong> Visit the <a title="ScriptsTribe Forums" href="https://scriptstribe.com/forums">community forums</a>.&nbsp;</p>

 

Back to top