你能通过这个验证码的验证么?

13 篇文章 0 订阅
12 篇文章 0 订阅


    你能通过这个网站验证码的验证么?    

    读者先可以进入这个网站,看看这个网站的验证码你是否能够通过此网站验证码的验证.它的要求很简单,用鼠标在下面绘出和上面的图片一样的图片.但是真正的做起来.....

计算机生成了可选文字: paintwhatyouseebyusingthemousebelowthenSubmit.补:.'.:.;已口口k日口:曰口:‘目石.口『',白L1subm.tJ个backtotop

 

那么什么是验证码呢?

     验证码(CAPTCHA)是“CompletelyAutomated Public Turing test to tell Computers and HumansApart”(全自动区分计算机和人类的图灵测试)的缩写,是一种区分用户是计算机和人的公共全自动程序。可以防止:恶意破解密码、刷票、论坛灌水,有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试.

     上面例子只是作为一个引子和示例,知道还有这种验证码就好,如果有兴趣的话可以进行尝试,挑战一下自己.验证码主要的目的是防止恶意破解密码、刷票、论坛灌水、刷页,区分人和机器.不过上面的小例子估计很少有人能够通过..

     上面例子所示的是一种验证码的形式,当然还有其他类型: 普通图片验证码,动画验证码,声音验证码,短信验证码,视频验证码等等..

     接下来我们了解一下验证码的相关原理,验证码就是将一串随机产生的数字或符号,生成一幅图片,图片里加上一些干扰,例如随机画数条直线,画一些点(防止OCR),由用户肉眼识别其中的验证码信息,输入表单提交网站验证,验证成功后才能使用某项功能。

通过以上的内容我们简单的了解并回顾了一下验证码相关的概念,接下来我将用一个实例来展示如何在一个项目中运用简单的验证码功能.

    验证码的java实例

首先建立一个servlet,主要功能是绘制出随机数字和简单的干扰图形.


package com.bjpowernode.drp.util.servlet;



import java.awt.Color;

import java.awt.Font;

import java.awt.Graphics;

import java.awt.image.BufferedImage;

import java.io.IOException;

import java.util.Random;



import javax.imageio.ImageIO;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;



public class AuthImageServlet extends HttpServlet 

{ 

    

        private static final String CONTENT_TYPE = "text/html; charset=gb2312"; 

        //设置字母的大小,大小 

        private Font mFont = new Font("Times New Roman", Font.PLAIN, 17); 

        public void init() throws ServletException 

        { 

                super.init(); 

        } 

		   //获取随机颜色
  
        Color getRandColor(int fc,int bc) 

        { 

                Random random = new Random(); 

                if(fc>255) fc=255; 

                if(bc>255) bc=255; 

                int r=fc+random.nextInt(bc-fc); 

                int g=fc+random.nextInt(bc-fc); 

                int b=fc+random.nextInt(bc-fc); 

                return new Color(r,g,b); 

        } 

    

        public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 

        { 

                response.setHeader("Pragma","No-cache"); 

                response.setHeader("Cache-Control","no-cache"); 

                response.setDateHeader("Expires", 0); 

                //表明生成的响应是图片 

                response.setContentType("image/jpeg"); 

                      

                int width=100, height=18; 

                BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); 

                      

                Graphics g = image.getGraphics(); 

                Random random = new Random(); 

                g.setColor(getRandColor(200,250)); 

                g.fillRect(1, 1, width-1, height-1); 

                g.setColor(new Color(102,102,102)); 

                g.drawRect(0, 0, width-1, height-1); 

                g.setFont(mFont); 

    

                g.setColor(getRandColor(160,200)); 

    

                //画随机线 

                for (int i=0;i<155;i++) 

                { 

                        int x = random.nextInt(width - 1); 

                        int y = random.nextInt(height - 1); 

                        int xl = random.nextInt(6) + 1; 

                        int yl = random.nextInt(12) + 1; 

                        g.drawLine(x,y,x + xl,y + yl); 

                } 

    

                //从另一方向画随机线 

                for (int i = 0;i < 70;i++) 

