點選上方“ Python資料科學 ”， 星标公衆号 重磅幹貨，第一時間送達
☞500g+超全學習資源免費領取，幹貨來襲！ 作者： 崔慶才 轉自： 進擊的coder 做網絡爬蟲的同學肯定見過各種各樣的驗證碼，比較進階的有滑動、點選等樣式，看起來好像挺複雜的，但實際上它們的核心原理還是還是很清晰的，本文章大緻說明下這些驗證碼的原理以及帶大家實作一個滑動驗證碼。 我之前做過 Web 相關開發，嘗試對接過 Lavavel 的極驗驗證，當時還開發了一個 Lavavel 包： https://github.com/Germey/LaravelGeetest，在開發包的過程中了解到了驗證碼的兩步校驗規則。 實際上這類驗證碼的校驗是分為兩個步驟的：
- 第一步就是前端的校驗。一般來說，登入注冊頁面在點選送出的時候都會伴随着一個表單送出，在表單送出的時候會有 JavaScript 事件的觸發。如果加入了驗證碼，那麼在表單送出的時候會多加一個額外的驗證，判斷這個驗證碼是否已經成功完成了操作。如果沒有的話，那就直接取消表單的送出，然後順便提示說”您的驗證沒通過，請重新驗證“，諸如此類的話。是以這一步就能防範”君子“之為了。
- 第二步就是服務端的校驗。意思就是說表單送出之後，會有請求發送到伺服器，這個請求中包含了很多資料，比如使用者名、密碼，如果對接了驗證碼的話，還會有額外的驗證碼的值，或者更複雜的加密後的 Token 值，伺服器會對發過來的資訊進行校驗，如果驗證通過，那麼整個請求就成功了，傳回正常的響應，否則傳回錯誤的響應。是以如果想要通過程式來直接構造表單送出的時候，服務端就可以做進一步的校驗，由于送出的驗證碼相關的資訊都是和服務端的 Session 相關聯的，另外再加上一些 CSRF 等的校驗，是以這一步就能防範”小人“之為了。
上面就是驗證碼校驗的兩個階段，一般來說為了安全性，在開發一個網站時需要用戶端和服務端都加上校驗，這樣才能保證安全性。 本文章主要來介紹一下第一個階段，也就是前端校驗的驗證碼的實作，下面來介紹一下拖動驗證碼的具體實作。
需求
那麼前端完成一個合格的驗證碼，究竟需要做成什麼樣子呢？
- 首先驗證碼有個大體的雛形，既然是拖動驗證碼，那就要拖動塊和目标塊，我們需要把拖動塊拖動到目标塊上就算校驗成功。
- 驗證碼的一個功能就是來規避機器的自動操作，是以我們需要通過軌迹來判斷這個拖動過程是真實的人還是機器，是以我們需要記錄拖動的路徑，路徑經過計算之後可以發送到後端進行進一步的分類，比如對接深度學習模型來分類拖動軌迹是否是人。
以上就是驗證碼的兩個基本要求，是以我們這裡就來實作一下看看。
結果
這裡就先給大家看看結果吧：
拖動驗證碼示例 可以看到圖中有一個初始滑塊，有一個目标滑塊，如果把初始滑塊拖動到目标滑塊上才能校驗成功，然後下方再列印拖動的軌迹，包含它的 x、y 坐标。 有了這些内容之後，就可以放到表單裡面進行送出了，軌迹資料可以自行加密處理并校驗來判斷其是否合法。
具體實作
下面就具體講解下這個是怎麼實作的，實際上核心代碼隻有 200 行，下面對整個核心流程進行說明。 既然 Vue 這麼火，那我這裡就用 Vue 來實作啦，具體的環境配置這裡就不再贅述了，需要安裝的有：
- Node.js：https://nodejs.org/en/
- Vue-Cli：https://cli.vuejs.org/zh/
安裝完成之後便可以使用 vue 指令了，建立個項目：
vue create drag-captcha
然後找一張不錯的風景圖，放到 public 目錄下，後面我們會引用它。 另外這裡需要一個核心的包叫做 vue-drag-drop，其 GitHub 位址為： https://github.com/cameronhimself/vue-drag-drop，在目錄下使用此指令安裝：
npm install --save vue-drag-drop
安裝好了之後我們就可以利用它來實作驗證碼了。 首先 vue-drag-drop 提供了兩個元件，一個叫做 Drag，一個叫做 Drop。 前者是被拖動對象，後者是放置目标，我們利用這兩個元件建構兩個滑塊，将 Drag 滑塊拖動到 Drop 滑塊上就成功了。 是以，我們要做的僅僅是把它們兩個聲明出來并添加幾個檢測方法就好了，至于拖動的功能，vue-drag-drop 這個元件已經給我們封裝好了。 這裡我們就直接在 App.vue 裡面修改内容就好了，在 裡面先聲明一下兩個元件：
<template><div id="app"><div id="wrapper" :style="wrapperStyle"><drop class="drop" id="target":class="{ 'over': state.over }"
@dragover="onDragOver"
@dragleave="onDragLeave":style="targetStyle">drop><drag class="drag" id="source":transfer-data="true"
@dragstart="onDragStart"
@dragend="onDragEnd"
@drag="onDrag" v-if="!state.dragged":style="sourceStyle"><div slot="image" id="float" :style="sourceStyle">div>drag>div>div>template>
很清晰了，一個 和一個 元件，裡面綁定了一些屬性，下面對這兩個元件的常用屬性作一下說明。
Drop
對于 Drop 元件來說，它是一個被放置的對象，被拖動滑塊會放到這個 Drop 滑塊上，這就代表拖動成功了。 它有兩個主要的事件需要監聽，一個叫做 dragover，一個叫做 dragleave，分别用來監聽 Drag 對象拖上和拖開的事件。 在這裡，分别對兩個事件設定了 onDragOver 和 onDragLeave 的回調函數，當 Drag 對象放到 Drop 對象上面的時候，就會觸發 onDragOver 對象，當拖開的時候就會觸發 onDragLeave 事件。 那這樣的話我們隻需要一個全局變量來記錄是否已經将滑塊拖動到目标位置即可，比如可以定一個全局變量 state，我們用 over 屬性來代表是否拖動到目标位置。 是以 onDragOver 和 onDragLeave 事件可以這麼實作：
onDragOver() {this.state.over = true
},
onDragLeave() {this.state.over = false
}
Drag
對于 Drag 元件來說，它是一個被拖動的對象，我們需要将這個 Drag 滑塊拖動到 Drop 滑塊上，就代表拖動成功了。 它有三個主要的時間需要監聽： dragstart、drag、dragend，分别代表拖動開始、拖動中、拖動結束三個事件，我們這裡也分别設定了三個回調方法 onDragStart、onDrag、onDragEnd。 對于 onDragStart 方法來說，應該怎麼實作呢？ 這裡應該處理剛拖動的一瞬間的動作，由于我們需要記錄拖動的軌迹，是以聲明一個 trace 全局變量來儲存軌迹資訊，onDragStart 要做的就是初始化 trace 對象為空，另外記錄一下初始的拖動位置，以便後續計算拖動路徑，是以可以實作如下：
onDragStart(data, event) {this.init = {x: event.offsetX,y: event.offsetY,
}this.trace = []
}
對于 onDrag 方法來說，就是處理拖動過程中的一系列拖動動作，這裡其實就是計算目前拖動的偏移位置，然後把它儲存到 trace 變量裡面，是以可以實作如下：
onDrag(data, event) {let offsetX = event.offsetX - this.init.xlet offsetY = event.offsetY - this.init.ythis.trace.push({x: offsetX,y: offsetY,
})
}
對于 onDragEnd 方法來說，其實就是檢測最後的結果了，剛才我們用 state 變量裡面的 over 屬性來代表是否拖動到目标位置上，這裡我們也定義了另外的 dragged 屬性來代表是否已經拖動完成，dragging 屬性來代表是否正在拖動，是以整個方法的邏輯上是檢測 over 屬性，然後對 dragging、dragged 屬性做指派，然後做一些相應的提示，實作如下：
onDragEnd() {if (this.state.over) {this.state.dragging = falsethis.state.dragged = truethis.$message.success('拖動成功')
}else {this.state.dragging = falsethis.state.dragged = falsethis.$message.error('拖動失敗')
}this.state.over = false
}
OK 了，以上便是主要的邏輯實作，這樣我們就可以完成拖動滑塊的定義以及拖動的監聽了。 接下來就是一些樣式上的問題了，對于圖檔的呈現，這裡直接使用 CSS 的 background-image 樣式來設定的，如果想顯示圖檔的某一個範圍，那就用 background-position 來設定，這是幾個核心的要點。 好，這裡的樣式設定其實也可以用 JavaScript 來實作，我們把它們定義為一些計算屬性：
wrapperStyle() {return {width: this.size.width + 'px',height: this.size.height + 'px',backgroundImage: 'url(' + this.image + ')',backgroundSize: 'cover'
}
},
targetStyle() {return {left: this.block.x + 'px',top: this.block.y + 'px'
}
},
sourceStyle() {return {backgroundImage: 'url(' + this.image + ')',backgroundSize: this.size.width + 'px ' + this.size.height + 'px',backgroundPosition: -this.block.x + 'px ' + -this.block.y + 'px'
}
}
另外這裡還有一個值得注意的地方，就是 Drag 元件的 slot 部分：
<div slot="image" id="float" :style="sourceStyle">div>
這部分定義了在拖動過程中随滑鼠移動的圖檔樣式，這裡也和 Drag 滑塊一樣定義了一樣的樣式，這樣在拖動的過程中，就會顯示一個和 Drag 滑塊一樣的滑塊随滑鼠移動。 最後，就是拖拽完成之後，将滑動軌迹輸出出來，這裡我就直接呈現在頁面上了， 區域加入如下定義即可：
<div><p v-if="state.dragged" id="trace">
拖動軌迹：{{ trace }}p>div>
好，以上就是一些核心代碼的介紹，還有一些細節的問題可以完善下，比如滑塊随機初始化位置，以及拖動樣式設定。 最後再看一遍效果：
拖動驗證碼示例 可以看到我們首先拖動了 Drag 滑塊，當 Drag 滑塊拖動到 Drop 滑塊上時，出現了白色描邊，證明已經拖動到目标位置了。 然後松手之後，觸發 onDragEnd 方法，呈現拖動軌迹，整個驗證碼就驗證成功了。 當然這隻是前端部分，如果在這個基礎上添加表單驗證，然後再添加後端校驗，并加上軌迹識别，那可謂是一個完整的驗證碼系統了，在這裡就點到為止啦。 最後如果大家想也仿照實作一下的話，可以參考這個元件： https://github.com/cameronhimself/vue-drag-drop，裡面也介紹了其他的一些屬性和事件，在某些情況下還是很有用的。 擷取源碼 請在公衆号背景回複： 驗證碼 如果覺得不錯，還請大家點選個 在看 。 / 上期中獎者公布 / ☞ 混臉熟贈書規則 恭喜 平凡中的不平凡 同學上期走心留言中獎， 擷取 《機器學習線性代數基礎-Python語言描述》 書籍一本， 請聯系小編擷取， 微信： lucici1990
推薦閱讀
1、手把手教學：提取PDF各種表格文本資料(附代碼)
2、80頁筆記看遍機器學習基本概念、算法、模型，幫新手少走彎路
3、接私活必備的 10 個開源項目！
4、Python 最強編輯器詳細使用指南！
5、2019網際網路月餅哪家強？阿裡走情懷；百度最土豪！
👆關注“資料挖掘工程師”