react的前端验证码

验证码一定是人类史上比较伟大的发明,坑了机器人也坑了自己。

后端同事比较懒。验证码居然前端来弄。言归正传,验证码的功能主要是

  • 不被机器轻松破解
  • 人眼很好识别

完整代码: https://github.com/dangjingtao/vccode效果预览

主要功能:

  • 随机生成4个 大 / 小写英文字母 / 阿拉伯数字
  • 随机干扰线防止机器轻松破解
  • 点击刷新验证码
  • dom 结构优化

第一步随机生成4个 大 / 小写英文字母 / 阿拉伯数字

  getRandom(max, min, num) {
    const asciiNum = ~~(Math.random()*(max-min+1)+min)
    if(!Boolean(num)){
      return asciiNum
    }
    const arr = []
    for(let i = 0; i < num; i++){
      arr.push(this.getRandom(max, min))
    }
    return arr
  }1234567891011

首先封装了一个函数,主要功能为生成 1 个或者多个随机数,如果为多个则存放在数组中

~~ 为位操作符取整, 类似于 Math.floor() ,需慎用,因为不够精准

调用

有了这个函数就可以肆意的搞起来了,首先我们要随机出四个 字母或者数字在 state 初始化的时候。 因为点击刷新的时候需要频繁调用,所以把初始化 state 的封成一个函数

  initState(){
    return {
      data: this.getRandom(109,48,4),
      rotate: this.getRandom(75,-75,4),
      fz: this.getRandom(8,20,4),
      color: [this.getRandom(100,255,3),this.getRandom(100,255,4),this.getRandom(100,255,3),this.getRandom(100,255,3)]
    }
  }12345678

data 为四个字母,使用的 ascii 表的值,抛去其中一些不使用的符号 rotate 为字母旋转的角度, 为了用户体验,不用旋转 180° ! fz 为字体大小 color 为字体颜色,rgb 模式

一切处理好了之后代码应该是这样子的

class VCode extends Component {
  constructor(props) {
    super(props)
    this.state = {
      ...this.initState()
    }
  }

  initState(){
    return {
      data: this.getRandom(109,48,4),
      rotate: this.getRandom(75,-75,4),
      fz: this.getRandom(8,20,4),
      color: [this.getRandom(100,255,3),this.getRandom(100,255,4),this.getRandom(100,255,3),this.getRandom(100,255,3)]
    }
  }

  getRandom(max, min, num) {
    const asciiNum = ~~(Math.random()*(max-min+1)+min)
    if(!Boolean(num)){
      return asciiNum
    }
    const arr = []
    for(let i = 0; i < num; i++){
      arr.push(this.getRandom(max, min))
    }
    return arr
  }

  render() {
    return ()
  }

}

正常情况下应为后台生成验证码。 在没有后台或者自己的一些小 demo 的时候可以前端自己生成。

安全为主

本文分享自微信公众号 - 一Li小麦(gh_c88159ec1309)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-08-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大前端

Flutter跨平台移动端开发丨自定义 Banner Widget

移动端开发过程中 Banner 组件非常常见,项目中用的到就封装一个,主要用到 Timer + PageView,采用定时轮播的方法实现

15330
来自专栏编程微刊

jquery导航选中按钮颜色变化

今天写一个前端页面的小功能,选中某个按钮或者菜单的时候颜色发生变化,以便用户区分自己选中的选项,这也是一种前端日常工作之中优化项。 效果是这样的:

11030
来自专栏Linux、云计算技术交流

第十三章 iptables 防火墙(二)

当然,iptbales不只可以设置默认规则,还可以手动加入很多规则。首先我们来看一下路由器的网卡配置:

8820
来自专栏coding

网站使用腾讯云cdn加速操作实战

即使是再小的站,也要有一颗成长为大流量网站的雄心,正所谓“法乎其上,得乎其中”,网站流量要大,就需要有良好的体验,而打开速度快是用户体验最重要的指标(没有之一)...

25620
来自专栏国产程序员

谈谈ContextLoaderListener

每一个整合spring框架的项目中,总是不可避免地要在web.xml中加入这样一段配置。

36480
来自专栏达达前端

(19)打鸡儿教你Vue.js

模板语法 计算属性 Class,Style绑定 条件渲染 列表渲染 事件处理 表单输入绑定

10130
来自专栏国产程序员

Vue学习(一)挂载点、模板与实例

Vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫渐进式框架呢,简单回答就是主张最少,这些概念只能自己去看,自己去理解,一千个读者一千个哈姆雷特,...

6930
来自专栏奔跑的键盘侠

学Python大半年——到底学会个啥?

本来只是觉着按键精灵很鸡肋,很多功能实现不了,毕竟只是一门脚本语言,要做的牛还是要依赖很多其他的东西。

8610
来自专栏国产程序员

表单提交后台接收参数的几种方式

Form(表单)对于每个WEB开发人员来说,应该是再熟悉不过的东西了,可它却是页面与WEB服务器交互过程中最重要的信息来源。 虽然Asp.net WebForm...

13140
来自专栏Jerry的SAP技术分享

SAP ABAP ALV list background render

将代码里使用custom container的地方全部替换成docking container,即可解决此问题:

11530

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励