图片验证码生成Servlet源代码
验证码、kcaptcha

i用Ajax制作带图形验证码的登录页面作者:Steel.MaMail: steel.ma@steel.ma@MSN: Motorola_8088@Blog: /iamsteelma/steelma一、前言在本笔记的前篇《自定义标签制作》中,已经详细描述了环境的配置以及一个最简单的自定义标签的制作方法,本篇将讲如何制作一个最常用的,带参数的自定义的标签。
本处,为了使用图形界面,必须先下载kaptcha图形验证组件,可以在/p/kaptcha/ 下载。
目前最新版本是2.3版。
二、配置Kaptcha的使用环境Kaptcha的配置是非常简单的,将其释放出来后,在文件夹下会有Kaptcha-2.3.jar和Kaptcha-2.3-jdk1.4.jar 2个jar包,如果用的是JDK1.4,则必须用后者,JDK1.5开始,用前者。
Kaptcha安装也比较简单,直接拷贝到webapps/xxx/web-inf/lib下即可。
然后修改web.xml,加入对Kaptcha的映射配置<servlet><servlet-name>Kaptcha</servlet-name><servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servle t-class></servlet><servlet-mapping><servlet-name>Kaptcha</servlet-name><url-pattern>/kaptcha.jpg</url-pattern></servlet-mapping>以上就完成了对Kaptcha的配置。
使用起来也很方便,在html/jsp中,直接用<img src="kaptcha.jpg" />即可显示图形验证码图片,在servlet中,调用 String xxx = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY)即可取得真实的验证码文本。
Java Web网站通用图形验证码的实现

软件 的读取 。 下 面利用 比较简易 的方式 实现 了网站验证 码功 能 ,具有
一
‘ rjv . .up tt a  ̄ otaa oO tuS em; mp i r ‘ rjv .iR n o i otaa t.a d m; mp u l
定 的通 用 性 。
‘ rjvxi e I eO; i otaa . g i. gl mp ma o ma
把密码数据化盗取。
2 验 证 码技 术 的发展
经历 了 3个 阶段 :早期 是使 用数 字形 式显 示在 网页上 , 恶意 者可 以很 容易地通 过复制粘贴 来输入 ( 或者 直接使 用软
件来获取) ,接 着 出现 了规 则 数 字 图 片 ,也 就 是 直 接 用 网 页 产
()创建服 务器端程序 C ek o e 产 生带有 随机验证 码 2 h cC d ,
动 程 序 。 通 过 验 证 码 可 以防 止 :恶 意 破 解 密 码 、 刷 票 、 论 坛
<nu p = u mt vle ”确 定 ”> ip ty e ”sb i t ” au:
</o > fr m
程序运行 如图 1 所示 。
灌水 ,有效 防止某个黑 客对某一 个特定 注册用 户用特 定程序 暴 力破解方 式进行不 断 的登 录尝试 ,验 证码通 常使用 一些线 条 和一些不 规则 的字符组成 ,主要作 用是为 了防止一 些黑客
验 证 码 :<n u p = et nme ”c ek cd” > i ty e ”t ” a : hc _ oe p t x
<i g sc m r =” s r l tChe kCo ” > e ve/c de
户频 繁发送相 同信息造成 不 良影 响 ,或者 通过不 断尝试 盗取
使用img标签显示用base64编码的验证码图片

使⽤img标签显⽰⽤base64编码的验证码图⽚使⽤img标签显⽰⽤base64编码的验证码图⽚在以下代码的括号处改成对应的base64字符串,即可显⽰<img src="data:image/png;base64,(此处写base64编码字符串2)">相关内容<img src="data:,(⽂本数据)" ><img src="data:text/plain,(⽂本数据)" ><img src="data:text/html,(HTML代码)" ><img src="data:text/html;base64,(base64编码的HTML代码)" ><img src="data:text/css,(CSS代码)" ><img src="data:text/css;base64,(base64编码的CSS代码)" ><img src="data:text/javascript,(Javascript代码)" ><img src="data:text/javascript;base64,(base64编码的Javascript代码)" ><img src="data:image/gif;base64,(base64编码的gif图⽚数据)" ><img src="data:image/png;base64,(base64编码的png图⽚数据)" ><img src="data:image/jpeg;base64,(base64编码的jpeg图⽚数据)" ><img src="data:image/x-icon;base64,(base64编码的icon图⽚数据)" >。
什么是servlet?servlet的作用

