当前位置: 首页 > news >正文

前端实战:使用JS和Canvas实现运算图形验证码(uniapp、微信小程序同样可用)

图形验证码是网站安全防护的重要组成部分,能有效防止自动化脚本进行恶意操作,如何实现一个简单的运算图形验证码?本文封装了一个简单的js类,可以用于生成简单但安全的图形验证码。它支持自定义验证码样式,包括字体大小、颜色以及干扰线的数量和样式。如下图。

核心js文件如下:

// mcaptcha.jsexport class Mcaptcha {constructor(options) {this.options = options;this.fontSize = 24;this.init();this.refresh();}init() {this.ctx = wx.createCanvasContext(this.options.el);this.ctx.setTextBaseline("middle");this.ctx.setFillStyle(this.randomColor(180, 240));}refresh() {var code = '';var num1 = this.randomNum(0, 9)var num2 = this.randomNum(0, 9)this.options.createCodeImg = code;code = num1 + '+' + num2 + '=?'this.options.num1 = num1;this.options.num2 = num2;let arr = [code]if (arr.length === 0) {arr = ['e', 'r', 'r', 'o', 'r'];};let offsetLeft = this.options.width * 0.6 / (arr.length - 1);let marginLeft = this.options.width * 0.2;arr.forEach((item, index) => {this.ctx.setFillStyle(this.randomColor(0, 180));let size = this.randomNum(24, this.fontSize);this.ctx.setFontSize(size);let dis = offsetLeft * index + marginLeft - size * 0.3;let deg = this.randomNum(-1, 1);this.ctx.translate(dis, this.options.height * 0.45);this.ctx.rotate(deg * Math.PI / 180);this.ctx.fillText(item, 2, this.randomNum(0,10));this.ctx.rotate(-deg * Math.PI / 180);this.ctx.translate(-20, -this.options.height * 0.6);})for (var i = 0; i < 4; i++) {this.ctx.strokeStyle = this.randomColor(40, 180);this.ctx.beginPath();this.ctx.moveTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));this.ctx.lineTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));this.ctx.stroke();}for (var i = 0; i < this.options.width / 4; i++) {this.ctx.fillStyle = this.randomColor(0, 255);this.ctx.beginPath();this.ctx.arc(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height), 1, 0, 2 * Math.PI);this.ctx.fill();}this.ctx.draw();}validate(code) {var code = Number(code)var v_code = this.options.num1 + this.options.num2if (code == v_code) {return true} else {this.refresh()return false}}randomNum(min, max) {return Math.floor(Math.random() * (max - min) + min);}randomColor(min, max) {let r = this.randomNum(min, max);let g = this.randomNum(min, max);let b = this.randomNum(min, max);return "rgb(" + r + "," + g + "," + b + ")";}
}

使用方法

以微信小程序为例,其他环境适当修改。

  1. 引入Mcaptcha.js
import Mcaptcha from './mcaptcha.js';

     2.初始化Mcaptcha实例

在你的页面的JS文件中,创建一个Mcaptcha实例,并传入相应的配置选项。

Page({onLoad: function() {new Mcaptcha({el: 'captchaCanvas', // canvas的IDwidth: 300, // canvas的宽度height: 150 // canvas的高度});}
});

      3.在WXML中添加Canvas元素

在页面的WXML文件中,添加一个Canvas元素,用于展示验证码。

<canvas canvas-id="captchaCanvas" style="width: 300px; height: 150px;"></canvas>

4.使用Mcaptcha实例生成验证码

调用Mcaptcha实例的refresh方法来生成验证码。

Page({// ...onShow: function() {// 假设mcaptcha是之前创建的Mcaptcha实例mcaptcha.refresh();}
});

5.验证用户输入

当用户输入验证码并提交时,调用Mcaptcha实例的validate方法进行验证

Page({// ...checkCaptcha: function(inputCode) {// 假设mcaptcha是之前创建的Mcaptcha实例if (mcaptcha.validate(inputCode)) {wx.showToast({title: '验证成功!',icon: 'success'});} else {wx.showToast({title: '验证失败,请重试。',icon: 'none'});}}
});

 Mcaptcha.js的核心方法

  • refresh(): 生成新的验证码,包括随机数字、运算符和干扰元素。
  • validate(code): 验证用户输入的验证码是否正确,返回布尔值。
  • randomNum(min, max): 生成指定范围内的随机数。
  • randomColor(min, max): 生成指定范围内的随机颜色。

http://www.lryc.cn/news/442293.html

相关文章:

  • SQL Server 语句日期格式查找方法
  • 【Python报错已解决】python setup.py bdist_wheel did not run successfully.
  • 查询结果是1条记录,但执行更新却是2条记录原因查找
  • 校园网站的管理与建设心得体会
  • 智慧农业——InsectMamba利用状态空间模型对害虫进行分类
  • 基于机器学习的癌症数据分析与预测系统实现,有三种算法,bootstrap前端+flask
  • docker|Oracle数据库|docker快速部署Oracle11g和数据库的持久化(可用于生产环境)
  • uni-app 聊天界面滚动到消息底部
  • 学习风格的类型
  • GCP容器镜像仓库使用
  • 【C++ Primer Plus习题】16.10
  • Django框架全面指南
  • git 更新LingDongGui问题解决
  • Thymeleaf模版引擎
  • jpa适配mysql切换达梦可能的坑
  • 922. 按奇偶排序数组 II 双指针 力扣
  • Vue接入高德地图并实现基本的路线规划功能
  • linux网络编程4
  • Spring模块详解Ⅳ(Spring ORM和Spring Transaction)
  • 深度图可视化显示(kitti)
  • 【Kubernetes知识点】HPA如何控制不同的资源实现自动扩缩容?
  • adb devices不显示连接设备怎么解决
  • 经典sql题(一)求连续登录不少于三天用户
  • 2024java面试-软实力篇
  • 「OC」present和push操作区别以及混合推出的实现
  • 【高分系列卫星简介】
  • 八股文-多线程、并发
  • xtu oj 折纸
  • 传知代码-多示例AI模型实现病理图像分类
  • Java知识点小结3:内存回收