java实现短信发验证码登录

最新推荐文章于 2024-08-04 17:16:44 发布

weixin_30832351

最新推荐文章于 2024-08-04 17:16:44 发布

阅读量209

点赞数

文章标签： java javascript json ViewUI

原文链接：http://www.cnblogs.com/thcy1314/p/9592828.html

版权

先参考中国网建官网：http://www.smschinese.cn/

一.pom.xml配置

<!--手机发送验证码start-->
<dependency>
    <groupId>commons-codec</groupId>
    <artifactId>commons-codec</artifactId>
    <version>1.4</version>
</dependency>
<dependency>
    <groupId>commons-httpclient</groupId>
    <artifactId>commons-httpclient</artifactId>
    <version>3.1</version>
</dependency>
<dependency>
    <groupId>commons-logging</groupId>
    <artifactId>commons-logging</artifactId>
    <version>1.2</version>
</dependency>
<!--手机发送验证码end-->

二、controller层使用

/**
 * 登录
 */
@RequestMapping(value = "login")
@ResponseBody
public Map<Object, Object> login(String userName, String password,UserModel userModel, HttpSession session, HttpServletRequest request) {
    /**验证码验证*/
    String imageCode = (String) session.getAttribute("imageCode");
    String code = request.getParameter("code");
    /**手机验证码验证*/
    String telCode= request.getParameter("telCode");
    Integer telCodes= (Integer) session.getAttribute("telCodes");

        userModel = userBo.findByNameAndPassword(userName, password);
        HashMap<Object, Object> result = new HashMap<>(1);
    if(imageCode.equalsIgnoreCase(code)) {
        if (telCodes.equals(telCode)) {
            if (userModel != null) {
                result.put("result", true);
            } else {
                result.put("result", false);
            }
        } else {
            result.put("result", false);
        }
    }else {
        result.put("result", false);
    }
        return result;
}

/**给手机发短信*/
@RequestMapping("sms")
public void SMS(HttpServletResponse response,HttpSession session,String tel) {
    int i = (int) ((Math.random() * 9 + 1) * 100000);
    try {
        HttpClient client = new HttpClient();
        PostMethod post = new PostMethod("http://gbk.sms.webchinese.cn");
        System.out.println(post);
        // 在头文件中设置转码
        post.addRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=gbk");
        // 注册的用户名
        NameValuePair[] data = {
                //忘穿秋裤了
                new NameValuePair("Uid", "忘穿秋裤"),
                // 注册成功后,网站分配的密钥（不是密码）
                new NameValuePair("Key", "d41d8cd98f00b204e980"),
                // 给该手机号码发送内容
                new NameValuePair("smsMob", "" +tel + ""),
                new NameValuePair("smsText", "验证码:" + i + ",打死也不要告诉别人") };
        post.setRequestBody(data);
        client.executeMethod(post);
        Header[] headers = post.getResponseHeaders();
        int statusCode = post.getStatusCode();
        System.out.println("statusCode:" + statusCode);
        for (Header h : headers) {
            System.out.println(h.toString());
        }
        String result = new String(post.getResponseBodyAsString().getBytes("gbk"));
        System.out.println(result);
        post.releaseConnection();
        PrintWriter out = response.getWriter();
        out.println(i);
        out.flush();
        out.close();
        session.setAttribute("telCodes",i);
    } catch (Exception e) {
        e.printStackTrace();
        e.getMessage();
    }
}

@ApiOperation("生成验证码")
@GetMapping("getCode")
public void getCode(HttpServletResponse response, HttpSession session) throws Exception{
    //利用图片工具生成图片
    //第一个参数是生成的验证码，第二个参数是生成的图片
    Object[] objs = VerifyUtil.createImage();
    //将验证码存入Session
    session.setAttribute("imageCode",objs[0]);

    //将图片输出给浏览器
    BufferedImage image = (BufferedImage) objs[1];
    response.setContentType("image/png");
    OutputStream os = response.getOutputStream();
    ImageIO.write(image, "png", os);
}

