如何集成 Cloudflare Turnstile
将 Cloudflare Turnstile 集成到您的网站中相对简单，以下是基本步骤：
第一步：注册并获取 API 密钥
首先，您需要注册一个 Cloudflare 帐号，并获取 Turnstile 的 API 密钥。具体步骤如下：
登录 Cloudflare 控制台。
在左侧导航栏中找到 Turnstile，然后创建一个新的站点。
在创建过程中，您将获得一个 Site Key 和一个 Secret Key。这两个密钥在集成过程中将被使用。
第二步：前端集成
在您网站的前端页面中集成 Turnstile，通常在需要验证的表单或页面上添加以下 HTML 代码：
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<form action="/your-server-endpoint" method="POST">
<div class="cf-turnstile" data-sitekey="your-site-key"></div>
<!-- 其他表单字段 -->
<button type="submit">Submit</button>
</form>
在上面的代码中，将 your-site-key 替换为您在 Cloudflare 获取的 Site Key。cf-turnstile 是 Turnstile 验证的容器，加载后会自动显示验证框。
document.querySelector('[name="cf-turnstile-response"]').value = 'TOKEN';
第三步： 后端验证
在用户提交表单后，您需要在后端验证 Turnstile 的响应，以确保提交请求的用户通过了验证。以下是一个基本的验证示例（以 PHP 为例）：
<?php
$secret = "your-secret-key";
$response = $_POST['cf-turnstile-response'];
$remoteip = $_SERVER['REMOTE_ADDR'];
$verifyResponse = file_get_contents(“https://challenges.cloudflare.com/turnstile/v0/siteverify”, false, stream_context_create([
“http” => [
“method” => “POST”,
“header” => “Content-type: application/x-www-form-urlencoded\r\n”,
“content” => http_build_query([
“secret” => $secret,
“response” => $response,
“remoteip” => $remoteip
])
]
]));
$responseData = json_decode($verifyResponse);
if ($responseData->success) {
// 验证成功，处理表单提交
} else {
// 验证失败，返回错误信息
}
?>
在上述代码中，将 your-secret-key 替换为您的 Secret Key。服务器端接收到用户提交的 cf-turnstile-response 后，使用该响应以及 Secret Key 发送验证请求到 Cloudflare 的验证 API。如果返回的结果中 success 字段为 true，则表示验证通过。
第四步：测试与部署
最后，在完成前后端的集成后，您需要对整个流程进行全面测试，确保 Turnstile 正常工作并且不会对正常用户造成不必要的干扰。在确认一切工作正常后，您即可将其部署到生产环境中。
最后
Cloudflare Turnstile 通过无感验证技术，既提升了网站的安全性，又极大地改善了用户体验。集成过程相对简单，只需几步便可将其引入您的网站。如果您正在寻找一种更智能、更高效的防机器人解决方案，Cloudflare Turnstile 无疑是一个值得考虑的选择。
ajax集成方法：
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback" async defer></script>
<script>
window.onloadTurnstileCallback = function () {
turnstile.render("#cfts", {
sitekey: "your-site-key",
callback: function (token) {
//console.log(`Challenge Success ${token}`);
$.ajax({
url: "/wp-content/themes/modown/action/check.php?action=vtoken",
type: "POST",
dataType: "json",
data: {
verify_token: token,
},
success: function (response) {
if ("err" in response && response["err"] != "") {
alert(response["err"]);
turnstile.reset("#cfts");
return;
};
window.close();
},
error: function (xhr, status, error) {
console.error("Ajax请求失败：", error);
turnstile.reset("#cfts");
},
});
},
});
};
</script>
参考：
https://www.11meigui.com/2024/cloudflare-turnstile.html
https://2captcha.com/demo/cloudflare-turnstile
https://cn.wordpress.org/plugins/simple-cloudflare-turnstile/
https://www.wppagebuilders.com/add-cloudflare-turnstile-login-form-wordpress/
https://www.jianshu.com/p/ada7d3758cfb
https://developers.cloudflare.com/turnstile/get-started/
https://github.com/cloudflare/turnstile-demo-workers/
原文链接：https://www.hertzdance.com/blog/cloudflare-turnstile，转载请注明出处。
评论0