95992828九五至尊2

登录验证码demo,前后端交互

四月 6th, 2019  |  882828九五至尊手机版

在局地好像于管理体系的门类中,咱们在登录时平时会用到图片验证码。这里把自个儿要好写的一个小系统(后台是java语言)的验证码部分摘出来。

     
 在关系到前后端交互的体系大概实际上项目中,常常会遇见登录音讯的校验处理。而由于安全性思考,除了对所输入的理解密码举办加密外,其中验证码也是很要求的1项。而从验证码的校验上的话,可分为前端校验和后端校验。
     
 1是前者校验。向服务器端传送数据时,不需再有验证码那么些字段,全体的浮动、校验和刷新拍卖都由前端达成。不过如此安全性不高,并且在前者校验的意义非常小;2是在后端校验。如若是在后端校验,那么验证码的变迁、刷新以及校验工作全由后端职员到位,前端只须求将用户所输入的验证码传送到后端即可。至于到底用哪个格局更加好,还是要依据实际供给来展开选拔。假如是比较不难且不涉及首要个人音讯处理的阳台,能够选拔在前者实现。
       上边就来说一下前端怎么着生成验证码以及完结人事教育育高校验和刷新操作。
一、首先在指标html文件中引进验证码生成逻辑处理文件checkCode.js

全体思路是后端有二个生成验证码图片的接口,把验证码图片写入浏览器,前端页面在img标签里的src属性里填充后端生成验证码图片的接口地址即可。

<script type="text/javascript" src="../js/checkCode.js"></script>

1、java部分-CaptchaController.java

自身那里是把后端生成的验证码生成图片重返给浏览器时,同时存入到了数据库中,前端登录时,后端依照前端输入的验证码和数据库中的验证码作对照,来判定是不是足以登录。

package com.lin.controller;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
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.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.lin.domain.Captcha;
import com.lin.service.SysUserService;


/**
 * 验证码-controller
 * @author libo
 */
@Controller
@RequestMapping("/captcha")
public class CaptchaController {

    @Autowired
    private SysUserService uService;

    /**
     * 随机字符字典
     */
    private static final char[] CHARS = { '2', '3', '4', '5', '6', '7', '8',
        '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M',
        'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 
        'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'm',
        'n', 'p', 'q', 'r', 's', 't', 'u' ,'v', 'w', 'x', 'y', 'z'};

    /**
     * 随机数
     */
    private static Random random = new Random();

    /**
     * 获取4位随机数
     * @return
     */
    private static String getRandomString() {
        StringBuffer buffer = new StringBuffer();
        for(int i = 0; i < 4; i++) {
            buffer.append(CHARS[random.nextInt(CHARS.length)]);
        }
        return buffer.toString();
    }

    /**
     * 获取随机数颜色
     * @return
     */
    private static Color getRandomColor() {
        return new Color(random.nextInt(255),random.nextInt(255), random.nextInt(255));
    }

    /**
     * 返回某颜色的反色
     * @param c
     * @return
     */
    private static Color getReverseColor(Color c) {
        return new Color(255 - c.getRed(), 255 - c.getGreen(), 255 - c.getBlue());
    }

