图形验证码

淩亂°似流年 2021-07-24 19:33 477阅读 0赞

1、安装
    	cnpm install --save svg-captcha
    
    2、导入
    	var svgCaptcha = require('svg-captcha');
    
    3、使用
    	var captcha = svgCaptcha.create({
    		
    	    size: 4,   			  随机字符串的长度
    	    ignoreChars: '0o1i',  忽略不出现的随机字符串
    	    noise: 1,   		  干扰线的条数
    	    color: true,  	      字符随机颜色
    	    background: '#cc9966', 图片背景色
    	    width: , 
    	    height: ,
    	    fontSize: , 
    	    charPreset: string  预置字符串内容
    
    	});
    
    4、生成
    	captcha.text:图形验证码的内容
    	captcha.data:图形验证码svg
    
    5、后台发送
    	res.type('svg');   设置返回文件类型,不设置将返回普通字符串,使用innerHTML才能解析
    	res.send(captcha.data);
    	
    6、前台使用
    	<img src='路径' />
    		src会请求url路径
    		配合点击事件在路径后面加上如时间戳等,区别不同请求,否则只会返回一次
    		
    7、前后端验证
    	后台通过session,将captcha.text存入
    	前台输入验证码内容后进行比对

代码示例:  
后台

引入省略
    router.get('/api/captcha', (req, res)=>{ 
        var captcha = svgCaptcha.create({ 
            size:4,
            color:true,
            noise:2,
            ignoreChars: '0o1i'
        });
    
        req.session.captcha=captcha.text.toLocaleLowerCase();
        res.type('svg');
        res.send(captcha.data);
    });

前台:

<img
        ref="captcha"
        class="get-verification"
        src="http://localhost:3000/api/captcha"
        alt="captcha"
        @click.prevent="getCaptcha()"
      >
      ...
      getCaptcha()
      { 
        this.$refs.captcha.src="http://127.0.0.1:3000/api/captcha?time="+new Date();
    
      }

发表评论取消回复

表情：

评论列表（有 0 条评论，477人围观）

还没有评论，来说两句吧...

相关阅读

相关自己实现图形验证码

如果不想重复造轮子，参考上一篇文章：[SpringBoot生成图形验证码\_Muscleheng的博客-CSDN博客][SpringBoot_Muscleheng_-CSDN]

水深无声/ 2024年03月31日 17:01/ 0 赞/ 78 阅读

相关 Java识别图形验证码

我们在登录各种网站时可能会遇到一些图形验证码，笔者今天给大家介绍一门技术，可以轻松破解图形验证码！常见的图形验证码如下： ![67518cad3a724c7e994415c3

灰太狼/ 2024年03月17日 23:08/ 0 赞/ 101 阅读

相关图形验证码

package com.richerway.luxiportal.businessnews.controller; import com.richer

心已赠人/ 2024年02月19日 12:41/ 0 赞/ 53 阅读

相关 Java生成图形验证码

package com.mypro.api.controller; import com.mypro.api.model.ReturnNode;

深碍√TFBOYSˉ_/ 2023年10月12日 23:02/ 0 赞/ 13 阅读

相关 SpringBoot实现图形验证码

前言在Web应用程序中，为了保护用户信息的安全性，验证码已经成为了一个非常普遍的安全措施，而Hutool-captcha是一款非常优秀的开源图形验证码工具，简单易用，提

我会带着你远行/ 2023年10月09日 23:18/ 0 赞/ 30 阅读

相关图形验证码组件

hutool的验证码已经够用，但有些地方需要自定义（画布超界、去除一些字符），所以对此进行了扩展。依赖 <dependency> <groupId>

柔光的暖阳◎/ 2023年06月25日 01:59/ 0 赞/ 11 阅读

相关 java生成图形验证码（算数运算图形验证码 + 随机字符图形验证码）

平凡也就两个字: 懒和惰; 成功也就两个字: 苦和勤; 优秀也就两个字: 你和我。跟着我从0学习JAVA、spring全家桶和linux运维等知识，带你从懵懂少年

╰+攻爆jí腚メ/ 2022年12月28日 09:16/ 0 赞/ 342 阅读

相关 Spring Security 图形验证码

一、图形验证码信息类 package com.xh.security.validate.code; import java.awt.image.

本是古典何须时尚/ 2022年05月20日 07:21/ 0 赞/ 270 阅读

相关 java图形验证码实现

正文今天来学习下图形验证码的生成，首先依赖开源组件： <dependency> <groupId>com.github.penggle</gro

比眉伴天荒/ 2022年01月07日 07:19/ 0 赞/ 434 阅读

相关图形验证码

1、安装 cnpm install --save svg-captcha 2、导入 var svgCaptcha = requir

淩亂°似流年/ 2021年07月24日 19:33/ 0 赞/ 478 阅读