三、login.jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>用户登录</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="<%=path%>css/login.css">
    <script src="<%=path%>js/login.js"></script>
    <script type="text/javascript" src="<%=path%>js/jquery.js"></script>
    <script type="text/javascript" src="<%=path%>js/jquery-3.1.1.min.js"></script>

    <%--验证码的手机号传给后台，后台sms方法--%>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                var tel = $('#tel').val();
                if (tel == '') {
                    alert('请输入手机号！');
                    return false;
                }
                if (!(/^1[34578]\d{9}$/.test(tel))) {
                    alert('手机号不正确！');
                    return false;
                }
                //发送验证码
                $.ajax({
                    type: "post",
                    url: "user/sms",
                    data: {
                        tel: tel,
                    },

                });
            })
        })


    </script>

</head>

<body>
<div id="login_frame">
    <h1>用户登录</h1>
    <p id="image_logo"><img src="<%=path%>images/lyancafe.png"></p>
    <form action="<%=basePath%>user/login" name="userForm">
        <p><label class="label_input">用户名</label><input type="text" id="userName" class="text_field" placeholder="请输入账号"></p>
        <p><label class="label_input">密码</label><input type="password" id="password" class="text_field"></p>
        <p><label class="label_input">验证码</label><input type="text" id="code" class="text_field" placeholder="请输入验证码" autocomplete="off"></p>
        <img src="<%=basePath%>user/getCode" alt="更改验证码" οnclick="this.src='<%=basePath%>user/getCode?'+(new Date()).getTime();" />

        <p><label class="label_input">手机号</label><input type="text" id="tel" name = "tel" value = "111" class="text_field" placeholder="请输入手机号"></p>
        <p><label class="label_input">验证码</label><input type="text" id="telCode" class="text_field" placeholder="请输入验证码">
           <%-- <a href="<%=basePath%>user/sms">获取验证码</a>--%></p>
        <input type="button"  id="btn"  value="获取验证码"></p>



        <div id="login_control">
            <input type="button" id="btn_login" value="登录" οnclick="loginUser()">
            <a href="<%=path%>user/index1">
                <input type="button" id="btn_register" value="注册">
            </a>
            <a id="forget_pwd"  href="<%=path%>user/forgetPassword">忘记密码？</a>
        </div>
    </form>
</div>
</body>
</html>

四、login.js

// 表单提交验证
function loginUser() {
    var userName = $('#userName').val();
    var password = $('#password').val();
    var code= $('#code').val();
    var tel= $('#tel').val();
    alert(tel);
    var telCode=$('#telCode').val();
    if (userName == '') {
        alert('请输入用户名！');
        return false;
    }
    if (password == '') {
        alert('请输入密码！');
        return false;
    }
    if (code == '') {
        alert('请输入验证码！');
        return false;
    }
    if(tel==''){
        alert("请输入手机号码！")
        return false;
    }
    if (!(/^1[3|4|5|7|8][0-9]{9}$/.test(tel))) {
        alert('手机号不正确！');
        return false;
    }
    if(telCode==''){
        alert("请输入验证码");
        return false;
    }
    $.ajax({
        type: "post",
        url: "user/login",
        data: {
            userName: userName,
            password: password,
            code:code,
            tel:tel,
            telCode:telCode
        },
        dataType: "json",
        success : function(data) {
            console.log(data.result);
            if(data.result){
                alert("登录成功");
                window.location.href="user/getAllUser";
            } else if(data.result.false=0){
                alert("请输入正确的账号和密码");
                window.location.reload();
            }else if(data.result.false=1){
                alert("手机验证码不正确");
                window.location.reload();
            }else{
                alert("验证码不正确");
            }
        },
        error : function() {
            alert("出错啦！！！")
        }
    });
}

五、页面展示

样式没有贴出来，可以自己设置，有什么不懂得随时问，如果回复不及时加QQ：501397578 验证码：孙创业

转载于:https://www.cnblogs.com/thcy1314/p/9592828.html

weixin_30832351

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
java实现短信发验证码登录

先参考中国网建官网：http://www.smschinese.cn/一.pom.xml配置<dependency> <groupId>commons-codec</groupId> <artifactId>commons-codec</artifactId> ...
复制链接

扫一扫