21xrx.com
2024-09-19 09:53:26 Thursday
登录
文章检索 我的文章 写文章
Node.js实现验证码
2023-07-08 14:42:39 深夜i     --     --
Node js 验证码 实现 安全性 web开发

随着互联网的发展，验证码已经成为了网站和应用程序的重要组成部分。使用验证码可以有效地防止恶意攻击和自动化的攻击程序。

在Node.js中，我们可以使用各种工具和模块来实现验证码。其中，最常用的是Canvas和Jimp。

Canvas是一个具有绘图能力的HTML5元素，通过在画布上绘制图像来实现验证码。我们可以使用Canvas模块在Node.js中创建和操作画布，如下所示：



const { createCanvas } = require('canvas');


const canvas = createCanvas(150, 50);


const context = canvas.getContext('2d');


context.font = '30px Impact';


context.fillText('Hello, world!', 10, 50);


const buffer = canvas.toBuffer('image/png');

Jimp是一个基于JavaScript的图像处理库，可以在Node.js中使用。使用Jimp，我们可以创建和操作图像，如下所示：



const Jimp = require('jimp');


const image = new Jimp(150, 50, '#FFFFFF');


const font = await Jimp.loadFont(Jimp.FONT_M_BITMAP_48_BLACK);


image.print(font, 10, 10, 'Hello, world!').write('image.png');

以上代码中，我们创建一个150x50像素的画布，并在其中绘制文本“Hello, world!”。然后，我们将画布转换为PNG图像格式的缓冲区或保存为本地文件。

要创建验证码，我们可以使用上述方法创建随机字符串，并将其绘制到画布上。还可以添加干扰线、噪点和谐波扰动等效果，以增加验证码的安全性。

以下是完整的Node.js验证码示例代码：



const { createCanvas } = require('canvas');


const Jimp = require('jimp');


const randomstring = require('randomstring');


async function generateCaptcha() {


 const canvas = createCanvas(150, 50);


 const context = canvas.getContext('2d');


 context.fillStyle = '#FFFFFF';


 context.fillRect(0, 0, 150, 50);


 const captcha = randomstring.generate( charset: 'alphanumeric' );


 const font = await Jimp.loadFont(Jimp.FONT_M_BITMAP_48_BLACK);


 const width = Math.max(Jimp.measureText(font, captcha), 80);


 const height = Jimp.measureTextHeight(font, captcha, width);


 const image = new Jimp(width, height, '#FFFFFF');


 image.print(font, 0, 0, captcha);


 // 画干扰线


 for (let i = 0; i < 5; i++) {


  const x1 = Math.round(Math.random() * 20);


  const y1 = Math.round(Math.random() * 40);


  const x2 = Math.round(Math.random() * 20) + 130;


  const y2 = Math.round(Math.random() * 40);


  context.strokeStyle = '#CCCCCC';


  context.beginPath();


  context.moveTo(x1, y1);


  context.lineTo(x2, y2);


  context.stroke();


 }


 // 画噪点


 for (let i = 0; i < 50; i++) {


  const x = Math.round(Math.random() * 150);


  const y = Math.round(Math.random() * 50);


  const color = '#' + randomstring.generate( charset: 'hex' );


  context.fillStyle = color;


  context.fillRect(x, y, 1, 1);


 }


 // 谐波扰动


 let index = 0;


 for (let y = 0; y < 50; y++) {


  for (let x = 0; x < 150; x++) {


   const dx = 10 * Math.sin(y / 10);


   const dy = 10 * Math.cos(x / 10 + index);


   const pixel = context.getImageData(x, y, 1, 1);


   const r = pixel.data[0];


   const g = pixel.data[1];


   const b = pixel.data[2];


   const a = pixel.data[3];


   context.fillStyle = `rgba(${r},${g},${b},${a})`;


   context.fillRect(x + dx, y + dy, 1, 1);


  }


  index += 0.1;


 }


 const buffer = canvas.toBuffer('image/png');


 return captcha;


}


generateCaptcha().then(( buffer ) => {


 console.log('captcha:', captcha);


 console.log('buffer:', buffer);


});

以上代码中，我们使用Canvas和Jimp创建了一个150x50像素的画布，然后根据随机字符串生成验证码，并将其绘制到画布上。我们还添加了干扰线、噪点和谐波扰动等效果，以增加验证码的安全性。最终，我们将画布转换为PNG图像格式的缓冲区并返回。

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复