为啥突然想到给自己站点接入图形验证码了呢,主要还是怕后台被暴力破解。就想着在登录的时候搞个图形验证码,尽量避免机器自动在那破解啥的。虽然是小站点吧,可能也没啥人搭理,但不搞终究内心不安。前些天,刷到一个博主博客评论系统被人恶意注入 额度啥的直接满了。
市面上有很多图形验证码形式,自己搭建的话,遭到恶意请求也挺浪费服务器资源。最先看的是腾讯的T-Sec验证码

只不过这个,我没免费额度,后付费的话,每次是0.005元。被人刷的话,估计会造成天价账单。免费的话,找到了个接口盒子提供的图形验证码。
这个有每分钟频次限制,我直接拿共享的来用


这种验证码挺古怪的,有静图也有动图,星星一直在动,让去数白色五角星的数目。机器去识别这种gif验证码应该还是有困难吧
前端(Vue):
<div class="verifyCodeBox">
<el-input type="text" placeholder="右侧验证码" v-model="form.verify_code" @keyup.native.enter="login" />
<img :src="imgUrl" />
</div>
// 获取验证码图片
const imgUrl = ref("");
const getImg=async()=>{
const res=await hzAxios.get("/api/xingkong/xk5get.php?id=88888888&key=88888888");
if(res.data.code==200){
// console.log(res.data);
imgUrl.value = res.data.imgurl;
form.value.image_key = res.data.md5key;
}else{
ElMessage.error("图形验证码加载失败");
}
}
getImg();
后端(PHP):
// 比对验证码
$request=file_get_contents("https://cn.apihz.cn/api/xingkong/xk5yz.php?id=88888888&key=88888888&code=".$verifyCode."&md5key=".$imageKey);
$verifyRes = json_decode($request)->code;
if($verifyRes!=200){
responseErr("图形验证码错误");
}
这样,在一定程度上,应该能避免些机器去暴力破解账号密码,上来得过图形验证码这关,哈哈。






















