vue实现图形验证码登录

本文实例为大家分享了vue实现图形验证码登录的具体代码,供大家参考,具体内容如下

1、效果图

2、在components下面新建文件identify.vue,内容:

<template>
  <div class="s-canvas">
    <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
  </div>
</template>
<script>
export default {
  name: 'SIdentify',
  props: {
    identifyCode: {
      type: String,
      default: '1234'
    },
    fontSizeMin: {
      type: Number,
      default: 28
    },
    fontSizeMax: {
      type: Number,
      default: 40
    },
    backgroundColorMin: {
      type: Number,
      default: 180
    },
    backgroundColorMax: {
      type: Number,
      default: 240
    },
    colorMin: {
      type: Number,
      default: 50
    },
    colorMax: {
      type: Number,
      default: 160
    },
    lineColorMin: {
      type: Number,
      default: 40
    },
    lineColorMax: {
      type: Number,
      default: 180
    },
    dotColorMin: {
      type: Number,
      default: 0
    },
    dotColorMax: {
      type: Number,
      default: 255
    },
    contentWidth: {
      type: Number,
      default: 112
    },
    contentHeight: {
      type: Number,
      default: 40
    }
  },
  methods: {
    // 生成一个随机数
    randomNum (min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    // 生成一个随机的颜色
    randomColor (min, max) {
      var r = this.randomNum(min, max)
      var g = this.randomNum(min, max)
      var b = this.randomNum(min, max)
      return 'rgb(' + r + ',' + g + ',' + b + ')'
    },
    drawPic () {
      var canvas = document.getElementById('s-canvas')
      var ctx = canvas.getContext('2d')
      ctx.textBaseline = 'bottom'
      // 绘制背景
      ctx.fillStyle = this.randomColor(
        this.backgroundColorMin,
        this.backgroundColorMax
      )
      ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
      // 绘制文字
      for (let i = 0; i < this.identifyCode.length; i++) {
        this.drawText(ctx, this.identifyCode[i], i)
      }
      this.drawLine(ctx)
      this.drawDot(ctx)
    },
    drawText (ctx, txt, i) {
      ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
      ctx.font =
        this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'
      var x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
      var y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
      var deg = this.randomNum(-30, 30)
      // 修改坐标原点和旋转角度
      ctx.translate(x, y)
      ctx.rotate(deg * Math.PI / 270)
      ctx.fillText(txt, 0, 0)
      // 恢复坐标原点和旋转角度
      ctx.rotate(-deg * Math.PI / 270)
      ctx.translate(-x, -y)
    },
    drawLine (ctx) {
      // 绘制干扰线
      for (let i = 0; i < 2; i++) {
        ctx.strokeStyle = this.randomColor(
          this.lineColorMin,
          this.lineColorMax
        )
        ctx.beginPath()
        ctx.moveTo(
          this.randomNum(0, this.contentWidth),
          this.randomNum(0, this.contentHeight)
        )
        ctx.lineTo(
          this.randomNum(0, this.contentWidth),
          this.randomNum(0, this.contentHeight)
        )
        ctx.stroke()
      }
    },
    drawDot (ctx) {
      // 绘制干扰点
      for (let i = 0; i < 20; i++) {
        ctx.fillStyle = this.randomColor(0, 255)
        ctx.beginPath()
        ctx.arc(
          this.randomNum(0, this.contentWidth),
          this.randomNum(0, this.contentHeight),
          1,
          0,
          2 * Math.PI
        )
        ctx.fill()
      }
    }
  },
  watch: {
    identifyCode () {
      this.drawPic()
    }
  },
  mounted () {
    this.drawPic()
  }
}
</script>
<style lang='scss' scoped>
.s-canvas {
    height: 38px;
}
.s-canvas canvas{
    margin-top: 1px;
    margin-left: 8px;
}
</style>

3、页面引入

<script>
 import SIdentify from '../../components/identify'
 export default {
    components: { SIdentify }
  }
  data() {
    // 验证码自定义验证规则
    const validateVerifycode = (rule, value, callback) => {
      const newVal = value.toLowerCase()
      const identifyStr = this.identifyCode.toLowerCase()
      if (newVal === '') {
        callback(new Error('请输入验证码'))
      } else if (newVal !== identifyStr) {
        console.log('validateVerifycode:', value)
        callback(new Error('验证码不正确!'))
      } else {
        callback()
      }
    }
    return {
      identifyCodes: '3456789ABCDEFGHGKMNPQRSTUVWXY',
      identifyCode: '',
       ruleForm: {
        userName: '',
        password: '',
        verifycode: ''
      },
      rules: {
        verifycode: [
          { required: true, trigger: 'blur', validator: validateVerifycode }
        ]
      }
 }
    }
</script>

4、html

<el-form-item prop="verifycode">
 <div style="display:flex">
 <el-input
 v-model="ruleForm.verifycode"
 placeholder="请输入验证码"
 @keyup.enter.native="login('ruleForm')"
 ></el-input>
 <span @click="refreshCode"
 ><s-identify :identifyCode="identifyCode"></s-identify
 ></span>
 </div>
</el-form-item>

5、mounted

mounted() {
    // 验证码初始化
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
  }

6、methods

methods: {
    // 生成随机数
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    // 切换验证码
    refreshCode() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    // 生成四位随机验证码
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ]
      }
    }
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Vue实现手机号、验证码登录(60s禁用倒计时)

    最近在做一个Vue项目,前端通过手机号.验证码登录,获取验证码按钮需要设置60s倒计时(点击一次后,一分钟内不得再次点击).先看一下效果图: 输入正确格式的手机号码后,"获取验证码"按钮方可点击:点击"获取验证码"后,按钮进入60s倒计时,效果图如下: 效果图已经有了,接下来就上代码吧! html <el-button @click="getCode()" :class="{'disabled-style':getCodeBtnD

  • vue实现短信验证码登录功能(流程详解)

    无论是移动端还是pc端登录或者注册界面都会见到手机验证码登录这个功能,输入手机号,得到验证码,最后先服务器发送请求,保存登录的信息,一个必不可少的功能 思路 1,先判断手机号和验证是否为空, 2,点击发送验证码,得到验证码 3,输入的验证码是否为空和是否正确, 4,最后向服务发送请求 界面展示 1.准备工作 这个会对input进行封装处理 <template> <div class="text_group"> <div class="input_

  • vue+springboot实现登录验证码

    本文实例为大家分享了vue+springboot实现登录验证码的具体代码,供大家参考,具体内容如下 先看效果图 在login页面添加验证码html 在后端pom文件添加kaptcha依赖 <dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version> </depen

  • vue实现登录页面的验证码以及验证过程解析(面向新手)

    做成之后就 是这个样子 接下来上代码 创建一个组件.显示验证码图片 <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </template> <script>

  • vue实现登录时的图片验证码

    本文实例为大家分享了vue实现登录时的图片验证码的具体代码,供大家参考,具体内容如下 效果图 一.新建vue组件components/identify/identify.vue <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></c

  • Vue 实现登录界面验证码功能

    登录界面 SIdentify 创建验证码组件,实现绘画出图片验证码 <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </template> <script>

  • vue实现图形验证码登录

    本文实例为大家分享了vue实现图形验证码登录的具体代码,供大家参考,具体内容如下 1.效果图 2.在components下面新建文件identify.vue,内容: <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas&

  • vue实现图形验证码

    本文实例为大家分享了vue实现图形验证码的具体代码,供大家参考,具体内容如下 效果图: 或 或 或 代码: 验证码组件: src/common/sIdentify.vue <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canv

  • vue实现手机验证码登录

    本文实例为大家分享了vue实现手机验证码登录的具体代码,供大家参考,具体内容如下 验证码 <template> <div> <el-main> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-fo

  • Spring Security 实现短信验证码登录功能

    之前文章都是基于用户名密码登录,第六章图形验证码登录其实还是用户名密码登录,只不过多了一层图形验证码校验而已:Spring Security默认提供的认证流程就是用户名密码登录,整个流程都已经固定了,虽然提供了一些接口扩展,但是有些时候我们就需要有自己特殊的身份认证逻辑,比如用短信验证码登录,它和用户名密码登录的逻辑是不一样的,这时候就需要重新写一套身份认证逻辑. 开发短信验证码接口 获取验证码 短信验证码的发送获取逻辑和图片验证码类似,这里直接贴出代码. @GetMapping("/code/

  • vue实现登录时图形验证码

    本文实例为大家分享了vue实现登录时图形验证码的具体代码,供大家参考,具体内容如下 效果图: 点击图案可以切换字符 1.新建 Identify.vue 组件 <template>   <div>   <canvas       id="s-canvas"       :width="contentWidth"       :height="contentHeight"></canvas>   <

  • Go+Vue开发一个线上外卖应用的流程(用户名密码和图形验证码)

    图形化验证码生成和验证 功能介绍 在使用用户名和密码登录功能时,需要填写验证码,验证码是以图形化的方式进行获取和展示的. 验证码使用原理 验证码的使用流程和原理为:在服务器端负责生成图形化验证码,并以数据流的形式供前端访问获取,同时将生成的验证码存储到全局的缓存中,在本案例中,我们使用redis作为全局缓存,并设置缓存失效时间.当用户使用用户名和密码进行登录时,进行验证码验证.验证通过即可继续进行登录. 验证码库安装 借助开源的验证码工具库可以生成验证码. 首先,安装开源的验证码生成库: go

  • Vue实现验证码登录的方法实例

    目录 效果展示 第一步:创建验证码组件 第二步:引入验证码组件并注册使用 总结 效果展示 第一步:创建验证码组件 这里是组件的代码,可以自行命名文件名,我这里命名为SIdentify.vue <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight">

  • vue实现web前端登录页数字验证码

    本文实例为大家分享了vue实现web前端登录页数字验证码的具体代码,供大家参考,具体内容如下 1.创建code.js文件夹下面是js代码 function GVerify(options) {     console.log(); // 创建一个图形验证码对象,接收options对象为参数     this.con = document.getElementById(options)     this.options = { // 默认options参数值         id: '', //

随机推荐