最近需要用到驗(yàn)證碼驗(yàn)證功能，于是就發(fā)現(xiàn)了這兩個(gè)：
svg-captcha：svg-captcha文檔
koa-session：koa-session文檔
這里的驗(yàn)證碼就是這個(gè)，經(jīng)常在一些網(wǎng)站或者系統(tǒng)登錄填寫(xiě)幾個(gè)字母或者數(shù)字的簡(jiǎn)單驗(yàn)證碼。下面的這個(gè)。
那就直接上代碼咯，來(lái)自代碼搬運(yùn)工的復(fù)制和粘貼~
我服務(wù)端用的是koa2，所以有些方法看到不一樣的是koa2的咯，其實(shí)也都差不多，反正這這倆東西用起來(lái)也很簡(jiǎn)單。
svg-captcha
首先得install上咯
npm install --save svg-captcha? ? ? ? ? ? ? ? // 不管三七二十八先install
let?svgCaptcha?=?require('svg-captcha');? ? ? ? ?// 導(dǎo)入咯?
就是這兩塊，require之后直接就可以使用了，里面配置的話上邊圖片有注釋了，其實(shí)可以在官網(wǎng)文檔直接copy，按照自己需要的參數(shù)修改就好。然后我這邊不是在接口開(kāi)放出去了嘛，然后去看下這個(gè)get請(qǐng)求有沒(méi)有拿到。
這圖能看到，這個(gè)帥的一批的驗(yàn)證碼就出來(lái)了。然后因?yàn)橐驗(yàn)轵?yàn)證碼用來(lái)交互的，和前端校驗(yàn)的，所以這里也用到了一個(gè)session在服務(wù)端保存，關(guān)于cookie和session都是干啥的可以去google~
koa-session文檔
一樣，也是先install上
$?npm?install?koa-session
然后依舊的導(dǎo)入它，然后也是這兩塊，一個(gè)要設(shè)置下簽名，和一個(gè)session的配置，然后下面直接將它實(shí)例化就可以使用了，然后配置的下面的圖，這里是我這邊的配置，具體配置可以去看官方文檔的配置來(lái)自定義
然后就可以直接在接口里面寫(xiě)入了，ctx.session.key = value。
然后去看下前端那邊的使用。一個(gè)簡(jiǎn)單的demo，在頁(yè)面上顯示一個(gè)驗(yàn)證碼，點(diǎn)擊刷新。由于這里驗(yàn)證碼的接口直接返回的圖片，每次獲取請(qǐng)求這個(gè)地址就可以了，那么可以在每次點(diǎn)擊驗(yàn)證碼圖片的時(shí)候去刷新這個(gè)地址，后面加上時(shí)間戳或者隨機(jī)數(shù)啥的都o(jì)k，你鐘意就好~
