a) 注册VAPTCHA账号 官网:https://www.vaptcha.com/
b) 根据需求,增加验证单元(KEY千万不要泄露,“场景”根据需求自定义)
a) 准备登录界面Login.html,在登录表单(id=”login-form” method=”post”)下,在原有的账号input(name=”Account”)和密码input(name=”Password”)后面放置VAPTCHA的加载框和加载动画。
<html>
<head></head>
<body>
<div id="vaptchaContainer" style="width: 220px;height: 40px;margin: 10px;">
<div class="vaptcha-init-main">
<div class="vaptcha-init-loading">
<a href="/" target="_blank"> <img src="https://r.vaptcha.com/public/img/vaptcha-loading.gif" /> </a>
<span class="vaptcha-text">Vaptcha启动中...</span>
</div>
</div>
</div>
</body>
</html>
官方是这么说的:
<!-- 点击式按钮建议高度介于36px与46px -->
<!-- 嵌入式仅需设置宽度,高度根据宽度自适应,最小宽度为200px -->
<div id="vaptchaContainer" style="width: 300px;height: 36px;">
<!--vaptcha-container是用来引入VAPTCHA的容器,下面代码为预加载动画,仅供参考-->
<div class="vaptcha-init-main">
<div class="vaptcha-init-loading">
<a href="/" target="_blank">
<img src="https://r.vaptcha.com/
public/img/vaptcha-loading.gif" />
</a>
<span class="vaptcha-text">Vaptcha启动中...</span>
</div>
</div>
</div>
<script src="https://v.vaptcha.com/v3.js"></script>
<script>
vaptcha({
//配置参数
vid: '****', // 验证单元id
type: 'click', // 展现类型 点击式
container: '#vaptchaContainer', // 按钮容器,可为Element 或者 selector
... //其他配置参数省略
}).then(function (vaptchaObj) {
vaptchaObj.render()// 调用验证实例 vaptchaObj 的 render 方法加载验证按钮
... //其他事件处理
})
</script>
所以我们放到页面中以后,就是这样的:
b) 上图中,可能已经注意到了容器下面有两个script标签,现在,我们需要引用vaptcha的js和配置初始化代码。
引用VACTPHA新版v3.js
<script src="https://v.vaptcha.com/v3.js"></script>
参考官方手册:
配置初始化代码:
var obj;
vaptcha({
vid: '5dc3efcb15347d90a5084298',
// 验证单元id
type: 'click',
// 显示类型 点击式
scene: 1,
// 场景值 默认0
container: '#vaptchaContainer',
// 容器,可为Element 或者 selector
offline_server: 'https://www.codecommunity.cn/',
//离线模式服务端地址
lang: 'zh-CN',
https: true,
color: 'rgb(' + normal_bgcolor + ')'
}).then(function(vaptchaObj) {
obj = vaptchaObj; //将VAPTCHA验证实例保存到局部变量中
vaptchaObj.render(); // 调用验证实例 vpObj 的 render 方法加载验证按钮
//获取token的方式一:
vaptchaObj.renderTokenInput('.login-form'); //以form的方式提交数据时,使用此函数向表单添加token值
//关闭验证弹窗时触发
vaptchaObj.listen('close',
function() {
//验证弹窗关闭触发
})
})
官方手册有详细解释:
i. 需要注意的一点,在v2版本中验证场景一般要首位补0,比如01、02,但在v3版本中不需要进行补零,例如1、2。
ii. 离线模式服务器地址本次教程不做讲解,但该参数官方不允许为空,直接填写自己的域名地址即可。
c) 配置完成后,写登录按钮的事件,注意的一点,上面代码可以看到我用的是验证单元验证通过后向表单添加token值,实际上,验证单元完成后,表单会增加一个看不到的input(name=” vaptcha_token” value=”验证后的token”),我们不希望用户不输入表单内容就直接提交,验证input是否为空的方法很多,这里用数组进行操作。
function sub() {
//因为下面的数组操作时也会验证这个input,所以我们抢先一步对此进行验证,如果觉得麻烦,可以直接在下面循环处进行验证
if (obj.getToken() == null || obj.getToken() === "") {
$('.Main_Login_Text').html("请先完成验证");
return false;
}
//获取表单所有的可输入组件
let form = $('#login-form').serializeArray();
let flag = -1; //也可以写 =1,后面的else删掉。
$.each(form,
function(i, item) {
if (item['value'] === '') { //循环验证是否为空
$('.Main_Login_Text').html("账号或密码不能为空");
flag = -1;
return false;
} else {
flag = 1;
}
});
if (flag === 1) {
$('#login-form').submit(); //表单没有空,提交给服务器验证
}
}
d) 截止到现在,登录Login.html内容全部完成了。
a) 官方文档中提示用post向服务器发送验证token请求,url地址:http://0.vaptcha.com/verify
b) 这里附上php发送post请求的代码(采用file_get_contents方式):
private function send_post($url, $post_data)
{
$postdata = http_build_query($post_data);
$options = array(
'http' => array(
'method' => 'POST',
'header' => 'Content-type:application/x-www-form-urlencoded',
'content' => $postdata,
'timeout' => 10 * 60 // 超时时间(单位:s)
)
);
$context = stream_context_create($options);
$result = file_get_contents($url, false, $context);
return $result;
}
c) 在服务端一定要再次验证各项数据,包括是否是空,或者是否包含特殊字符,尤其要注意过滤一下单引号、双引号和”—“符号(可以简单使用addslashes函数进行初步过滤),防止不法分子进行sql注入。
if ($Account != "" && $Password != "" && $Token != "") {
//传参前已对变量进行了过滤验证,这里简单验证一下即可
if ($Token != "") {
$vaptcha_url = "http://0.vaptcha.com/verify";
$post_data = array(
'id' => '换成自己的验证单元vid',
'secretkey' => '换成自己的验证单元key',
'scene' => '1',
'token' => $Token,
'ip' => $_SERVER['REMOTE_ADDR'],
);
$result = json_decode($this::send_post($vaptcha_url, $post_data), true);
if ($result['success'] == 1 && $result['score'] >= 1) {
//验证通过,执行的代码
} else {
//验证失败,执行的代码
}
}
}
a) 官方手册地址:https://www.vaptcha.com/document/install.html
b) 代码demo:
<form action="Login.html" id="login-form" method="post">
<input class="Main_Login_Input" name="Account" placeholder="账号/邮箱/手机号" required=required type="text" value="">
<input class="Main_Login_Input" name="Password" placeholder="登录密码" required=required type="password" value="">
<div id="vaptchaContainer" style="width: 220px;height: 40px;margin: 10px;">
<div class="vaptcha-init-main">
<div class="vaptcha-init-loading">
<a href="/" target="_blank">
<img src="https://r.vaptcha.com/public/img/vaptcha-loading.gif"/>
</a>
<span class="vaptcha-text">Vaptcha启动中...</span>
</div>
</div>
</div>
<script src="https://v.vaptcha.com/v3.js"></script>
<script>
var obj;
vaptcha({
vid: '5dc3efcb15347d90a5084298', // 验证单元id
type: 'click', // 显示类型 点击式
scene: 1, // 场景值 默认0
container: '#vaptchaContainer', // 容器,可为Element 或者 selector
offline_server: 'https://www.codecommunity.cn/', //离线模式服务端地址
lang: 'zh-CN',
https: true,
color: 'rgb(' + normal_bgcolor + ')'
}).then(function (vaptchaObj) {
obj = vaptchaObj;//将VAPTCHA验证实例保存到局部变量中
vaptchaObj.render();// 调用验证实例 vpObj 的 render 方法加载验证按钮
//获取token的方式一:
vaptchaObj.renderTokenInput('.login-form');//以form的方式提交数据时,使用此函数向表单添加token值
//关闭验证弹窗时触发
vaptchaObj.listen('close', function () {
//验证弹窗关闭触发
})
})
</script>
<span class="Main_Login_Input_Span">
<a class="Main_Login_Input_Span_Reg_A" href="#">忘记密码?</a>
</span>
<button class="Main_Login_Input_Button" onclick="sub()" type="button" value="login" name="type">登录</button>
<span class="Main_Login_Input_Span_Reg">
<a class="Main_Login_Input_Span_Reg_A" href="Register.html">注册账号</a>
</span>
</form>
if ($Account != "" && $Password != "" && $Token != "") {
if ($Token != "") {
$vaptcha_url = "http://0.vaptcha.com/verify";
$post_data = array(
'id' => '换成自己的验证单元vid',
'secretkey' => '换成自己的验证单元key',
'scene' => '1',
'token' => $Token,
'ip' => $_SERVER['REMOTE_ADDR'],
);
$result = json_decode($this::send_post($vaptcha_url, $post_data), true);
if ($result['success'] == 1 && $result['score'] >= 1) {
//验证通过
} else {
//验证失败
}
}
}
Codecommunity.cn
Shawna
2020年3月16日