node从入门到放弃系列之（10）图形验证功能

最新推荐文章于 2024-06-02 21:16:15 发布

高素质车间工人

最新推荐文章于 2024-06-02 21:16:15 发布

阅读量895

点赞数 1

分类专栏： node从入门到放弃文章标签： vue nodejs

本文链接：https://blog.csdn.net/qq_38734862/article/details/111225174

版权

node从入门到放弃专栏收录该内容

15 篇文章 8 订阅

订阅专栏

奉上代码: node服务demo代码=》koa2-server项目代码；vue前端demo代码=》 vue-client项目代码
如果git登不上可以换gitee=》koa2-server项目代码；vue前端demo代码=》 vue-client项目代码

这里展示的是基于nodejs的人机验证接口和vue的前端验证案例
有需要基于uniapp的验证案例的点这里，在components里。
有需要基于java的接口案例的点这里
前端案例灵感来源及参考：安全验证案例

后端接口

数据获取

这部分使用的是canvas画布的部分功能。

滑块拼图图片数据

需要一个拼图块和背景图，效果图如下：
拼图块及背景图
代码有点长，直接上链接，git上看更方便=》/image/verify接口
swagger文档

点击文字图片数据

需要一张带有文字的图片。效果图如下：
在这里插入图片描述
代码地址和swagger跟上面的一样

验证

代码有点长，直接上链接，详细的git上看更方便=》/image/check接口

滑块拼图验证

这部分很简单，把前端传来的移动距离和后端保存的距离比较下就行了。

  // 滑块验证
  const R = 16; // 根据字体大小计算得到：22px R = Math.round(2 * 11^2)
  const sql = `select * from captcha where user_id='${token.id}' and type='0'`;
  const sqlResult = await mysql.query(sql);
  const sliderLeft = Number(sqlResult[0].check_json); // 获取保存的滑块移动距离
  checkJson = Number(checkJson) + 4;
  Math.abs(checkJson - sliderLeft) < 4 ? (result = true) : (result = false);

文字点击验证

这部分最难的就是文字中心重置部分了，因为文字加上的旋转，所以比较时的中心应该跟着改变

 // 点击验证
 checkJson = JSON.parse(checkJson);
 const sql = `select * from captcha where user_id='${token.id}' and type='1'`;
 const sqlResult = await mysql.query(sql);
 position = JSON.parse(sqlResult[0].check_json);

 // 中心坐标重置
 for (const i in position) {
   const element = position[i];
   const radian = ((element.angle + 45) * PI) / 180;
   if (element.angle > 45) {
     position[i].X -= Math.round(R * Math.cos(radian));
     position[i].Y += Math.round(R * Math.sin(radian));
   } else if (element.angle < -45) {
     position[i].X += Math.round(R * Math.sin(radian));
     position[i].Y -= Math.round(R * Math.cos(radian));
   } else {
     position[i].X += Math.round(R * Math.sin(radian));
     position[i].Y -= Math.round(R * Math.cos(radian));
   }
   const dx = Math.abs(position[i].X - checkJson[i].x);
   const dy = Math.abs(position[i].Y - checkJson[i].y);
   const distance = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
   if (distance > 18) {
     return ctx.success(false);
   } else if (i == position.length - 1) {
     result = true;
   }
 }