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

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

實際上這類驗證碼的校驗是分為兩個步驟的：

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

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

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

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

需求

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

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

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

以上就是驗證碼的兩個基本要求，所以我們這里就來實現一下看看。

結果

這里就先給大家看看結果吧：

拖動驗證碼示例

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

有了這些內容之后，就可以放到表單里面進行提交了，軌跡數據可以自行加密處理并校驗來判斷其是否合法。

具體實現

下面就具體講解下這個是怎么實現的，實際上核心代碼只有 200 行，下面對整個核心流程進行說明。

既然 Vue 這么火，那我這里就用 Vue 來實現啦，具體的環境配置這里就不再贅述了，需要安裝的有：

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

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

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

vuecreatedrag-captcha

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

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

npminstall--savevue-drag-drop

安裝好了之后我們就可以利用它來實現驗證碼了。

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

這里我們就直接在 App.vue 里面修改內容就好了，在