web前端入門(mén)到實(shí)戰(zhàn)：實(shí)現(xiàn)圖形驗(yàn)證碼

什么是圖形驗(yàn)證碼

圖形驗(yàn)證碼是驗(yàn)證碼的一種。驗(yàn)證碼（CAPTCHA）是“Completely Automated Public Turing test to tell Computers and Humans Apart”（全自動(dòng)區(qū)分計(jì)算機(jī)和人類(lèi)的圖靈測(cè)試的縮寫(xiě)，是一種區(qū)分用戶是計(jì)算機(jī)還是人的公共全自動(dòng)程序?？梢苑乐梗簮阂馄平饷艽a、刷票、論壇灌水，有效防止某個(gè)***對(duì)某一個(gè)特定注冊(cè)用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試，實(shí)際上用驗(yàn)證碼是現(xiàn)在很多網(wǎng)站通行的方式。

既然圖形驗(yàn)證碼是為了區(qū)分機(jī)器和人之間的操作，那么我們就可以在圖形上繪制一個(gè)只有人可以解答的問(wèn)題。比較常見(jiàn)的是在圖片上生成文字驗(yàn)證碼，然后用戶輸入圖片上的文字吻合則驗(yàn)證通過(guò)。

雖然這種驗(yàn)證方法已經(jīng)漸漸的被其他更先進(jìn)的方法所淘汰了（圖片上的文字依然可以被程序識(shí)別讀?。⑶仪岸松沈?yàn)證碼的方式相較于后端安全性不高，但我們的目的只是為了裝x，提升程序的安全性只是附帶的效果。

登錄表單

首先我們需要在在登錄表單上額外添加用于輸入驗(yàn)證碼的FormItem，并且給圖形驗(yàn)證碼提供一個(gè)canvas容器。有時(shí)候生成的驗(yàn)證碼看不明白，因此需要給驗(yàn)證碼添加點(diǎn)擊事件用以切換驗(yàn)證碼：

web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n： ⑦⑧④-⑦⑧③-零①②，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻）
<Form ref="loginForm" :model="form" :rules="rules">
    <FormItem prop="userName">
        <Input v-model="form.userName" placeholder="請(qǐng)輸入用戶名">
            <span slot="prepend">
                <Icon :size="16" type="person"></Icon>
            </span>
        </Input>
    </FormItem>
    <FormItem prop="password">
        <Input type="password" v-model="form.password" placeholder="請(qǐng)輸入密碼">
            <span slot="prepend">
                <Icon :size="14" type="locked"></Icon>
            </span>
        </Input>
    </FormItem>
    <FormItem prop="valiCode" v-show="this.count">
        <Input v-model="form.valiCode" placeholder="請(qǐng)輸入驗(yàn)證碼">
            <span slot="prepend">
                <Icon :size="14" type="ios-analytics"></Icon>
            </span>
        </Input>
        <div class="canvas" @click="getImgYanzheng">
            <canvas id="canvas"></canvas>
        </div>
    </FormItem>
    <FormItem>
        <Button @click="handleSubmit" type="primary" long>登錄</Button>
    </FormItem>
</Form>

需要用到的屬性

表單需要額外添加valiCode用以記錄用戶輸入的驗(yàn)證碼。此處我們定義當(dāng)用戶登錄失敗一次則需要額外輸入圖形驗(yàn)證碼，因此添加count屬性，當(dāng)?shù)顷懯r(shí)count++，當(dāng)然這樣的處理方式并不是很?chē)?yán)謹(jǐn)，并且用戶刷新頁(yè)面count則會(huì)清零?？梢栽诖颂幙梢栽黾痈嘞拗?，如異地登錄等，由于本案例完全沒(méi)有涉及到后端程序，因此只是簡(jiǎn)單的以count為判斷依據(jù)。

data() {
    return {
      form: {
        userName: "",// 用戶名
        password: "",// 密碼
        valiCode: ""http:// 驗(yàn)證碼
      },
      count: 0, // 登錄次數(shù)
      show_num: [],// 圖形上的文字
    }
}

生產(chǎn)圖形驗(yàn)證碼

頁(yè)面上為canvas容器綁定的方法getImgYanzheng就是在繪制圖形驗(yàn)證碼

。在繪制圖形驗(yàn)證碼時(shí)需要為你的驗(yàn)證碼定義一個(gè)內(nèi)容集合，此處使用的是：A,B,C,E,F,G,H,J,K,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,好,醫(yī),生。字母中剔除了容易誤識(shí)別的幾個(gè)字母并且可以隨意加入文字（因此圖形驗(yàn)證碼也可在做成隨機(jī)生成四個(gè)文字讓用戶點(diǎn)擊，或者生成成語(yǔ)讓用戶填空等等各種形式）。并且忽略用戶大小寫(xiě)，因此需要用到toLowerCase方法。

