仿web版微信,移动端扫描二维码登录web版本

来源:互联网 发布:我的世界 编程教程 编辑:程序博客网 时间:2024/04/29 09:07

首先,

1.PC端请求,生成一个唯一标识uuid,生成一个二维码,二维码的内容为移动端端的接口,参数为uuid

2.移动端获取uuid字段,将自己的用户名,密码请求到服务端的登录接口

3.讲移动端的请求,检测是否已登录,根据loginUserMap.get(uuid)是否为空,为空的话,登录,将登录信息put到loginUserMap中;不为空,显示已登录。

4.Java服务端一直请求,检测uuid是否为空。

5.uuid不为空了长连接停止循环,返回登录状态。


代码:

cn.kuwo下的3个servlet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
packagecn.kuwo;
 
importjava.io.IOException;
importjava.io.PrintWriter;
importjava.util.Date;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importcn.kuwo.util.TwoDimensionCode;
 
/**
 * 生成二维码图片以及uuid
 * @author zijuntang
 *
 */
publicclass GetQrCodeServlet extendsHttpServlet {
    privatestatic final long serialVersionUID = 1L;
    protectedvoid doGet(HttpServletRequest request,
            HttpServletResponse response) throwsServletException, IOException {
        doPost(request, response);
    }
    protectedvoid doPost(HttpServletRequest request,
            HttpServletResponse response) throwsServletException, IOException {
        PrintWriter out = response.getWriter();
         
        //生成唯一ID
        intuuid = (int) (Math.random() * 100000);
        //二维码内容
        String content = "http://60.28.201.37:8380/QrCodeLoginPro/Login.html?uuid="+ uuid;
        //生成二维码
        String imgName =  uuid + "_"+ (int) (newDate().getTime() / 1000) + ".png";
        String imgPath = "/home/web/apache/htdocs/QrCodeLogin/"+ imgName;
        TwoDimensionCode handler = newTwoDimensionCode();
        handler.encoderQRCode(content, imgPath, "png");
         
        //生成的图片访问地址
        String qrCodeImg = "http://60.28.201.37/QrCodeLogin/"+ imgName;
        String jsonStr = "{\"uuid\":"+ uuid + ",\"qrCodeImg\":\""+ qrCodeImg + "\"}";
        out.print(jsonStr);
        out.flush();
        out.close();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
packagecn.kuwo;
 
importjava.io.IOException;
importjava.io.PrintWriter;
importjava.util.Date;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importcn.kuwo.vo.LoginUserVo;
importcn.kuwo.vo.UserVo;
 
/**
 * 用长连接,检查登录状态
 * @author zijuntang
 *
 */
publicclass LongConnectionCheckServlet extendsHttpServlet {
    privatestatic final long serialVersionUID = 1L;
    publicvoid doGet(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {
        doPost(request, response);
    }
    publicvoid doPost(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {
        String uuid = request.getParameter("uuid");
        String jsonStr = "";
        System.out.println("in");
        System.out.println("uuid:"+ uuid);
        longinTime = newDate().getTime();
        Boolean bool = true;
        while(bool) {
            try{
                Thread.sleep(1000);
            }catch(InterruptedException e) {
                e.printStackTrace();
            }
            //检测登录
            UserVo userVo = LoginUserVo.getLoginUserMap().get(uuid);
            System.out.println("userVo:"+ userVo);
            if(userVo != null){
                bool = false;
                jsonStr = "{\"uname\":\""+userVo.getUname()+"\"}";
                LoginUserVo.getLoginUserMap().remove(uuid);
            }else{
                if(newDate().getTime() - inTime > 5000){
                    bool = false;
                }
            }
        }
        System.out.println("login ok : " + jsonStr);
        PrintWriter out = response.getWriter();
        out.print(jsonStr);
        out.flush();
        out.close();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
packagecn.kuwo;
 
importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importcn.kuwo.vo.LoginUserVo;
importcn.kuwo.vo.UserVo;
 
/**
 * 二维码手机端登录
 * @author zijuntang
 *
 */
publicclass PhoneLoginServlet extendsHttpServlet {
    privatestatic final long serialVersionUID = 1L;
    publicPhoneLoginServlet() {
        super();
        // TODO Auto-generated constructor stub
    }
    protectedvoid doGet(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {
        doPost(request, response);
    }
    protectedvoid doPost(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {
        String uuid = request.getParameter("uuid");
        String uname = request.getParameter("uname");
        String upwd = request.getParameter("upwd");
        System.out.println(uuid);
        System.out.println(uname);
        System.out.println(upwd);
        //TODO 验证登录
        booleanbool = true;
        if(bool){
            //将登陆信息存入map
            UserVo userVo = LoginUserVo.getLoginUserMap().get(uuid);
            if(userVo == null){
                userVo = newUserVo();
                userVo.setUname(uname);
                userVo.setUpwd(upwd);
                LoginUserVo.getLoginUserMap().put(uuid, userVo);
            }
        }
        PrintWriter out = response.getWriter();
        out.print(bool);
        out.flush();
        out.close();
    }
}

cn.kuwo.util包下的生成二维码的封装类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
packagecn.kuwo.util; 
   
importjava.awt.Color; 
importjava.awt.Graphics2D; 
importjava.awt.image.BufferedImage; 
importjava.io.File; 
importjava.io.IOException; 
importjava.io.InputStream; 
importjava.io.OutputStream; 
importjavax.imageio.ImageIO; 
importjp.sourceforge.qrcode.QRCodeDecoder; 
importjp.sourceforge.qrcode.exception.DecodingFailedException; 
importcom.swetake.util.Qrcode; 
   
publicclass TwoDimensionCode { 
       
    /**
     * 生成二维码(QRCode)图片
     * @param content 存储内容
     * @param imgPath 图片路径
     */ 
    publicvoid encoderQRCode(String content, String imgPath) { 
        this.encoderQRCode(content, imgPath, "png",7); 
    
       
    /**
     * 生成二维码(QRCode)图片
     * @param content 存储内容
     * @param output 输出流
     */ 
    publicvoid encoderQRCode(String content, OutputStream output) { 
        this.encoderQRCode(content, output, "png",7); 
    
       
    /**
     * 生成二维码(QRCode)图片
     * @param content 存储内容
     * @param imgPath 图片路径
     * @param imgType 图片类型
     */ 
    publicvoid encoderQRCode(String content, String imgPath, String imgType) { 
        this.encoderQRCode(content, imgPath, imgType, 7); 
    
       
    /**
     * 生成二维码(QRCode)图片
     * @param content 存储内容
     * @param output 输出流
     * @param imgType 图片类型
     */ 
    publicvoid encoderQRCode(String content, OutputStream output, String imgType) { 
        this.encoderQRCode(content, output, imgType, 7); 
    
   
    /**
     * 生成二维码(QRCode)图片
     * @param content 存储内容
     * @param imgPath 图片路径
     * @param imgType 图片类型
     * @param size 二维码尺寸
     */ 
    publicvoid encoderQRCode(String content, String imgPath, String imgType, intsize) { 
        try
            BufferedImage bufImg = this.qRCodeCommon(content, imgType, size); 
               
            File imgFile = newFile(imgPath);
            if(!imgFile.exists())
            {
                imgFile.mkdirs();
            }
            // 生成二维码QRCode图片 
            ImageIO.write(bufImg, imgType, imgFile); 
        }catch(Exception e) { 
            e.printStackTrace(); 
        
    
   
    /**
     * 生成二维码(QRCode)图片
     * @param content 存储内容
     * @param output 输出流
     * @param imgType 图片类型
     * @param size 二维码尺寸
     */ 
    publicvoid encoderQRCode(String content, OutputStream output, String imgType, intsize) { 
        try
            BufferedImage bufImg = this.qRCodeCommon(content, imgType, size); 
            // 生成二维码QRCode图片 
            ImageIO.write(bufImg, imgType, output); 
        }catch(Exception e) { 
            e.printStackTrace(); 
        
    
       
    /**
     * 生成二维码(QRCode)图片的公共方法
     * @param content 存储内容
     * @param imgType 图片类型
     * @param size 二维码尺寸
     * @return
     */ 
    privateBufferedImage qRCodeCommon(String content, String imgType, intsize) { 
        BufferedImage bufImg = null
        try
            Qrcode qrcodeHandler = newQrcode(); 
            // 设置二维码排错率,可选L(7%)、M(15%)、Q(25%)、H(30%),排错率越高可存储的信息越少,但对二维码清晰度的要求越小 
            qrcodeHandler.setQrcodeErrorCorrect('M'); 
            qrcodeHandler.setQrcodeEncodeMode('B'); 
            // 设置设置二维码尺寸,取值范围1-40,值越大尺寸越大,可存储的信息越大 
            qrcodeHandler.setQrcodeVersion(size); 
            // 获得内容的字节数组,设置编码格式 
            byte[] contentBytes = content.getBytes("utf-8"); 
            // 图片尺寸 
            intimgSize = 67+ 12* (size - 1); 
            bufImg = newBufferedImage(imgSize, imgSize, BufferedImage.TYPE_INT_RGB); 
            Graphics2D gs = bufImg.createGraphics(); 
            // 设置背景颜色 
            gs.setBackground(Color.WHITE); 
            gs.clearRect(0,0, imgSize, imgSize); 
   
            // 设定图像颜色> BLACK 
            gs.setColor(Color.BLACK); 
            // 设置偏移量,不设置可能导致解析出错 
            intpixoff = 2
            // 输出内容> 二维码 
            if(contentBytes.length > 0&& contentBytes.length < 800) { 
                boolean[][] codeOut = qrcodeHandler.calQrcode(contentBytes); 
                for(inti = 0; i < codeOut.length; i++) { 
                    for(intj = 0; j < codeOut.length; j++) { 
                        if(codeOut[j][i]) { 
                            gs.fillRect(j * 3+ pixoff, i * 3+ pixoff, 3,3); 
                        
                    
                
            }else
                thrownew Exception("QRCode content bytes length = " + contentBytes.length + " not in [0, 800]."); 
            
            gs.dispose(); 
            bufImg.flush(); 
        }catch(Exception e) { 
            e.printStackTrace(); 
        
        returnbufImg; 
    
       
    /**
     * 解析二维码(QRCode)
     * @param imgPath 图片路径
     * @return
     */ 
    publicString decoderQRCode(String imgPath) { 
        // QRCode 二维码图片的文件 
        File imageFile = newFile(imgPath); 
        BufferedImage bufImg = null
        String content = null
        try
            bufImg = ImageIO.read(imageFile); 
            QRCodeDecoder decoder = newQRCodeDecoder(); 
            content = newString(decoder.decode(newTwoDimensionCodeImage(bufImg)), "utf-8");  
        }catch(IOException e) { 
            System.out.println("Error: " + e.getMessage()); 
            e.printStackTrace(); 
        }catch(DecodingFailedException dfe) { 
            System.out.println("Error: " + dfe.getMessage()); 
            dfe.printStackTrace(); 
        
        returncontent; 
    
       
    /**
     * 解析二维码(QRCode)
     * @param input 输入流
     * @return
     */ 
    publicString decoderQRCode(InputStream input) { 
        BufferedImage bufImg = null
        String content = null
        try
            bufImg = ImageIO.read(input); 
            QRCodeDecoder decoder = newQRCodeDecoder(); 
            content = newString(decoder.decode(newTwoDimensionCodeImage(bufImg)), "utf-8");  
        }catch(IOException e) { 
            System.out.println("Error: " + e.getMessage()); 
            e.printStackTrace(); 
        }catch(DecodingFailedException dfe) { 
            System.out.println("Error: " + dfe.getMessage()); 
            dfe.printStackTrace(); 
        
        returncontent; 
    
   
    publicstatic void main(String[] args) { 
        String imgPath = "D:/aaa/Michael_QRCode.png"
        String encoderContent = "http://60.28.201.37:8380/QrCodeLoginPro/Login.html"
        TwoDimensionCode handler = newTwoDimensionCode(); 
        handler.encoderQRCode(encoderContent, imgPath, "png");
         
         
        /*
        System.out.println("========encoder success"); 
        String decoderContent = handler.decoderQRCode(imgPath); 
        System.out.println("解析结果如下:"); 
        System.out.println(decoderContent); 
        System.out.println("========decoder success!!!"); 
        */
    
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
packagecn.kuwo.util;
   
importjava.awt.image.BufferedImage; 
importjp.sourceforge.qrcode.data.QRCodeImage; 
   
publicclass TwoDimensionCodeImage implementsQRCodeImage { 
   
    BufferedImage bufImg; 
       
    publicTwoDimensionCodeImage(BufferedImage bufImg) { 
        this.bufImg = bufImg; 
    
       
    @Override 
    publicint getHeight() { 
        returnbufImg.getHeight(); 
    
   
    @Override 
    publicint getPixel(intx, inty) { 
        returnbufImg.getRGB(x, y); 
    
   
    @Override 
    publicint getWidth() { 
        returnbufImg.getWidth(); 
    
   
}

cn.kuwo.vo下的2个数据层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
packagecn.kuwo.vo;
 
importjava.util.HashMap;
 
publicclass LoginUserVo {
    privatestatic HashMap<String, UserVo> loginUserMap = newHashMap<String, UserVo>();
    privatestatic LoginUserVo loginUserVo;
    publicstatic LoginUserVo getVo(){
        if(loginUserVo == null){
            loginUserVo = newLoginUserVo();
        }
        returnloginUserVo;
    }
    publicstatic HashMap<String, UserVo> getLoginUserMap() {
        returnloginUserMap;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
packagecn.kuwo.vo;
 
publicclass UserVo {
    privateString uname;
    privateString upwd;
    publicString getUname() {
        returnuname;
    }
    publicvoid setUname(String uname) {
        this.uname = uname;
    }
    publicString getUpwd() {
        returnupwd;
    }
    publicvoid setUpwd(String upwd) {
        this.upwd = upwd;
    }
}

2个网页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript"src="js/jquery-1.11.0.min.js"></script>
<body>
    <div id="divCon">
        <img src=""id="QrCodeImg"/>
    </div>
</body>
<script type="text/javascript">
    $(document).ready(function() {
        var uuid;
        $.get("/QrCodeLoginPro/GetQrCodeServlet", function(data, status) {
            var obj = eval("("+ data + ")");
            //存储UUID
            uuid = obj.uuid;
            //显示二维码
            $("#QrCodeImg").attr("src", obj.qrCodeImg);
            //开始验证登录
            validateLogin();
        });
 
        function validateLogin(){
            $.get("/QrCodeLoginPro/LongConnectionCheckServlet?uuid="+ uuid , function(data, status) {
                if(data == ""){
                    validateLogin();
                }else{
                    var obj = eval("("+ data + ")");
                    alert("登录成功了:"+ obj.uname);
                }
            });
        }
    });
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
.l_m_l {
    float: left;
    font-size: 14px;
    padding: 5px 00 0;
    width: 330px;
    color: #414141;
}
 
.l_m_linput {
    height: 31px;
    position: relative;
    width: 300px;
    margin-bottom: 21px;
}
 
.l_m_linput span {
    float: left;
    width: 78px;
    text-align: right;
    line-height: 31px;
}
 
input {
    float: left;
    width: 195px;
    height: 24px;
    line-height: 24px;
    background: #f2f2f2;
    border: 1px solid #c4c4c4;
    padding: 2px 22px 2px 2px;
}
 
.l_mimacon {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 15px;
    height: 17px;
    background: url(img/l_mimacon.png)
        no-repeat;
}
 
.l_peoplecon {
    position: absolute;
    top: 7px;
    right: 6px;
    width: 15px;
    height: 15px;
    background: url(img/l_peoplecon.png)
        no-repeat;
}
 
.l_m_lload a {
    display: block;
    width: 154px;
    height: 40px;
    background:
        url(img/l_loadingbtn.png)
        no-repeat;
    margin:0auto;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    color: #52340c;
    text-decoration: none;
}
</style>
<script type="text/javascript"src="js/jquery-1.11.0.min.js"></script>
<body style="background-color: #333333">
    <div style="margin-left: 100px;"><img src="img/logo.png"/></div>
    <div >
        <pclass="l_m_linput">
            <span><font color="#fff">用户名:</font></span><input type="text"id="login_name"value="zijuntang"><em
                class="l_peoplecon"></em>
        </p>
        <pclass="l_m_linput">
            <span><font color="#fff">密码:</font></span><input type="password"id="login_psw"value="tangzijun"><em
                class="l_mimacon"></em>
        </p>
        <divclass="l_m_linput2"></div>
        <divclass="l_m_lload">
            <a href="javascript:login();">登录</a>
        </div>
    </div>
</body>
<script type="text/javascript">
    //登录
    function login(){
        $.post("/QrCodeLoginPro/PhoneLoginServlet", {
            uuid : $.getUrlParam('uuid'),
            uname:$("#login_name").val(),
            upwd:$("#login_psw").val()
        }, function(data, status) {
            if(data == ""){
                alert("登录失败");
            }else{
                alert("登录成功");
            }
        });
    }
     
    //获取网页参数
    (function($){
        $.getUrlParam = function(name){
            var reg = newRegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)returnunescape(r[2]);returnnull;
        }
        })(jQuery);
</script>
</html>

web.xml配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<?xml version="1.0"encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    id="WebApp_ID"version="2.5">
    <display-name>QrCodeLoginPro</display-name>
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
    <servlet>
        <description></description>
        <display-name>长连接检查登录状态</display-name>
        <servlet-name>LongConnectionCheckServlet</servlet-name>
        <servlet-class>cn.kuwo.LongConnectionCheckServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>LongConnectionCheckServlet</servlet-name>
        <url-pattern>/LongConnectionCheckServlet</url-pattern>
    </servlet-mapping>
 
    <servlet>
        <description>获取二维码图片以及uuid</description>
        <display-name>GetQrCodeServlet</display-name>
        <servlet-name>GetQrCodeServlet</servlet-name>
        <servlet-class>cn.kuwo.GetQrCodeServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>GetQrCodeServlet</servlet-name>
        <url-pattern>/GetQrCodeServlet</url-pattern>
    </servlet-mapping>
 
    <servlet>
        <description>手机扫描二维码之后进行登录</description>
        <display-name>PhoneLoginServlet</display-name>
        <servlet-name>PhoneLoginServlet</servlet-name>
        <servlet-class>cn.kuwo.PhoneLoginServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>PhoneLoginServlet</servlet-name>
        <url-pattern>/PhoneLoginServlet</url-pattern>
    </servlet-mapping>
</web-app>

此外还需要1个二维码开源包:QRCode.jar

源码下载:http://files.cnblogs.com/zijun/%E4%BA%8C%E7%BB%B4%E7%A0%81%E7%99%BB%E5%BD%95%E4%BE%8B%E5%AD%90.rar


0 0