前端登录密码加密传输

最新推荐文章于 2024-02-04 22:24:28 发布

weixin_30722589

最新推荐文章于 2024-02-04 22:24:28 发布

阅读量2.8k

点赞数 1

文章标签：前端 java javascript ViewUI

原文链接：http://www.cnblogs.com/itgezhu/p/11242066.html

版权

在HTTPS还没有普及的时候，前端采用HTTP协议，登录用户名和密码在不做任何控制的情况下是明文传输的，大量的网站都需要登录，大量的人使用同样的用户名和密码。

目的：防止登录密码名文传输（仅仅只是防止明文传输，加密效果取决于key，而key对于前台是透明的）

方式：前端页面用js加密前端登录密码，采用AES对称加密

一、前端JS加密库crypto-js

因为懒，所以直接引入整个加密库，可以根据所需要的加密算法分别引入，下载地址crypto-js

如果是分别引入，记得别忘记引入核心库core

二、前端页面代码

因为需要加密密码，所以把提交方式换成了ajax

AES加密的key为128bit，可以理解为16个字符。key由后端生成并送入前端。

<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.w3.org/1999/xhtml"
>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}">

    <script src="../../static/js/jquery-3.3.1.min.js" th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script src="../../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
    <script src="../../static/js/crypto-js.js" th:src="@{/js/crypto-js.js}"></script>


    <title>用户登录</title>

    <style>
        .bgColor {
            background-color: rgba(243, 66, 111, 0.15)
        }

        .divBorder {
            border: solid 1px rgba(12, 24, 255, 0.15);
            padding: 10px;
            margin-top: 10px;
            border-radius: 10px;
            text-align: center;
            vertical-align: middle;
        }

        .h4font {
            margin-top: 0px;
            font-family: 微软雅黑;
            font-weight: 500;
        }

        .center {
            padding: 20% 0;
        }

        .verifyInput {
            vertical-align: middle;
            font-size: 14px;
            font-weight: normal;
            line-height: 1;
            /*border:1px solid #999;*/
            float: left;
            width: 180px;
            height: 30px;

        }

        .verifyImage {
            vertical-align: middle;
            float: right;
            height: 30px;
        }

    </style>


</head>
<body>

<div class="container">
    <div class="row center">
        <div class="divBorder col-sm-offset-4 col-sm-4">
            <h3 class="panel panel-heading h4font">
                用户登录
            </h3>
            <h4 name="msg" th:text="${msg}"></h4>
            <input type="hidden" name="key" th:value="${key}">
            <!--<form class="form-horizontal" th:action="@{/login}" method="post">-->
            <form class="form-horizontal" method="post">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
                    <input type="text" class="form-control" name="userName" placeholder="请输入用户名称"
                           th:value="${userName}"/>
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                    <input type="password" class="form-control" name="password" th:value="${password}"
                           placeholder="请输入密码"/>
                </div>
                <br/>
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-font"></i></span>
                    <input type="text" class="verifyInput" name="verifyCode" placeholder="验证码"/>
                    <img class="verifyImage" alt="验证码" οnclick="this.src='/getVerifyCode?d='+new Date()*1"
                         src="/getVerifyCode">
                </div>

                <br>
                <input type="button" name="btnLogin" class="btn btn-lg btn-block btn-info" value="登 录">
            </form>
        </div>


    </div>

</div>
<script th:inline="javascript">
    $(function () {
        $('input[name="btnLogin"]').click(function () {
            var $key = $('input[name="key"]').val();
            var $userName = $('input[name="userName"]').val();
            var $password = $('input[name="password"]').val();
            var $verifyCode = $('input[name="verifyCode"]').val();
//            console.log($userName + ",  " + $password + ", " + $verifyCode + ", " + $key);
            if ($userName == "" || $password == "" || $verifyCode == "") {
                alert("用户名、密码、验证码不能为空！");
                return false;
            }

            var key = CryptoJS.enc.Utf8.parse($key);
            console.log("key:" + key + ",$key:" + $key);
            var password = CryptoJS.enc.Utf8.parse($password);
            var encrypted = CryptoJS.AES.encrypt(password, key, {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7});
            var encryptedPwd = encrypted.toString();

//            console.log("encrypted:" + encrypted);
//            console.log("encryptedPwd:" + encryptedPwd);

            var decrypt = CryptoJS.AES.decrypt(encryptedPwd, key, {
                mode: CryptoJS.mode.ECB,
                padding: CryptoJS.pad.Pkcs7
            });
            var testDecryptStr = CryptoJS.enc.Utf8.stringify(decrypt).toString();

//            console.log("decrypt:" + decrypt);
//            console.log("testDecryptStr:" + testDecryptStr);


            $.ajax({
                type: "post",
                url: "/login",
                data: {userName: $userName, password: encryptedPwd, verifyCode: $verifyCode,key: $key},

                dataType: "json",
                success: function (result) {
//                    console.log(result);
                    if(result.success)
                    {
                        window.location.href=result.url;
                    }
                    else
                    {
                        $('h4[name="msg"]').html(result.msg);
                        alert(result.msg);
                    }
//                    window.location.replace(result.url);
//                    $('#container').load(result.url);
                },
                error: function (result) {
//                        console.log(result);
                    alert(result.responseText);
                }
            });

        })
    })
</script>


</body>
</html>

三、后端解密代码

后端PKCS5Padding补码方式和前端的CryptoJS.pad.Pkcs7效果一致