                { 

                        int x = random.nextInt(width - 1); 

                        int y = random.nextInt(height - 1); 

                        int xl = random.nextInt(12) + 1; 

                        int yl = random.nextInt(6) + 1; 

                        g.drawLine(x,y,x - xl,y - yl); 

                } 

    

                //生成随机数,并将随机数字转换为字母 

                String sRand=""; 

                for (int i=0;i<6;i++) 

                { 

                        int itmp = random.nextInt(26) + 65; 

                        char ctmp = (char)itmp; 

                        sRand += String.valueOf(ctmp); 

                        g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110))); 

                        g.drawString(String.valueOf(ctmp),15*i+10,16); 

                } 

    
                                  //获取session,并将相关随机数字存放在session中,用于验证.
                HttpSession session = request.getSession(true); 

                session.setAttribute("rand",sRand); 

                g.dispose(); 

                ImageIO.write(image, "JPEG", response.getOutputStream()); 

        } 

        public void destroy() 

        { 

        } 



将AuthImageServlet配置到Web.xml中 


<!-- 验证码Servlet----AuthImageServlet -->
			
	<servlet>
		<servlet-name>AuthImageServlet</servlet-name>
		<servlet-class>com.bjpowernode.drp.util.servlet.AuthImageServlet</servlet-class>
	</servlet>
			
	<servlet-mapping>
		<servlet-name>AuthImageServlet</servlet-name>
		<url-pattern>/servlet/AuthImageServlet</url-pattern>
	</servlet-mapping>

在登录页面中设置验证码图片的路径其他标签在此省略. 


<img src="${pageContext.request.contextPath }/servlet/AuthImageServlet">


在登录页面中加入相关的java验证代码,如下:


	<%
	    ....与登录相关的代码
	    //获取验证码
	    String authImage=request.getParameter("authImage");
	    		
	    //判断验证码是否和session中的验证码一致
	   if(authImage.trim().equalsIgnoreCase((String)session.getAttribute("rand"))){
	       //登录系统相关代码
	    }else{
	    	out.println("验证码不正确!");
	
	    }
				
	%>


最后显示结果:

         

     当然,如果读者对验证码感兴趣并想扩充自己的视野,想见识一下各式各样的验证码,可以在网上搜集一下.我这里就不再列举了.这里所展示的是最基本的验证码,了解一下它的原理和流程以及对项目的回顾.



  • 7
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
在Vue中实现验证码可以通过以下步骤: 1. 引入第三方验证码库:可以选择一些开源的验证码库,例如svg-captcha、vue-verify-pop等。 2. 在Vue组件中使用验证码库:可以通过在Vue组件中引入验证码库,然后在组件中调用相关方法来生成验证码。 3. 绑定验证码到视图中:可以将生成的验证码绑定到视图中,例如将验证码显示在一个`<img>`标签中或者在一个`<canvas>`标签中。 4. 验证用户输入的验证码:可以通过比较用户输入的验证码和生成的验证码验证是否正确。 下面是一个使用`svg-captcha`库实现验证码的示例代码: ```html <template> <div> <!-- 显示验证码 --> <div class="captcha" v-html="captcha"></div> <!-- 输入框 --> <input type="text" v-model="input" /> <!-- 验证按钮 --> <button @click="verify">验证</button> </div> </template> <script> import svgCaptcha from "svg-captcha"; export default { data() { return { captcha: "", input: "", }; }, mounted() { // 生成验证码 this.captcha = svgCaptcha.create({ size: 4, noise: 3, color: true, background: "#f0f0f0", }).data; }, methods: { verify() { // 验证验证码 if (this.input.toLowerCase() === this.captcha.text.toLowerCase()) { alert("验证成功!"); } else { alert("验证码错误!"); // 刷新验证码 this.captcha = svgCaptcha.create({ size: 4, noise: 3, color: true, background: "#f0f0f0", }).data; this.input = ""; } }, }, }; </script> <style> .captcha { margin-bottom: 10px; } </style> ``` 在上面的代码中,首先引入了`svg-captcha`库,然后在`mounted`钩子函数中生成验证码,并将生成的验证码绑定到视图中。当用户点击验证按钮时,通过比较用户输入的验证码和生成的验证码验证是否正确,如果验证码错误则刷新验证码

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值