vue3 canvas验证码和滑块拼图验证

人机认证

在一些资源下载、读取等场景添加人机认证可以防止一些简单的网络攻击。仅介绍两种原生实现。

canvas验证码

通过canvas绘制一直特定的文字并使用线条、颜色混淆。

效果图:

1. verify.js

// verify.js

function GVerify (options) { // 创建一个图形验证码对象，接收options对象为参数
    this.options = { // 默认options参数值
        id: "", // 容器Id
        canvasId: "verifyCanvas", // canvas的ID
        width: "100", // 默认canvas宽度
        height: "30", // 默认canvas高度
        type: "blend", // 图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母
        code: ""
    }

    if (Object.prototype.toString.call(options) == "[object Object]") {// 判断传入参数类型
        for (var i in options) { // 根据传入的参数，修改默认参数值
            this.options[i] = options[i];
        }
    } else {
        this.options.id = options;
    }

    this.options.numArr = "0,1,2,3,4,5,6,7,8,9".split(",");
    this.options.letterArr = getAllLetter();

    this._init();
    this.refresh();
}

GVerify.prototype = {
    /** 版本号* */
    version: '1.0.0',

    /** 初始化方法* */
    _init: function () {
        var con = document.getElementById(this.options.id);
        var canvas = document.createElement("canvas");
        this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "100";
        this.options.height = con.offsetHeight > 0 ? con.offsetHeight : "30";
        canvas.id = this.options.canvasId;
        canvas.width = this.options.width;
        canvas.height = this.options.height;
        canvas.style.cursor = "pointer";
        canvas.innerHTML = "您的浏览器版本不支持canvas";
        con.appendChild(canvas);
        var parent = this;
        canvas.onclick = function () {
            parent.refresh();
        }
    },

    /** 生成验证码* */
    refresh: function () {
        this.options.code = "";
        var canvas = document.getElementById(this.options.canvasId);
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
        } else {
            return;
        }

        ctx.textBaseline = "middle";

        ctx.fillStyle = randomColor(180, 240);
        ctx.fillRect(0, 0, this.options.width, this.options.height);

        if (this.options.type == "blend") { // 判断验证码类型
            var txtArr = this.options.numArr.concat(this.options.letterArr);
        } else if (this.options.type == "number") {
            var txtArr = this.options.numArr;
        } else {
            var txtArr = this.options.letterArr;
        }

        for (var i = 1; i <= 4; i++) {
            var txt = txtArr[randomNum(0, txtArr.length)];
            this.options.code += txt;
            ctx.font = randomNum(this.options.height / 2, this.options.height) + 'px SimHei'; // 随机生成字体大小
            ctx.fillStyle = randomColor(50, 160); // 随机生成字体颜色
            ctx.shadowOffsetX = randomNum(-3, 3);
            ctx.shadowOffsetY = randomNum(-3, 3);
            ctx.shadowBlur = randomNum(-3, 3);
            ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
            var x = this.options.width / 5 * i;
            var y = this.options.height / 2;
            var deg = randomNum(-30, 30);
            /** 设置旋转角度和坐标原点* */
            ctx.translate(x, y);
            ctx.rotate(deg * Math.PI / 180);
            ctx.fillText(txt, 0, 0);
            /** 恢复旋转角度和坐标原点* */
            ctx.rotate(-deg * Math.PI / 180);
            ctx.translate(-x, -y);
        }
        /** 绘制干扰线* */
        for (var i = 0; i < 4; i++) {
            ctx.strokeStyle = randomColor(40, 180);
            ctx.beginPath();
            ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
            ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
            ctx.stroke();
        }
        /** 绘制干扰点* */
        for (var i = 0; i < this.options.width / 4; i++) {
            ctx.fillStyle = randomColor(0, 255);
            ctx.beginPath();
            ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI);
            ctx.fill();
        }
    },

    /** 验证验证码* */
    validate: function (code) {
        var code = code.toLowerCase();
        var v_code = this.options.code.toLowerCase();
        if (code == v_code) {
            return true;
        } else {
            return false;
        }
    }
}

/** 生成字母数组* */
function getAllLetter () {
    var letterStr = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";
    return letterStr.split(",");
}

/** 生成一个随机数* */
function randomNum (min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}

/** 生成一个随机色* */
function randomColor (min, max) {
    var r = randomNum(min, max);
    var g = randomNum(min, max);
    var b = randomNum(min, max);
    return "rgb(" + r + "," + g + "," + b + ")";
}

export default GVerify;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

2. 在组件中引入verify.js并初始化 (vue3)

<template>
    <div class="verify">
        <p id="picyzm"/>
        <input type="text" v-model="inputCode" ref="inputRef" autofocus @keyup="startVerify"/>
    div>
template>

<script setup>
import { ref, onMounted } from 'vue';
import GVerify from './verify';

const inputCode = ref(''); // input框输入内容
const verifyValue = ref(null); // 验证码对象实例

// 开始验证
const startVerify = () => {
    if(inputCode.value.length < 4) return;
    const res = verifyValue.value.validate(inputCode.value);
    if (res) {
        alert('校验通过');
    }
    verifyValue.value.refresh();
    inputCode.value = '';
}

onMounted(() => {
    verifyValue.value = new GVerify({
        id: "picyzm", // 绘制验证码的区域id
        type: "blend"
    });
})
script>

<style lang='scss' scoped>
.verify {
    display: flex;
    align-items: center;

    p {
        width: 100px;
        height: 30px;
        border: 1px solid #8b79ec;
        margin-right: 10px;
    }

    input {
        width: 80px;
        height: 30px;
        border-radius: 8px;
        border: 1px solid #ccc;
        outline: none;
        font-size: 12px;
        text-indent: 10px;
        letter-spacing: 2px;
        box-sizing: border-box;
    }
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

图片滑块验证码

通过将两个相同的canvas来裁剪出不同的形状，一个裁剪为拼图， 一个裁剪为缺少拼图的背景，再将其进行位移。

当用户拖动滑块时实际上是通过两个canvas使之重合，拼图自然就会对上背景的空白区域。

效果图：

含有图片svg等，已上传到 github 仓库