使用node生成验证码图片，并进行验证
首先安装依赖：
npm i svg-captcha
const express = require('express')
const svgCaptcha = require('svg-captcha')
const app = express()app.all("*",function(req,res,next){//设置允许跨域的域名，*代表允许任意域名跨域res.header("Access-Control-Allow-Origin","*");//允许的header类型res.header("Access-Control-Allow-Headers","Origin,X-Requested-With,Accept,Content-type");res.header("Access-Control-Allow-Credentials",true);//跨域允许的请求方式res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");res.header("Content-Type","application/json;charset=utf-8")if (req.method.toLowerCase() == 'options')res.sendStatus(200); //让options尝试请求快速结束elsenext();
});app.get('/getInfo', (req, res) => {// 下面这行代码是随机生成验证码图片和文本并返回给客户端 const img = svgCaptcha.create({ size: 6, // 验证码长度ignoreChars: '0o1i', // 验证码字符中排除 0o1icolor: true, // 验证码是否有彩色noise: 1, //干扰线background: '#666' // 背景颜色})console.log(img.text);res.send(img);
})app.use(express.static('public'))
app.listen(80, () => {console.log('http://127.0.0.1')
})
前台代码：
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"><title>验证码测试</title></head><body><div id="box"></div><button id="btn">刷新</button><input type="text" id="ipt" /><span id="span"></span><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">script><script>const box = document.querySelector('#box')const btn = document.querySelector('#btn')const ipt = document.querySelector('#ipt')const span = document.querySelector('#span')// 存放正确的验证码文本let text = ''// 获取验证码图片和文本function getInfo() {$.get('http://127.0.0.1/getInfo', (res) => {// 正确验证码的信息 text = res.text// res.data是一个验证码图片 svg标签box.innerHTML = res.dataconsole.log(text)})}getInfo()btn.addEventListener('click', getInfo)ipt.addEventListener('blur', function (e) {if (this.value.toLowerCase() === text.toLowerCase()) {span.innerHTML = '验证通过'span.style.color = 'green'} else {span.innerHTML = '验证不通过'span.style.color = 'red'}})script>body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！