public class AesUtils {
    private static final String ALGORITHMSTR = "AES/ECB/PKCS5Padding";

    public static String encrypt(String content, String key) {
        try {
            byte[] raw = key.getBytes();  //获得密码的字节数组
            SecretKeySpec skey = new SecretKeySpec(raw, "AES"); //根据密码生成AES密钥
            Cipher cipher = Cipher.getInstance(ALGORITHMSTR);  //根据指定算法ALGORITHM自成密码器
            cipher.init(Cipher.ENCRYPT_MODE, skey); //初始化密码器，第一个参数为加密(ENCRYPT_MODE)或者解密(DECRYPT_MODE)操作，第二个参数为生成的AES密钥
            byte [] byte_content = content.getBytes("utf-8"); //获取加密内容的字节数组(设置为utf-8)不然内容中如果有中文和英文混合中文就会解密为乱码
            byte [] encode_content = cipher.doFinal(byte_content); //密码器加密数据
            return Base64.encodeBase64String(encode_content); //将加密后的数据转换为字符串返回
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }

    public static String decrypt(String encryptStr, String decryptKey) {
        try {
            byte[] raw = decryptKey.getBytes();  //获得密码的字节数组
            SecretKeySpec skey = new SecretKeySpec(raw, "AES"); //根据密码生成AES密钥
            Cipher cipher = Cipher.getInstance(ALGORITHMSTR);  //根据指定算法ALGORITHM自成密码器
            cipher.init(Cipher.DECRYPT_MODE, skey); //初始化密码器，第一个参数为加密(ENCRYPT_MODE)或者解密(DECRYPT_MODE)操作，第二个参数为生成的AES密钥
            byte [] encode_content = Base64.decodeBase64(encryptStr); //把密文字符串转回密文字节数组
            byte [] byte_content = cipher.doFinal(encode_content); //密码器解密数据
            return new String(byte_content,"utf-8"); //将解密后的数据转换为字符串返回
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }
}

四、controller贴一把

@Controller
public class HomeController {
    @Resource
    private LoginService loginService;

    @Resource
    DefaultKaptcha defaultKaptcha;

    @Resource
    LogService logService;

    private long verifyTTL = 60;//验证码过期时间60秒

    private String create16String()
    {
        return RandomUtils.generateString(16);
    }

    @RequestMapping({"/", "/index"})
    public String index() {
        return "index";
    }


    /**
     * 2、生成验证码
     *
     * @param request
     * @param response
     * @throws Exception
     */
    @RequestMapping("/getVerifyCode")
    public void defaultKaptcha(HttpServletRequest request, HttpServletResponse response)
            throws Exception {
       略...   
    }


    @RequestMapping(value = "/login", method = RequestMethod.GET)
    public String toLogin(Map<String, Object> map, HttpServletRequest request) {
        String key = create16String();        
        map.put("key",key);
        return "/user/login";
    }

    @RequestMapping(value = "/login", method = RequestMethod.POST)
    @ResponseBody
    public Object login(HttpServletRequest request) throws Exception {
        System.out.println("login()");
        Map<String, Object> map = new HashMap<>();
        String userName = request.getParameter("userName");
        String encryptedPassword = request.getParameter("password");
        String key = request.getParameter("key");



        String verifyCode = request.getParameter("verifyCode");
        String rightCode = (String) request.getSession().getAttribute("verifyCode");
        Long verifyCodeTTL = (Long) request.getSession().getAttribute("verifyCodeTTL");

        String password = AesUtils.decrypt(encryptedPassword,key);

        Long currentMillis = System.currentTimeMillis();
        if (rightCode == null || verifyCodeTTL == null) {
            map.put("msg", "请刷新图片，输入验证码！");
            map.put("userName", userName);
            map.put("success",false);
            map.put("url","/user/login");
            return map;
        }
        Long expiredTime = (currentMillis - verifyCodeTTL) / 1000;
        if (expiredTime > this.verifyTTL) {
            map.put("msg", "验证码过期，请刷新图片重新输入！");
            map.put("userName", userName);
            map.put("success",false);
            map.put("url","/user/login");
            return map;
        }

        if (!verifyCode.equalsIgnoreCase(rightCode)) {
            map.put("msg", "验证码错误，请刷新图片重新输入！");
            map.put("userName", userName);
            map.put("success",false);
            map.put("url","/user/login");
            return map;
//            return "/user/login";
        }

        LoginResult loginResult = loginService.login(userName, password);
        if (loginResult.isLogin()) {
            map.put("userName", userName);
            SysLog sysLog = LogFactory.createSysLog("登录","登录成功");
            logService.writeLog(sysLog);
            map.put("success",true);
            map.put("url","/index");
            return map;
//            return "/index";
        } else {
            map.put("msg", loginResult.getResult());
            map.put("userName", userName);
            map.put("success",false);
            map.put("url","/user/login");
            return map;
//            return "/user/login";
        }
    }
}

转载于:https://www.cnblogs.com/itgezhu/p/11242066.html

weixin_30722589

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
前端登录密码加密传输

在HTTPS还没有普及的时候，前端采用HTTP协议，登录用户名和密码在不做任何控制的情况下是明文传输的，大量的网站都需要登录，大量的人使用同样的用户名和密码。目的：防止登录密码名文传输（仅仅只是防止明文传输，加密效果取决于key，而key对于前台是透明的）方式：前端页面用js加密前端登录密码，采用AES对称加密一、前端JS加密库crypto-js因为懒，所以直接引入整个加密库，可以...
复制链接

扫一扫