什么是servlet?servlet的作⽤
看到这个问题以前我学习javaEE的时候开发步骤(这⾥是⼤致配置和流程):
1.在web.xml中配置servlet和servletMapping
2.书写servlet标签⾥⾯配置的类,类需要继承HttpServlet,然后复写⾥⾯的doget,dopos⽅法(当然还有init,destory⽅法)
3.启动tomcat服务器,访问对应的路径就能访问到对应的doget,dopost⽅法
但是这个web.xml和对应的类以及tomcat到底有什么关系呢?在后⾯到底做了什么呢?
⾸先我们要理清⼀个逻辑:浏览器http请求------》tomcat服务器-------》到达servlet-----》执⾏doget,dopost⽅法----》返回数据从这个逻辑可以看出tomcat才是和客户端打交道的:
他监听了端⼝,请求过来后,根据url信息和web.xml配置⽂件匹配,确定要将请求交给哪个servlet去处理,servlet处理请求然后返回给tomcat,tomcat在把数据返回给⽤户。
在看servlet源代码:
在看httpServlet:
从名字我们就不难理解,HttpServlet是Servlet对http请求协议处理的实现
那我们就可以得出Servlet接⼝就是处理⽹络请求的⼀套规范,他负责连接web服务器(如tomcat服务器),交互式的⽣成动态的web 内容。
python中captcha的用法

