基於react+koa的圖片驗證碼

滑動圖片驗證碼

基於 react 和 koa2 的一個圖片滑動驗證碼

效果圖

使用

git clone https://gitee.com/darcrandex/image-code.git

// 前端
cd image-code/client
npm i
npm start

// 後端
cd image-code/server
npm i
npm start

業務邏輯

1. 前端請求數據
2. 後臺返回主圖片，和小滑塊圖片
3. 前端交互，滑動以後，獲取滑動的 x 值
4. 將用戶信息和 x 傳給後臺
5. 後臺判斷是否正確，返回信息給前端

後端

這裏主要是圖片處理的問題，嘗試過node-canvas,node-images,node-sharp。可是都存在安裝不了或者須要安裝很麻煩的依賴庫的問題。最後選擇node-gm。基本上能夠知足需求。

不過仍是須要安裝一個依賴庫，GraphicsMagick或者ImageMagick。推薦是GraphicsMagick，但其實ImageMagick也夠用了。

關於安裝ImageMagick。個人環境是windows，除了安裝軟件以外，還須要配置windows 環境變量。網上查一下好了。

前端

前端部分沒有什麼大的問題。只有axios須要配置一下(/src/utils/axios.js)，主要是跨越的問題。若是不使用axios，就根據狀況解決跨域就能夠了。