接下來(lái)就是canvas繪圖的一些技巧了。

canvas繪圖

canvas 元素本身是沒(méi)有繪圖能力的。所有的繪制工作必須在 JavaScript 內(nèi)部完成：

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");

在JavaScript 中使用 id 來(lái)尋找 canvas 元素，然后創(chuàng)建context對(duì)象，getContext("2d") 對(duì)象是內(nèi)建的 HTML5 對(duì)象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。我們可以把canvas 想象成景色而context則是景色呈現(xiàn)的畫(huà)布。

由于繪制驗(yàn)證碼的過(guò)程中是從左往右繪制的，因此需要規(guī)劃好畫(huà)布的使用范圍，另外在驗(yàn)證碼繪制時(shí)還要加上一些隨機(jī)的元素使驗(yàn)證碼不容易被程序識(shí)別。

web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n： 731771211，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻）
getImgYanzheng() {
      var show_num = [];
      var canvas_width = 150; //document.getElementById("canvas").style.width;
      var canvas_height = 30; //document.getElementById("canvas").style.height;
      var canvas = document.getElementById("canvas"); //獲取到canvas的對(duì)象，景色
      var context = canvas.getContext("2d"); //獲取到canvas畫(huà)圖的環(huán)境，景色呈現(xiàn)的畫(huà)布
      canvas.width = canvas_width;
      canvas.height = canvas_height;
      var sCode =
        "A,B,C,E,F,G,H,J,K,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,好,醫(yī),生";
      var aCode = sCode.split(",");
      var aLength = aCode.length; //獲取到數(shù)組的長(zhǎng)度

      for (var i = 0; i <= 3; i++) {
        var j = Math.floor(Math.random() * aLength); //獲取到隨機(jī)的索引值
        var deg = (Math.random() * 30 * Math.PI) / 180; //產(chǎn)生0~30之間的隨機(jī)弧度
        var txt = aCode[j]; //得到隨機(jī)的一個(gè)內(nèi)容
        show_num[i] = txt.toLowerCase();
        var x = 10 + i * 20; //文字在canvas上的x坐標(biāo)
        var y = 20 + Math.random() * 8; //文字在canvas上的y坐標(biāo)
        context.font = "bold 23px 微軟雅黑";

        context.translate(x, y);
        context.rotate(deg);

        context.fillStyle = this.randomColor();
        context.fillText(txt, 0, 0);

        context.rotate(-deg);
        context.translate(-x, -y);
      }
      for (var i = 0; i <= 5; i++) {
        //驗(yàn)證碼上顯示線條
        context.strokeStyle = this.randomColor();
        context.beginPath();
        context.moveTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.lineTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.stroke();
      }
      for (var i = 0; i <= 30; i++) {
        //驗(yàn)證碼上顯示小點(diǎn)
        context.strokeStyle = this.randomColor();
        context.beginPath();
        var x = Math.random() * canvas_width;
        var y = Math.random() * canvas_height;
        context.moveTo(x, y);
        context.lineTo(x + 1, y + 1);
        context.stroke();
      }
      this.show_num = show_num;
    },

驗(yàn)證碼及線條需要一些隨機(jī)的顏色：

randomColor() {
      //得到隨機(jī)的顏色值
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      return "rgb(" + r + "," + g + "," + b + ")";
    }

有了以上兩個(gè)方法，圖形驗(yàn)證碼就已經(jīng)生成完畢了，接下來(lái)就是使用的問(wèn)題了。

使用圖形驗(yàn)證碼

判斷登錄次數(shù)count，如果登錄次數(shù)大于0則需要輸入驗(yàn)證碼：

const self = this;
if (this.count) {
        if (this.form.valiCode) {
            if (this.show_num.join("") != this.form.valiCode.toLowerCase()) {
                self.$Notice.warning({
                    title: "驗(yàn)證碼錯(cuò)誤"
                });
                return;
            }
        } else {
            self.$Notice.warning({
                title: "請(qǐng)輸入驗(yàn)證碼"
            });
            return;
        }
    }

當(dāng)?shù)卿浭r(shí)需要執(zhí)行count++并且刷新驗(yàn)證碼：

self.count++;
self.getImgYanzheng();
self.$Notice.warning({
title: "登陸失敗",
desc: rs.data.msg
});

此時(shí)就完成了一個(gè)圖形驗(yàn)證碼的添加工作，同學(xué)們快裝起來(lái)吧。