您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“Node.JS如何使用純JavaScript生成圖片或滑塊式驗證碼功能”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Node.JS如何使用純JavaScript生成圖片或滑塊式驗證碼功能”這篇文章吧。
有一些Node.JS圖片生成類庫,比如node-captcha等的類庫,需要c/c++程序生成圖片??缙脚_部署不是很方便。這里介紹幾個用純JS實(shí)現(xiàn)的圖片驗證碼生成模塊。
captchapng
用純JavaScript實(shí)現(xiàn)的驗證碼生成模塊。
https://github.com/GeorgeChan/captchapng
安裝簡單,依賴少:
npm install captchapng
示例:
var captchapng = require('captchapng'); app.get('/sign/captcha.png', function(req, res) { var captchaNumber = parseInt(Math.random() * 9000 + 1000) req.session.captcha = captchaNumber var p = new captchapng(80,20, captchaNumber); // width,height,numeric captcha p.color(0, 0, 0, 0); // First color: background (red, green, blue, alpha) p.color(80, 80, 80, 255); // Second color: paint (red, green, blue, alpha) var img = p.getBase64(); var imgbase64 = new Buffer(img,'base64'); res.writeHead(200, { 'Content-Type': 'image/png' }); res.end(imgbase64); })
Express + Captcha
為Express框架設(shè)計的驗證碼生成模塊。
https://github.com/napa3um/node-captcha
安裝&示例:
$ npm install captcha Usage (for Express 4) 'use strict' const express = require('express') const session = require('express-session') const bodyParser = require('body-parser') const captchaUrl = '/captcha.jpg' const captchaId = 'captcha' const captchaFieldName = 'captcha' const captcha = require('./captcha').create({ cookie: captchaId }) const app = express() app.use(session({ secret: 'keyboard cat', resave: false, saveUninitialized: true, })) app.use(bodyParser.urlencoded({ extended: false })) app.get(captchaUrl, captcha.image()) app.get('/', (req, res) => { res.type('html') res.end(` <img src="${ captchaUrl }"/> <form action="/login" method="post"> <input type="text" name="${ captchaFieldName }"/> <input type="submit"/> </form> `) }) app.post('/login', (req, res) => { res.type('html') res.end(` <p>CAPTCHA VALID: ${ captcha.check(req, req.body[captchaFieldName]) }</p> `) }) app.listen(8080, () => { console.log('server started') })
前端滑塊驗證
前端生成軌跡發(fā)送到后端驗證,輸入簡單,但是容易被破解。
以上是“Node.JS如何使用純JavaScript生成圖片或滑塊式驗證碼功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。