记给网站接入图形验证码

1. 1. 前言
2. 2. 正文
   1. 2.1. 示例代码

前言

为啥突然想到给自己站点接入图形验证码了呢，主要还是怕后台被暴力破解。就想着在登录的时候搞个图形验证码，尽量避免机器自动在那破解啥的。虽然是小站点吧，可能也没啥人搭理，但不搞终究内心不安。前些天，刷到一个博主博客评论系统被人恶意注入 额度啥的直接满了。

正文

市面上有很多图形验证码形式，自己搭建的话，遭到恶意请求也挺浪费服务器资源。最先看的是腾讯的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("图形验证码错误");
}

这样，在一定程度上，应该能避免些机器去暴力破解账号密码，上来得过图形验证码这关，哈哈。