做網(wǎng)絡(luò)爬蟲的同學(xué)肯定見過各種各樣的驗(yàn)證碼，比較高級的有滑動、點(diǎn)選等樣式，看起來好像挺復(fù)雜的，但實(shí)際上它們的核心原理還是還是很清晰的，本文章大致說明下這些驗(yàn)證碼的原理以及帶大家實(shí)現(xiàn)一個滑動驗(yàn)證碼。

我之前做過 Web 相關(guān)開發(fā)，嘗試對接過 Lavavel 的極驗(yàn)驗(yàn)證，當(dāng)時還開發(fā)了一個 Lavavel 包：https://github.com/Germey/LaravelGeetest，在開發(fā)包的過程中了解到了驗(yàn)證碼的兩步校驗(yàn)規(guī)則。

實(shí)際上這類驗(yàn)證碼的校驗(yàn)是分為兩個步驟的：

1.第一步就是前端的校驗(yàn)。一般來說，登錄注冊頁面在點(diǎn)擊提交的時候都會伴隨著一個表單提交，在表單提交的時候會有 JavaScript 事件的觸發(fā)。如果加入了驗(yàn)證碼，那么在表單提交的時候會多加一個額外的驗(yàn)證，判斷這個驗(yàn)證碼是否已經(jīng)成功完成了操作。如果沒有的話，那就直接取消表單的提交，然后順便提示說”您的驗(yàn)證沒通過，請重新驗(yàn)證“，諸如此類的話。所以這一步就能防范”君子“之為了。

2.第二步就是服務(wù)端的校驗(yàn)。意思就是說表單提交之后，會有請求發(fā)送到服務(wù)器，這個請求中包含了很多數(shù)據(jù)，比如用戶名、密碼，如果對接了驗(yàn)證碼的話，還會有額外的驗(yàn)證碼的值，或者更復(fù)雜的加密后的 Token 值，服務(wù)器會對發(fā)過來的信息進(jìn)行校驗(yàn)，如果驗(yàn)證通過，那么整個請求就成功了，返回正常的響應(yīng)，否則返回錯誤的響應(yīng)。所以如果想要通過程序來直接構(gòu)造表單提交的時候，服務(wù)端就可以做進(jìn)一步的校驗(yàn)，由于提交的驗(yàn)證碼相關(guān)的信息都是和服務(wù)端的 Session 相關(guān)聯(lián)的，另外再加上一些 CSRF 等的校驗(yàn)，所以這一步就能防范”小人“之為了。

上面就是驗(yàn)證碼校驗(yàn)的兩個階段，一般來說為了安全性，在開發(fā)一個網(wǎng)站時需要客戶端和服務(wù)端都加上校驗(yàn)，這樣才能保證安全性。

本文章主要來介紹一下第一個階段，也就是前端校驗(yàn)的驗(yàn)證碼的實(shí)現(xiàn)，下面來介紹一下拖動驗(yàn)證碼的具體實(shí)現(xiàn)。

需求

那么前端完成一個合格的驗(yàn)證碼，究竟需要做成什么樣子呢？

1.首先驗(yàn)證碼有個大體的雛形，既然是拖動驗(yàn)證碼，那就要拖動塊和目標(biāo)塊，我們需要把拖動塊拖動到目標(biāo)塊上就算校驗(yàn)成功。

2.驗(yàn)證碼的一個功能就是來規(guī)避機(jī)器的自動操作，所以我們需要通過軌跡來判斷這個拖動過程是真實(shí)的人還是機(jī)器，因此我們需要記錄拖動的路徑，路徑經(jīng)過計(jì)算之后可以發(fā)送到后端進(jìn)行進(jìn)一步的分類，比如對接深度學(xué)習(xí)模型來分類拖動軌跡是否是人。

以上就是驗(yàn)證碼的兩個基本要求，所以我們這里就來實(shí)現(xiàn)一下看看。

結(jié)果

這里就先給大家看看結(jié)果吧：

拖動驗(yàn)證碼示例

可以看到圖中有一個初始滑塊，有一個目標(biāo)滑塊，如果把初始滑塊拖動到目標(biāo)滑塊上才能校驗(yàn)成功，然后下方再打印拖動的軌跡，包含它的 x、y 坐標(biāo)。

有了這些內(nèi)容之后，就可以放到表單里面進(jìn)行提交了，軌跡數(shù)據(jù)可以自行加密處理并校驗(yàn)來判斷其是否合法。

具體實(shí)現(xiàn)

下面就具體講解下這個是怎么實(shí)現(xiàn)的，實(shí)際上核心代碼只有 200 行，下面對整個核心流程進(jìn)行說明。

既然 Vue 這么火，那我這里就用 Vue 來實(shí)現(xiàn)啦，具體的環(huán)境配置這里就不再贅述了，需要安裝的有：

Node.js：https://nodejs.org/en/

Vue-Cli：https://cli.vuejs.org/zh/

安裝完成之后便可以使用 vue 命令了，新建個項(xiàng)目：

vuecreatedrag-captcha

然后找一張不錯的風(fēng)景圖，放到 public 目錄下，后面我們會引用它。

另外這里需要一個核心的包叫做 vue-drag-drop，其 GitHub 地址為：https://github.com/cameronhimself/vue-drag-drop，在目錄下使用此命令安裝：

npminstall--savevue-drag-drop

安裝好了之后我們就可以利用它來實(shí)現(xiàn)驗(yàn)證碼了。

首先 vue-drag-drop 提供了兩個組件，一個叫做 Drag，一個叫做 Drop。前者是被拖動對象，后者是放置目標(biāo)，我們利用這兩個組件構(gòu)建兩個滑塊，將 Drag 滑塊拖動到 Drop 滑塊上就成功了。因此，我們要做的僅僅是把它們兩個聲明出來并添加幾個檢測方法就好了，至于拖動的功能，vue-drag-drop 這個組件已經(jīng)給我們封裝好了。

這里我們就直接在 App.vue 里面修改內(nèi)容就好了，在