图形验证码

淩亂°似流年 2021-07-24 19:33 440阅读 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 条评论，440人围观）

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

相关阅读

相关自己实现图形验证码

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

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

相关 SpringBoot生成图形验证码

需求：验证码一码一用，验证之后，不管是成功还是失败，都需要重新获取或者刷新二维码。大致思路：后端生成验证码后还需要生成一个UUID与之对应，存储到缓存（记得添加过期时间），

﹏ヽ暗。殇╰゛Y/ 2024年03月31日 16:59/ 0 赞/ 36 阅读

相关 Java识别图形验证码

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

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

相关图形验证码

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

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

相关 PHP 图形验证码

1.新建一个captcha.php文件，写入下列代码。实现验证码图片： <?php //必须至于顶部,多服务器端记录验证码信息，便于用户输入后做校

超、凢脫俗/ 2023年10月06日 09:23/ 0 赞/ 8 阅读

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

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

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

相关 Spring Security 图形验证码

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

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

相关 java生成图形验证码（两种图形）

方式一：效果图 ![20190819172007916.png][] package com.security.sercritydemo.untils;

刺骨的言语ヽ痛彻心扉/ 2022年01月15日 03:51/ 0 赞/ 228 阅读

相关 java图形验证码实现

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

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

相关图形验证码

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

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