Here you find the simplest way to integrate
Cloudflare recaptcha in php.
just make two files
1)index.html
2) verify.php
it is very easy to create an account on Cloudflare and get test keys. Click here for key
1) After login click on turnstile on the sidebar on the dashboard
2) Click on Add Site
3) Fill in all details and click on create
4) You will get Site Key and Secret Key
These are the settings
1)index.html ( client-side-rendering )
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Turnstile ‐ Dummy Login Demo</title>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap.min.css”
integrity=”sha512-siwe/oXMhSjGCwLn+scraPOWrJxHlUgMBMZXdPe2Tnk3I0x3ESCoLz7WZ5NTH6SZrywMY+PB1cjyqJ5jAluCOg==”
crossorigin=”anonymous” referrerpolicy=”no-referrer” />
<link rel=”stylesheet”
href=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.9.1/font/bootstrap-icons.min.css”
integrity=”sha512-5PV92qsds/16vyYIJo3T/As4m2d8b6oWYfoqV+vtizRB6KhF1F9kYzWzQmsO6T3z3QG2Xdhrx7FQ+5R1LiQdUA==”
crossorigin=”anonymous” referrerpolicy=”no-referrer” />
<script src=”https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback” defer></script>
<style>
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #FEFEFE;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin input[type=”text”] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type=”password”] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
</style>
</head>
<body>
<main class=”form-signin”>
<div id=”example-container” data-sitekey=”0x4AAAAAAAErOp29HckxOeTW” data-callback=”javascriptCallback”>
</div>
</main>
<!– <div class=”show_response”>
<div id=”show_response”></div>
</div> –>
</body>
</html>
<script>
window.onloadTurnstileCallback = function () {
// alert();
turnstile.render(‘#example-container’, {
sitekey: ‘0x4AAAAAAAErOp29HckxOeTW’,
callback: function (token) {
console.log(`Challenge Success ===> ${token}`);
handlePost(token)
},
});
};
</script>
<script src=”https://code.jquery.com/jquery-1.9.1.min.js”></script>
<script>
async function handlePost(token) {
const SECRET_KEY = ‘0x4AAAAAAAErOjbmZAhSDpZAx6pLXzRes3M’;
let formData = new FormData();
formData.append(‘secret’, SECRET_KEY);
formData.append(‘response’, token);
$.ajax({
url: ‘verify.php’,
type: ‘post’,
data: formData,
dataType: false,
cache: false,
contentType: false,
processData: false,
success: function (data) {
alert(data);
// $(“#show_response”).html(data);//use this to print result
},
error: function () {
alert(‘error’);
}
});
}
</script>
2) verify.php (server-side-validation)
<?php
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => ‘https://challenges.cloudflare.com/turnstile/v0/siteverify’,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => ”,
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 0,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => ‘POST’,
CURLOPT_POSTFIELDS => array(‘secret’ => $_POST[‘secret’],’response’ => $_POST[‘response’]),
));
$response = curl_exec($curl);
curl_close($curl);
echo $response;
?>
For more information click here. For more such information go-to knowledge mirror.
