圖形驗證碼

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

10年積累的成都網(wǎng)站制作、網(wǎng)站設(shè)計、外貿(mào)網(wǎng)站建設(shè)經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先做網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有桑植免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

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

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

登錄表單

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

   
     
       
         
       
     
   
   
     
       
         
       
     
   
   
     
       
         
       
     
     

       
     
   
   
     登錄
   

需要用到的屬性

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

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

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

頁面上為canvas容器綁定的方法getImgYanzheng就是在繪制圖形驗證碼

。在繪制圖形驗證碼時需要為你的驗證碼定義一個內(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ī),生。字母中剔除了容易誤識別的幾個字母并且可以隨意加入文字（因此圖形驗證碼也可在做成隨機生成四個文字讓用戶點擊，或者生成成語讓用戶填空等等各種形式）。并且忽略用戶大小寫，因此需要用到toLowerCase方法。

接下來就是canvas繪圖的一些技巧了。

canvas繪圖

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

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

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

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

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的對象，景色
    var context = canvas.getContext("2d"); //獲取到canvas畫圖的環(huán)境，景色呈現(xiàn)的畫布
    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ù)組的長度

    for (var i = 0; i <= 3; i++) {
     var j = Math.floor(Math.random() * aLength); //獲取到隨機的索引值
     var deg = (Math.random() * 30 * Math.PI) / 180; //產(chǎn)生0~30之間的隨機弧度
     var txt = aCode[j]; //得到隨機的一個內(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++) {
     //驗證碼上顯示線條
     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++) {
     //驗證碼上顯示小點
     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;
   },

驗證碼及線條需要一些隨機的顏色：

randomColor() {
    //得到隨機的顏色值
    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 + ")";
   }

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

使用圖形驗證碼

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

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

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

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

此時就完成了一個圖形驗證碼的添加工作，同學(xué)們快裝起來吧。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站標(biāo)題：web前端制作圖形驗證碼-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://weahome.cn/article/edjsc.html