python中captcha的用法Captcha是一种用来防止网络机器人恶意攻击的技术,它一般应用在需登录的应用程序或网站上,以确保用户的真实性和安全性。
Python是一个强大的编程语言,它可以使用不同的库和框架来生成、显示和验证Captcha。
在本文中,我们将介绍Python中Captcha的用法,其中包括Captcha的生成、显示和验证。
一、生成Captcha的库在Python中有许多库可以用来生成Captcha,比如:1. captcha:Captcha为Python提供了一种生成验证码图像的方法,其中包括数字、字母、数字和字母。
这个库使用Pillow图像库来生成Captcha图像。
```pythonpip install captcha``````pythonfrom captcha.image import ImageCaptchaimport randomcaptcha_text = ''for i in range(4):captcha_text += str(random.randint(0, 9))image = ImageCaptcha(width=100, height=40)captcha_image = image.generate(captcha_text)captcha_image_file = open('captcha_image.png', 'wb')captcha_image_file.write(captcha_image)captcha_image_file.close()```2. Pillow:```pythonfrom PIL import Image, ImageDraw, ImageFontimport randomfrom io import BytesIOfrom flask import Flask, request, send_fileapp = Flask(__name__)在上面的代码中,我们创建了一个Flask应用程序,它为生成图像的URL提供了一个路由。
DAY6图形验证码以及短信验证码的处理

DAY6图形验证码以及短信验证码的处理到我们点击项⽬⾸页的注册时,会弹出⼀个注册页⾯,⾥⾯需要我们后台提供图形验证码以及⼿机验证码下⾯我们来依次处理图形验证码的处理我们先来简单的做个分析⾸先当我们点击注册时,我们需要给到通过浏览器给服务器发送⼀个随机码来进⾏下次请求时双⽅的校验,⽤浏览器的Javascript⽣成UUID来解决,通过GET请求发送(通过两个⽅⾯来考虑,第⼀个这个本⾝不需要加密,第⼆个是通过img标签⾥src默认为GET)当我们给服务器发送了UUID之后,服务器对UUID进⾏保存,然后校验UUID,然后⽣成图⽚验证码(图⽚验证码分为三个部分,⽣成的图⽚验证码名字,图⽚⾥的验证码⽂本,画上了验证码的图⽚),我们需要把UUID保存在redis中,且作为保存值的键,然后提取图⽚验证码的验证码⽂本作为保存的值。
然后我们再给浏览器返回画上了验证码的图⽚就可以了。
这样当⽤户通过返回的图形验证码图⽚⾥的⽂字输⼊了⽂本验证码后再次给到服务器,这⾥浏览器还需要将UUID和输⼊⽂本的⽂本验证码⼀起给到服务器。
因为服务器需要通过给到的UUID作为取值的键来取上次保存的数据,也是做进⼀步的校验和实现状态保存,你是上次给我UUID的那个浏览器。
只有当两次请求给到服务器的UUID⼀致时才能够进⾏上次⽣成图⽚验证码⽂本的提取⼤致分析完之后我们就开始写代码浏览器前端的处理:我们来到我们⾸页的HTML⽂件,打开我们项⽬下的index.html,然后找到我们图形验证码的相关内容,最初⽂件的img标签, src ⾥⾯有⼀堆数据,我们先复制⼀下最初的img标签,复制了然后注释掉,然后再进⾏删除然后Ctrl加左键点击函数来到函数的内容页⾯,这⾥⾯就有我们图⽚验证码的相关内容:最初的⽂件⾥function generateImageCode() {}⾥⾯是空的,这⾥我把代码补充了,代码我也复制再下⾯并做个简单的解释;function generateImageCode() {imageCodeId = generateUUID() #⽣成UUID,⽂件的最下⾯有⽣成UUID的函数,这⾥只是函数的调⽤和⽤新的变量来对imageCOdeId变量进⾏覆盖var url = "/passport/imageCode?imageCodeId="+ imageCodeId #⾃定义⼀个URL地址的变量,后台先创建对应的视图,然后再填写对应的视图URL加上?kv 将UUID通过GET请求给到服务器后台$(".get_pic_code").attr("src",url) #将构造好的URL给到url}⽂件后⾯⽣成UUID的函数后台创造新的视图函数:⾸先在我们的moduls⽂件夹⾥⾯再创建⼀个新的Python⽂件夹(passport)⽤来存放我们登录注册相关的相关内容,然后建⽴⼀个叫views 的Python⽂件来存放相关的视图函数然后就是在__init__⾥⾯写⼊蓝图三步,这⾥我们需要在实例化的时候加⼊url_prefix,也就是前缀,⼀定要记得在前缀最开始加上反斜杠/完成之后再在我们项⽬的info的__init__⽂件夹,然后导⼊注册蓝图完成之后来到我们的视图函数页⾯进⾏视图函数的编写,这⾥先简单的编写⼀下路由和函数就可以了,后⾯我们再进⾏补全,这⾥主要是为了补全我们前端的URL地址:当我们完成对前端⽂件的修改后,再次执⾏主⽂件并点击主页⾯的注册,然后后端查看请求就可以看到我们的UUID 了,当点击图⽚验证码时会刷新请求出现携带不同的UUID的请求 :这样我们图形验证码前端HTML⽂件的修改就完成了后端代码的处理(对应视图函数的编写):当我们去写项⽬的视图函数时需要在我们函数的⽂本注释⾥⾯写上我们的思路以及相应的实现步骤,这样⽅便我们后续代码的编写,这是⼗分重要的。
验证码实现原理
验证码实现原理验证码实现原理验证码是指在用户注册、登录、找回密码等操作中,为了防止机器人恶意攻击或者恶意注册,需要进行验证的一种方式。
常见的验证码包括数字验证码、图形验证码、短信验证码等。
那么验证码是如何实现的呢?一、数字验证码的实现原理数字验证码一般是由4-6个数字组成的,下面介绍数字验证码的实现原理:1.生成验证码:服务器生成一个不重复的随机验证码,并将此验证码存入session中,同时将验证码展示在客户端需要填写验证码的位置上。
2.验证验证码:当用户填写验证码提交表单时,客户端通过AJAX将客户端填写的验证码发送到服务器端进行验证,服务器通过session中存储的验证码进行比对,如果一致则验证通过,否则验证失败。
二、图形验证码的实现原理图形验证码一般是显示一张由数字、字母或图形组成的图片,并要求用户输入正确的验证码。
下面介绍图形验证码的实现原理:1.生成验证码:服务器生成一个不重复的随机字符串,然后将这段字符串绘制成一张图片,并将此验证码存入session中,同时将验证码图片展示在客户端需要填写验证码的位置上。
2.验证验证码:当用户填写验证码提交表单时,客户端通过AJAX将客户端填写的验证码发送到服务器端进行验证,服务器通过session中存储的验证码进行比对,如果一致则验证通过,否则验证失败。
三、短信验证码的实现原理短信验证码是指向用户发送一条短信,短信中包含验证码,并让用户填写正确的验证码。
下面介绍短信验证码的实现原理:1.生成验证码:服务器生成一个不重复的随机数字,并将此验证码存入session中,同时向用户注册的手机号发送一条短信,短信中包含验证码。
2.验证验证码:用户填写收到的短信验证码,并提交表单,客户端通过AJAX将客户端填写的验证码发送到服务器端进行验证,服务器通过session中存储的验证码进行比对,如果一致则验证通过,否则验证失败。
总结:以上就是常见验证码实现的原理,不同的验证码实现方式有不同的验证过程,但都是为了防止机器人恶意攻击或者恶意注册而设置的。
captcha.image 验证码原理
captcha.image 验证码原理验证码作为一种常用的安全机制,在许多互联网应用中发挥着重要的作用。
captcha.image验证码作为其中的一种,它通过生成并显示包含复杂图案和数字的图像,要求用户进行识别和输入,以防止自动化脚本的攻击。
本文将介绍captcha.image验证码的原理及其实现方式。
一、基本原理captcha.image验证码的基本原理是通过设计一组随机产生的图像、文本、数字、线条和形状等元素,并在其中隐藏一定的规则或规律,使得用户难以通过自动化工具进行识别。
验证码生成器会根据预设的规则生成一组验证码图片,并存储在服务器端。
当用户提交表单时,服务器端会获取到用户输入的验证码,并与生成的验证码进行比对,以验证用户是否为真实的人。
二、生成过程captcha.image验证码的生成过程主要包括以下几个步骤:1.随机选择验证码图片尺寸和背景颜色,可以使用常见的白色或黑色背景。
2.根据预设规则随机生成图像元素,包括线条、形状、字符、数字等。
可以使用各种算法和技术来确保生成的验证码具有足够的复杂性和难以识别的特点。
3.在生成的图像中添加干扰元素,例如随机位置的线条、随机大小和颜色的噪点等,以提高验证码的不可预测性和安全性。
4.将生成的验证码图片保存到服务器端,供用户查看和输入。
三、识别过程用户在查看验证码图片后,需要输入正确的验证码并提交表单。
服务器端会对用户输入的验证码进行验证,并与生成的验证码进行比对。
如果用户输入的验证码与生成的验证码一致,则验证通过;否则验证失败。
captcha.image验证码的实现方式有多种,其中一种常见的方法是使用图像处理库和机器学习算法。
图像处理库可以用于生成和优化验证码图片,而机器学习算法则可以用于训练模型,以便自动识别验证码图片中的字符和数字。
此外,还可以使用其他技术,如哈希算法和加密技术来保护验证码图片的安全性。
四、优化与挑战captcha.image验证码虽然具有一定的安全性和有效性,但在实际应用中仍存在一些挑战和优化空间:1.验证码图片的复杂性和难以识别程度需要适度平衡,否则可能导致用户体验下降。
python识别验证码ocr_Python爬虫过程中验证码识别的三种解决方案
python识别验证码ocr_Python爬⾍过程中验证码识别的三种解决⽅案在Python爬⾍过程中,有些⽹站需要验证码通过后⽅可进⼊⽹页,⽬的很简单,就是区分是⼈阅读访问还是机器爬⾍。
验证码问题看似简单,想做到准确率很⾼,也是⼀件不容易的事情。
为了更好学习爬⾍,后续推⽂中将会更多介绍爬⾍问题的解决⽅案。
本篇推⽂将分享三种解决验证码的⽅法,如果你有⽐较好的⽅案,欢迎留⾔区讨论交流,共同进步。
1.pytesseract很多⼈学习python,不知道从何学起。
很多⼈学习python,掌握了基本语法过后,不知道在哪⾥寻找案例上⼿。
很多已经做案例的⼈,却不知道如何去学习更加⾼深的知识。
pytesseract是google做的ocr库,可以识别图⽚中的⽂字,⼀般⽤在爬⾍登录时验证码的识别,在安装pytesseract环境过程中会遇到各种坑的事情,如果你需要安装,可以按照如下流程去做,避免踩坑。
下⾯以 mac为例。
1.安装⽅法pip install pytesseract2.此外,还需安装Tesseract,它是⼀个开源的OCR引擎,能识别100多种语⾔。
brew install tesseract3.查看安装位置为brew list tesseract/usr/local/Cellar/tesseract/4.1.1/bin/tesseract/usr/local/Cellar/tesseract/4.1.1/include/tesseract/ (19 files)/usr/local/Cellar/tesseract/4.1.1/lib/libtesseract.4.dylib/usr/local/Cellar/tesseract/4.1.1/lib/pkgconfig/tesseract.pc/usr/local/Cellar/tesseract/4.1.1/lib/ (2 other files)/usr/local/Cellar/tesseract/4.1.1/share/tessdata/ (35 files)4.配置环境变量export TESSDATA_PREFIX=/usr/local/Cellar/tesseract/4.1.1/share/tessdataexport PATH=PATH:TESSDATA_PREFIX5.如何出现如下报错'TesseractNotFoundError: tesseract is not installed or it's not in your PATH'6.修改pytesseract.py的cmd'tesseract_cmd = '/usr/local/Cellar/tesseract/4.1.1/bin/tesseract''先验证⼀个简单的验证码代码如下from PIL import Image,ImageFilterimport pytesseractpath ='/Users/****/***.jpg'captcha = Image.open(path)result = pytesseract.image_to_string(captcha)print(result)51188再换⼀张试⼀下输⼊代码后,结果错误输出为1364由此看出,pytesseract对于简单⽅法有效,并不像有些⼈写的这么好,当然可以通过灰度、⼆值等⽅法,效果并不是很理想,稍微复杂的需要寻找其他解决⽅案,如果解决上述问题呢,我们看下⾯的解决⽅案。
asp.netcore配合vue实现后端验证码逻辑
core配合vue实现后端验证码逻辑⽬录概述部分原理源码概述⽹上的前端验证码逻辑总感觉不安全,验证码建议还是使⽤后端配合验证。
如果产品确定可以上⽹的话,就可以使⽤腾讯,百度等第三⽅验证,对接⽅便。
但是产品可能内⽹部署,就必须⾃⼰写了。
本⽂章就是基于这⼀点来实现的。
前端验证码显⽰⼀个图⽚,后端⽣成图⽚。
部分原理1.前端调⽤⽣端获取图⽚时,传⼊⼀个roomID,后端⽣成⼀个4位验征码,放⼊redis中。
然后⽣成⼀个图⽚返回。
2.前端显⽰图⽚,登录时将roomID和填写的验证码,⼀并提交,登录接⼝根据roomId从redis中取出验证码判断是否正确。
这样就相当于后端验证了。
⼤家觉得有问题什么,可以进⾏评论。
谢谢。
源码前端部分代码<template><div class="login-container"><vue-particlescolor="#ffffff":particleOpacity="0.7":particlesNumber="50"shapeType="circle":particleSize="4"linesColor="#dedede":linesWidth="1":lineLinked="true":lineOpacity="0.4":linesDistance="150":moveSpeed="2":hoverEffect="true"hoverMode="grab":clickEffect="true"clickMode="push"></vue-particles><el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left"><div class="title-container"><h3 class="title">智能综合管理系统</h3></div><el-form-item prop="username"><span class="svg-container"><svg-icon icon-class="user" /></span><el-input ref="username" v-model="ername" placeholder="⽤户名" name="username" type="text" tabindex="1" autocomplete="on" /> </el-form-item><el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual><el-form-item prop="password"><span class="svg-container"><svg-icon icon-class="password" /></span><el-input:key="passwordType"ref="password"v-model="loginForm.password":type="passwordType"placeholder="密码"name="password"tabindex="2"autocomplete="on"@keyup.native="checkCapslock"@blur="capsTooltip = false"@keyup.enter.native="handleLogin"/><span class="show-pwd" @click="showPwd"><svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /></span></el-form-item></el-tooltip><el-form-item prop="yzm"><span class="svg-container"><svg-icon icon-class="password" /></span><el-input type="text" v-model="loginForm.verifyCode" maxlength="4" placeholder="验证码" /><div class="identifyCode" @click="refreshCode"><el-image :src="verifyImageUrl"></el-image></div></el-form-item><el-button :loading="loading" type="primary" style="width: 100%; margin-bottom: 30px" @click.native.prevent="handleLogin">登录</el-button> </el-form></div></template><script>import { validUsername } from '@/utils/validate'import Identify from './components/Identify'import { uuid } from 'vue-uuid'; // uuid object is also exported to things// outside Vue instance.export default {name: 'Login',components: { Identify },data() {const validateUsername = (rule, value, callback) => {if (!validUsername(value)) {callback(new Error('请输⼊正确的⽤户名'))} else {callback()}}const validatePassword = (rule, value, callback) => {if (value.length < 6) {callback(new Error('密码最少6位'))} else {callback()}}return {loginForm: {username: 'admin',password: '111111',roomId: '',verifyCode: ''},loginRules: {username: [{ required: true, trigger: 'blur', validator: validateUsername }],password: [{ required: true, trigger: 'blur', validator: validatePassword }]},passwordType: 'password',capsTooltip: false,loading: false,showDialog: false,redirect: undefined,otherQuery: {},identifyCodes: '1234567890',identifyCode: '',// verifyImageRoomId: '',verifyImageUrl: '',}},watch: {$route: {handler: function (route) {const query = route.queryif (query) {this.redirect = query.redirectthis.otherQuery = this.getOtherQuery(query)}},immediate: true}},created() {// window.addEventListener('storage', this.afterQRScan)// this.identifyCode = ''// this.makeCode(this.identifyCodes, 4)this.refreshCode()},mounted() {if (ername === '') {this.$ername.focus()} else if (this.loginForm.password === '') {this.$refs.password.focus()}},destroyed() {// window.removeEventListener('storage', this.afterQRScan)},methods: {checkCapslock(e) {const { key } = ethis.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')},showPwd() {if (this.passwordType === 'password') {this.passwordType = ''} else {this.passwordType = 'password'}this.$nextTick(() => {this.$refs.password.focus()})},createUuid() {let uuidV4 = uuid.v4().replace('-', '').replace('-', '').replace('-', '').replace('-', '')this.verifyImageRoomId = uuidV4this.verifyImageUrl = '/api/Operator/getCaptchaImage/120/40/' + this.verifyImageRoomId console.log(uuidV4)},handleLogin() {this.$refs.loginForm.validate(valid => {if (valid) {this.loading = truethis.$store.dispatch('user/login', this.loginForm).then(() => {this.$router.push({ path: this.redirect || '/', query: this.otherQuery })this.loading = false}).catch(() => {this.loading = false})} else {console.log('error submit!!')return false}})},getOtherQuery(query) {return Object.keys(query).reduce((acc, cur) => {if (cur !== 'redirect') {acc[cur] = query[cur]}return acc}, {})},// ⽣成随机数randomNum(min, max) {return Math.floor(Math.random() * (max - min) + min)},// 切换验证码refreshCode() {let uuidV4 = uuid.v4().replace('-', '').replace('-', '').replace('-', '').replace('-', '')this.loginForm.roomId = uuidV4this.verifyImageUrl = '/api/Operator/getCaptchaImage/120/40/' + this.loginForm.roomId console.log(uuidV4)},// ⽣成四位随机验证码makeCode(o, l) {for (let i = 0; i < l; i++) {this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]}console.log(this.identifyCode)}}}</script><style lang="scss">/* 修复input 背景不协调和光标变⾊ *//* Detail see https:///PanJiaChen/vue-element-admin/pull/927 */ $bg: #283443;$light_gray: #fff;$cursor: #fff;@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {.login-container .el-input input {color: $cursor;}}/* reset element-ui css */.login-container {background: url("~@/assets/background.jpg") no-repeat;min-height: 100vh;.el-input {display: inline-block;height: 47px;width: 85%;input {background: transparent;border: 0px;-webkit-appearance: none;border-radius: 0px;padding: 12px 5px 12px 15px;color: $light_gray;height: 47px;caret-color: $cursor;&:-webkit-autofill {box-shadow: 0 0 0px 1000px $bg inset !important;-webkit-text-fill-color: $cursor !important;}}}.el-form-item {border: 1px solid rgba(255, 255, 255, 0.1);background: rgba(0, 0, 0, 0.1);border-radius: 5px;color: #454545;.el-form-item__error {color: rgb(223, 223, 176);}}}</style><style lang="scss" scoped>$bg: #2d3a4b;$dark_gray: #889aa4;$light_gray: #eee;.login-container {min-height: 100%;width: 100%;background-color: $bg;overflow: hidden;.login-form {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;width: 520px;max-width: 100%;padding: 160px 35px 0;margin: 0 auto;overflow: hidden;}.tips {font-size: 14px;color: #fff;margin-bottom: 10px;span {&:first-of-type {margin-right: 16px;}}}.svg-container {padding: 6px 5px 6px 15px;color: $dark_gray;vertical-align: middle;width: 30px;display: inline-block;}.title-container {position: relative;.title {font-size: 42px;color: $light_gray;margin: 0px auto 40px auto;text-align: center;font-weight: bold;}}.show-pwd {position: absolute;right: 10px;top: 7px;font-size: 16px;color: $dark_gray;cursor: pointer;user-select: none;}.identifyCode {position: absolute;right: 10px;top: 5px;}.thirdparty-button {position: absolute;right: 0;bottom: 6px;}@media only screen and (max-width: 470px) {.thirdparty-button {display: none;}}}</style>后端接⼝/// <summary>/// 获取验证码/// </summary>/// <returns></returns>[HttpGet("getCaptchaImage/{width:int}/{height:int}/{roomId}")]public IActionResult GetCaptchaImage(int width, int height, string roomId){Console.WriteLine(roomId);//int width = 100;//int height = 36;var captchaCode = Captcha.GenerateCaptchaCode();var result = Captcha.GenerateCaptchaImage(width, height, captchaCode);string redisKey = "VerifyCode_" + roomId;Startup.redisDb.StringSet(redisKey, captchaCode, new TimeSpan(0, 5, 0));Stream s = new MemoryStream(result.CaptchaByteData);return new FileStreamResult(s, "image/png");}/// <summary>/// 登录/// </summary>/// <returns></returns>[HttpPost("login")]public ApiResponseData Login(LoginDto loginInfo){if (string.IsNullOrWhiteSpace(ername))return ApiResponse.Error("⽤户名不能为空");if (string.IsNullOrWhiteSpace(loginInfo.password))return ApiResponse.Error("密码不能为空");Entity.BaseOperator operInfo = Db.Select<BaseOperator>().Where(a => a.OperatorCode == ername && a.Password == loginInfo.password.ToLower() && a.Status == 1 && a.IsDel == false).ToOne(); if (operInfo == null)return ApiResponse.Error("⽤户名或者密码不正确");bool verifyResult = Captcha.ValidateCaptchaCode(loginInfo.RoomId, loginInfo.VerifyCode);if(verifyResult == false)return ApiResponse.Error("验证码不正确");//登录时重新⽣成token,⼀个⽤户只能在⼀个地⽅登录string token = System.Guid.NewGuid().ToString().Replace("-", "");Db.Update<BaseOperator>(operInfo.OperatorId).Set(a => a.Token, token).ExecuteAffrows();dynamic outJson = new ExpandoObject();//初始化⼀个不包含任何成员的ExpandoObjectoutJson.token = token;//存⼊redisstring redisKey = "UserInfo_" + token;Startup.redisDb.StringSet(redisKey, operInfo.OperatorId, new TimeSpan(24, 0, 0));return ApiResponse.Succ(outJson);}到此这篇关于 core配合vue实现后端验证码逻辑的⽂章就介绍到这了,更多相关 core验证码内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持!。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
图片验证码生成: 摆渡恋人 Web.xml文件配置: This is the description of my J2EE component This is the display name of my J2EE component ImageCheckServlet check.servlet.ImageCheckServlet width 800 height 400 codeCount 4
ImageCheckServlet /servlet/ImageCheckServlet
Package check.servlet; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.util.Random;
import javax.imageio.ImageIO; import javax.servlet.ServletException; import javax.servlet.ServletOutputStream; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession;
public class ImageCheckServlet extends HttpServlet { /** * */ private static final long serialVersionUID = -1475131268628773633L;
/** * 验证码图片的宽度。 */ private int width = 80;
/** * 验证码图片的高度。 */ private int height = 40;
/** * 验证码字符个数 */ private int codeCount = 4;
/** * 字体高度 */ private int fontHeight;
private int codeX = 0; private int codeY = 0;
char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' }; /** * 初始化验证图片属性 */ public void init() throws ServletException { /**
* 从web.xml中获取初始信息 */ /** * 宽度 */ String strWidth = this.getInitParameter("width"); /** * 高度 */ String strHeight = this.getInitParameter("height"); /** * 字符个数 */ String strCodeCount = this.getInitParameter("codeCount");
/** * 将配置的信息转换成数值 */ try { if (strWidth != null && strWidth.length() != 0) { width = Integer.parseInt(strWidth); } if (strHeight != null && strHeight.length() != 0) { height = Integer.parseInt(strHeight); } if (strCodeCount != null && strCodeCount.length() != 0) { codeCount = Integer.parseInt(strCodeCount);
/** * 在这里限制验证码字符的个数确定范围在4-10个之间 * */ if (codeCount > 8) { codeCount = 8; } if (codeCount < 4) { codeCount = 4; }
} } catch (NumberFormatException e) { e.printStackTrace(); } System.out.println("width:" + width); System.out.println("height:" + height);
/** * 字体大小应该是画布高减去上沿和下沿 * * 上下沿分别是5 */ fontHeight = (int) (height * 0.8F); /**
* 字体的X坐标 */ codeX = width / (codeCount + 1); /** * 字体的Y坐标 */ codeY = (int) (height * 0.8F); System.out.println("codeX:" + codeX); System.out.println("codeY:" + codeY);
} protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, java.io.IOException {
/** * 定义图像buffer */ BufferedImage buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); Graphics2D g = buffImg.createGraphics(); /** * 将图像填充为白色 */ g.setColor(Color.WHITE); g.fillRect(0, 0, width, height);
/** * 创建字体,字体的大小应该根据图片的高度来定。 */ Font font = new Font("宋体", Font.ROMAN_BASELINE, fontHeight); /**
* 设置字体。 */ g.setFont(font);
/** * 画边框。 */ g.setColor(Color.BLACK);
/** * drawRect(x,y,width,height); *
* x,y矩形的位置 * * width,height矩形的大小 */ g.drawRect(5, 5, width - 10, height - 10);
/** * 创建一个随机数生成器类 */ Random random = new Random();
/** * 随机产生160条干扰线,使图象中的认证码不易被其它程序探测到。 */
for (int i = 0; i < 100; i++) { g.setColor(randomColor()); int x1 = random.nextInt(width); int y1 = random.nextInt(height); int x2 = random.nextInt(width); int y2 = random.nextInt(height); /**
* 在此图形上下文的坐标系中,使用当前颜色在点 (x1, y1) 和 (x2, y2) 之间画一条线 */ g.drawLine(x1, y1, x2, y2); } /**
* randomCode用于保存随机产生的验证码,以便进行验证。 */ StringBuffer randomCode = new StringBuffer();
// 随机产生codeCount数字的验证码。 for (int i = 0; i < codeCount; i++) { /**
* 得到随机产生的验证码数字。 */ String strRand = String.valueOf(codeSequence[random.nextInt(36)]); /**
* 设置验证码的随机颜色值 */ g.setColor(randomColor()); /**
* 将验证码画到画布上去 */ g.drawString(strRand, (i + 1) * codeX - (int) (buffImg.getWidth() * 0.65F / codeCount), codeY); /** * 将产生的四个随机数组合在一起,在验证的时候使用 */ randomCode.append(strRand); } /** * 将四位数字的验证码保存到Session中。 */ HttpSession session = req.getSession(); session.setAttribute("validateCode",