几天前,Cloudflare正式推出Turnstile验证码项目,用户登录后可使用测试版,也支持非注册用户使用,由于官方并未给出具体的源码样本,本站结合PHP代码测试了该项目的使用配置。
一、Cloudflare后台申请服务
非Cloudflare用户可以直接免费注册该服务:https://www.cloudflare.com/lp/turnstile/,而无需注册Cloudflare账号。
Cloudflare用户需在后台菜单栏“Turnstile[beta]”,点击“Add Site”,填入Site name,选择站点域名,点击”Create“,则新建了一个站点,重要的key有两个,客户端“Site Key”以及服务端“Secret Key”,记下这两个key。
二、配置HTML前端
1.Header处增加一个Script引用
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback" async defer></script>
2.表单处提交按钮前增加一个Div块
<div class="cf-turnstile" data-sitekey="Site Key"></div>
注意替换下Site Key,则前端配置完毕,可以直接看到验证码加载成功。
三、配置PHP后端
以PHP代码为例,$validate为标志位,验证成功则为true。具体代码如下:
$validate=false;
$postdata = http_build_query(
array(
'secret' => 'Secret Key', //替换为自己的Secret Key
'ip' => $_SERVER['HTTP_CF_CONNECTING_IP'],
'response' => $_POST['cf-turnstile-response']
)
);
$opts = array('http' =>
array(
'method' => 'POST',
'header' => 'Content-Type: application/x-www-form-urlencoded',
'content' => $postdata
)
);
$context = stream_context_create($opts);
$result = file_get_contents('https://challenges.cloudflare.com/turnstile/v0/siteverify', false, $context);
$res_arr = json_decode ($result,true);
if($res_arr['success']){
$validate=true;
}
if($validate===true){
... //Do something...
}
四、官方开发说明
客户端使用说明:https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/
服务端使用说明:https://developers.cloudflare.com/turnstile/get-started/server-side-validation/