    /**
     * 生成验证码
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    @ResponseBody
    @RequestMapping(value="/getCaptcha.do", method=RequestMethod.GET)
    public void outputCaptcha(HttpServletRequest request, HttpServletResponse response, String rad)
            throws ServletException, IOException {

        // 设置页面不缓存
        response.setHeader("Pragma", "No-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expires", 0);
        response.setContentType("image/jpeg");

        String randomString = getRandomString(); //生成的验证码

        Captcha c = new Captcha();
        c.setCaptchaId(rad);
        c.setCaptcha(randomString.toUpperCase());
        Integer id = uService.saveCaptcha(c);//保存验证码到数据库中
        if(id > 0){    //验证码保存成功

        }else{    //验证码保存失败
            return;
        }

        int width = 100;    //验证码图像的宽度
        int height = 34;    //验证码图像的高度

        // 在内存中创建图象
        BufferedImage bi = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        Graphics2D g = bi.createGraphics();
        for(int i=0; i<randomString.length(); i++){
            Color color = getRandomColor();
            Color reverse = getReverseColor(color);
            g.setColor(color);    //设置字体颜色
            g.setFont(new Font(Font.SANS_SERIF, Font.BOLD, 25));    //设置字体样式
            g.fillRect(0, 0, width, height);
            g.setColor(reverse);
            g.drawString(randomString, 18, 25);
        }
        //随机生成一些点
        for (int i = 0, n = random.nextInt(100); i < n; i++) {
            g.drawRect(random.nextInt(width), random.nextInt(height), 1, 1);
        }
        // 随机产生干扰线,使图象中的认证码不易被其它程序探测到
        for (int i = 0; i < 10; i++) {
            g.setColor(getRandomColor());
            final int x = random.nextInt(width-1); // 保证画在边框之内
            final int y = random.nextInt(height-1);
            final int xl = random.nextInt(width);
            final int yl = random.nextInt(height);
            g.drawLine(x, y, x + xl, y + yl);
        }
        g.dispose();    //图像生效
        ImageIO.write(bi, "JPEG", response.getOutputStream());    //输出图片到页面

    }


}

2、其body部分代码:

2、html部分-login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理系统登录</title>
    <link rel="stylesheet" href="/common/css/index.css">
    <script src="/scripts/apiConfig.js"></script>
    <script src="/lib/jquery/jquery.min.js"></script>
    <script src="/lib/aes/aes.min.js"></script>
    <script src="/common/js/utils.js"></script>
</head>
<body>
    <div class="layout">
        <div class="top-name">后台管理系统
            Background Management System
        </div>
        <div class="main">
            <div class="item">
                <label style="word-spacing: 10px;">邮 箱:</label>
                <input type="text" id="loginEmail" class="f-s-14" autocomplete="off" placeholder="请输入邮箱">

            </div>
            <div class="item">
                <label style="word-spacing: 10px;">密 码:</label>
                <input type="password" id="loginPwd" class="f-s-14" autocomplete="off" placeholder="请输入密码">

            </div>
            <div class="item clearfix">
                <label>验证码:</label>
                <input type="text" id="captcha" class="f-s-14" placeholder="请输入验证码" style="width: 200px;">
                <a href="javascript:void(0);" onclick="updateCaptcha()" style="height: 36px;width: 100px;float: right;">
                    <img src="" alt="882828九五至尊手机版 1" id="captcha_img">
                </a>

            </div>
            <div style="text-align: center;margin-top: -10px;height: 20px;margin-bottom: 5px;">

            </div>
            <div class="item">
                <button type="button" class="submit" id="submit" style="outline: none;">登 录</button>
            </div>
        </div>
    </div>
</body>
<script>

    //更新验证码
    var random = '';
    function updateCaptcha() {
        random = new Date().getTime()+''+Math.floor(Math.random() * Math.pow(10, 8));
        $('#captcha_img').attr('src', hostObj.host+'/captcha/getCaptcha.do?rad='+random);
    }
    $(function () {
        //页面加载的时候就获取验证码
        updateCaptcha();

        $('#loginEmail').blur(function () {
            checkLoginEmail();
        });
        $('#loginPwd').blur(function () {
            checkLoginPwd();
        });
        $('#captcha').blur(function () {
            checkCaptcha();
        });

        $("#submit").click(function() {
            var flag1 = checkLoginEmail();
            var flag2 = checkLoginPwd();
            var flag3 = checkCaptcha();
            if(!flag1 || !flag2 || !flag3){
                return;
            }
            $.ajax({
                type:'post',
                url: hostObj.host+'/sysUser/login.do',
                dataType:"json",
                data:{
                    loginEmail:$("#loginEmail").val(),
                    loginPwd:encrypt($("#loginPwd").val()),
                    captcha: $('#captcha').val(),
                    captchaId: random
                },
                success:function(res) {
                    if(res.success == 1){
                        var user = {
                            id: res.data.id,
                            email: res.data.email,
                            createTime: res.data.createTime.substring(0,19),
                            lastLoginTime: res.data.lastLoginTime.substring(0,19),
                            status: res.data.status
                        }
                        window.location.href = "main.html";
                    }else{
                        $('#error').html(res.error.msg);
                        if(res.error.code == 4000){
                            $('#captcha').focus();
                        }
                    }
                },
                error:function(res){
                    $('#error').html('系统错误!');
                }
            });
        });

        function checkLoginEmail() {
            if($.trim($('#loginEmail').val()) == ''){
                $('#tipLEmail').html('请输入邮箱');
                return false;
            }else{
                $('#tipLEmail').html('');
                return true;
            }
        }

        function checkLoginPwd() {
            if($.trim($('#loginPwd').val()) == ''){
                $('#tipLPwd').html('请输入登录密码');
                return false;
            }else{
                $('#tipLPwd').html('');
                return true;
            }
        }

        function checkCaptcha() {
            if($.trim($('#captcha').val()) == ''){
                $('#tipCaptcha').html('请输入验证码');
                return false;
            }else{
                $('#tipCaptcha').html('');
                return true;
            }
        }</script>
</html>
<!--验证码-->                          
    <div class="checkcodebox">
        验&ensp;证&ensp;码:
        <!--验证码输入所在文本框:maxlength可限制输入的验证码的位数-->
        <input type="text" id="checkcodein" placeholder ="请输入"  maxlength="4"/>|
        <!--验证码生成所在文本框-->
        <input type="text" id="checkcode">
        <!--注意这里的id名要与checkCode中的一致-->
    </div>

3、效果

882828九五至尊手机版 2

 

882828九五至尊手机版 3

 

3、本页面script逻辑控制,点击验证码达成刷新。

<script type="text/javascript">
$("#checkcode").click(function(){
    //页面点击验证码位置,实现点击刷新(调用生成函数).
    createCode();
});
</script>

4、checkCode.js文件代码

var code; //在全局定义验证码      
//页面初始化加载时生成一个初始验证码     
window.onload = function() {  
    createCode();  
}  

//验证码的生成
function createCode() {  
    code = "";  
    var codeLength = 5; //验证码的长度     
    var checkCode = document.getElementById("checkCode");  
    var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, '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'); //随机数     
    for(var i = 0; i < codeLength; i++) { //循环操作     
        var charIndex = Math.floor(Math.random() * 36); //取得随机数的索引     
        code += random[charIndex]; //根据索引取得随机数加到code上     
    }  
    checkCode.value = code; //把code值赋给验证码     
}  

伍、在html文件恐怕是决定html文件脚本逻辑的文件中,在输入登录等有关新闻之后,调用后台接口以前,校验验证码输入的科学。

示例代码:
//校验验证码     
function validate() {  
    var inputCode = document.getElementById("checkcodein").value.toUpperCase(); //取得输入的验证码并转化为大写           
    if(inputCode.length <= 0) { //若输入的验证码长度为0     
        alert("请输入验证码!"); //则弹出请输入验证码     
    } else if(inputCode != code) { //若输入的验证码与产生的验证码不一致时     
        alert("验证码输入错误!"); //则弹出验证码输入错误     
        createCode(); //刷新验证码     
    } else { //输入正确时 
        //从url中获取班级编码的值
        var classcode_val = GetQueryString("classcode");

        //获取各项信息的值
        //姓名
        var studentName = $("#studentname").val();
        //身份证类型
        var idtype_val = $("#idtype option:selected").val();
        //身份证号
        var idno_val = $("#idno").val();
        //验证码
        var checkcode_val = $("#checkcodein").val();
        var count = 0;//设置count,保证即便有好几个值都没入的时候也只弹框一次,而不是次次弹框。
        if(studentName == ""||idtype_val == ""||idno_val==""){
             count++;
        }
        if(count != 0){
            alert("请补充完整个人信息!");
        }else{
            //准备参数
            var verifydata = {
                "classcode": classcode_val,
                "name":studentName,
                "idtype": idtype_val,
                "idno": idno_val,
                "stuflag":"new"
            }
            //调用数据库对登录信息做处理的接口所在函数。
              //verifySignFunction(verifydata); 
        }
    }  
}  

六、注:在调用数据库接口之后,在回调函数中,再度调用验证码生成函数,完结不论是或不是登录成功,验证码都刷新一回。
882828九五至尊手机版,以上。

相关文章

Your Comments

近期评论

    功能


    网站地图xml地图