實現手機掃描二維碼進行登入
阿新 • • 發佈：2018-12-30
專案結構：
實現流程：
pc端：
1:開啟二維碼登入網頁index.html
2:index.html呼叫GetQrCodeServlet
3:GetQrCodeServlet幹2件事
a:生成隨機的uuid,是一個唯一標識，該標識貫穿整個流程
b:生成二維碼圖片，二維碼資訊：http://xx.xx.xx.xx:8080/QrCodeLoginPro/Login.html?uuid=" + uuid
4:index頁面展示二維碼
5:index頁面呼叫LongConnectionCheckServlet進行長連線輪詢操作，引數為uuid
6:LongConnectionCheckServlet只幹1件事
a:拿到uuid後迴圈檢查loginUserMap中uuid是否不為null。
7:如果為null則代表沒有登入，index.html將繼續進行輪詢
ps: LongConnectionCheckServlet 一個長連線請求檢測登入狀態
loginUserMap 是一個靜態的map結構的登入池，uuid為key , 登入資訊為value
手機端：
1:掃描pc端的二維碼
2:開啟二維碼中的網頁 http://xx.xx.xx.xx:8380/QrCodeLoginPro/Login.html?uuid=" + uuid
3:登入，將uname upwd uuid 傳遞給登入程式PhoneLoginServlet
4:PhoneLoginServlet幹2件事
a:檢測登入
b:登入成功後將登入資訊插入到loginUserMap中去，uuid為key
pc端：
1:繼續輪詢檢測uuid中是否為null
2:登入後的uuid中就不為null了，此時LongConnectionCheckServlet停止迴圈，返回登入狀態。
程式碼：
cn.kuwo下的3個servlet
package cn.kuwo; import java.io.IOException; import java.io.PrintWriter; import java.util.Date;import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import cn.kuwo.util.TwoDimensionCode; /** * 生成二維碼圖片以及uuid * @author zijuntang * */ public class GetQrCodeServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out = response.getWriter(); //生成唯一ID int uuid = (int) (Math.random() * 100000); //二維碼內容 String content = "http://xx.xx.xx.xx:8380/QrCodeLoginPro/Login.html?uuid=" + uuid; //生成二維碼 String imgName = uuid + "_" + (int) (new Date().getTime() / 1000) + ".png"; String imgPath = "/home/web/apache/htdocs/QrCodeLogin/" + imgName; TwoDimensionCode handler = new TwoDimensionCode(); handler.encoderQRCode(content, imgPath, "png"); //生成的圖片訪問地址 String qrCodeImg = "http://xx.xx.xx.xx/QrCodeLogin/" + imgName; String jsonStr = "{\"uuid\":" + uuid + ",\"qrCodeImg\":\"" + qrCodeImg + "\"}"; out.print(jsonStr); out.flush(); out.close(); } }
package cn.kuwo; import java.io.IOException; import java.io.PrintWriter; import java.util.Date; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import cn.kuwo.vo.LoginUserVo; import cn.kuwo.vo.UserVo; /** * 用長連線，檢查登入狀態 * @author zijuntang * */ public class LongConnectionCheckServlet extends HttpServlet { private static final long serialVersionUID = 1L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String uuid = request.getParameter("uuid"); String jsonStr = ""; System.out.println("in"); System.out.println("uuid:" + uuid); long inTime = new Date().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(new Date().getTime() - inTime > 5000){ bool = false; } } } System.out.println("login ok : " + jsonStr); PrintWriter out = response.getWriter(); out.print(jsonStr); out.flush(); out.close(); } }
package cn.kuwo; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import cn.kuwo.vo.LoginUserVo; import cn.kuwo.vo.UserVo; /** * 二維碼手機端登入 * @author zijuntang * */ public class PhoneLoginServlet extends HttpServlet { private static final long serialVersionUID = 1L; public PhoneLoginServlet() { super(); // TODO Auto-generated constructor stub } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, 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 驗證登入 boolean bool = true; if(bool){ //將登陸資訊存入map UserVo userVo = LoginUserVo.getLoginUserMap().get(uuid); if(userVo == null){ userVo = new UserVo(); 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包下的生成二維碼的封裝類
package cn.kuwo.util; import java.awt.Color; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import javax.imageio.ImageIO; import jp.sourceforge.qrcode.QRCodeDecoder; import jp.sourceforge.qrcode.exception.DecodingFailedException; import com.swetake.util.Qrcode; public class TwoDimensionCode { /** * 生成二維碼(QRCode)圖片 * @param content 儲存內容 * @param imgPath 圖片路徑 */ public void encoderQRCode(String content, String imgPath) { this.encoderQRCode(content, imgPath, "png", 7); } /** * 生成二維碼(QRCode)圖片 * @param content 儲存內容 * @param output 輸出流 */ public void encoderQRCode(String content, OutputStream output) { this.encoderQRCode(content, output, "png", 7); } /** * 生成二維碼(QRCode)圖片 * @param content 儲存內容 * @param imgPath 圖片路徑 * @param imgType 圖片型別 */ public void encoderQRCode(String content, String imgPath, String imgType) { this.encoderQRCode(content, imgPath, imgType, 7); } /** * 生成二維碼(QRCode)圖片 * @param content 儲存內容 * @param output 輸出流 * @param imgType 圖片型別 */ public void encoderQRCode(String content, OutputStream output, String imgType) { this.encoderQRCode(content, output, imgType, 7); } /** * 生成二維碼(QRCode)圖片 * @param content 儲存內容 * @param imgPath 圖片路徑 * @param imgType 圖片型別 * @param size 二維碼尺寸 */ public void encoderQRCode(String content, String imgPath, String imgType, int size) { try { BufferedImage bufImg = this.qRCodeCommon(content, imgType, size); File imgFile = new File(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 二維碼尺寸 */ public void encoderQRCode(String content, OutputStream output, String imgType, int size) { 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 */ private BufferedImage qRCodeCommon(String content, String imgType, int size) { BufferedImage bufImg = null; try { Qrcode qrcodeHandler = new Qrcode(); // 設定二維碼排錯率，可選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"); // 圖片尺寸 int imgSize = 67 + 12 * (size - 1); bufImg = new BufferedImage(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); // 設定偏移量，不設定可能導致解析出錯 int pixoff = 2; // 輸出內容> 二維碼 if (contentBytes.length > 0 && contentBytes.length < 800) { boolean[][] codeOut = qrcodeHandler.calQrcode(contentBytes); for (int i = 0; i < codeOut.length; i++) { for (int j = 0; j < codeOut.length; j++) { if (codeOut[j][i]) { gs.fillRect(j * 3 + pixoff, i * 3 + pixoff, 3, 3); } } } } else { throw new Exception("QRCode content bytes length = " + contentBytes.length + " not in [0, 800]."); } gs.dispose(); bufImg.flush(); } catch (Exception e) { e.printStackTrace(); } return bufImg; } /** * 解析二維碼（QRCode） * @param imgPath 圖片路徑 * @return */ public String decoderQRCode(String imgPath) { // QRCode 二維碼圖片的檔案 File imageFile = new File(imgPath); BufferedImage bufImg = null; String content = null; try { bufImg = ImageIO.read(imageFile); QRCodeDecoder decoder = new QRCodeDecoder(); content = new String(decoder.decode(new TwoDimensionCodeImage(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(); } return content; } /** * 解析二維碼（QRCode） * @param input 輸入流 * @return */ public String decoderQRCode(InputStream input) { BufferedImage bufImg = null; String content = null; try { bufImg = ImageIO.read(input); QRCodeDecoder decoder = new QRCodeDecoder(); content = new String(decoder.decode(new TwoDimensionCodeImage(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(); } return content; } public static void main(String[] args) { String imgPath = "D:/aaa/Michael_QRCode.png"; String encoderContent = "http://xx.xx.xx.xx:8380/QrCodeLoginPro/Login.html"; TwoDimensionCode handler = new TwoDimensionCode(); 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!!!"); */ } }
package cn.kuwo.util; import java.awt.image.BufferedImage; import jp.sourceforge.qrcode.data.QRCodeImage; public class TwoDimensionCodeImage implements QRCodeImage { BufferedImage bufImg; public TwoDimensionCodeImage(BufferedImage bufImg) { this.bufImg = bufImg; } @Override public int getHeight() { return bufImg.getHeight(); } @Override public int getPixel(int x, int y) { return bufImg.getRGB(x, y); } @Override public int getWidth() { return bufImg.getWidth(); } }
cn.kuwo.vo下的2個數據層
package cn.kuwo.vo; import java.util.HashMap; public class LoginUserVo { private static HashMap<String, UserVo> loginUserMap = new HashMap<String, UserVo>(); private static LoginUserVo loginUserVo; public static LoginUserVo getVo(){ if(loginUserVo == null){ loginUserVo = new LoginUserVo(); } return loginUserVo; } public static HashMap<String, UserVo> getLoginUserMap() { return loginUserMap; } }
package cn.kuwo.vo; public class UserVo { private String uname; private String upwd; public String getUname() { return uname; } public void setUname(String uname) { this.uname = uname; } public String getUpwd() { return upwd; } public void setUpwd(String upwd) { this.upwd = upwd; } }
2個網頁
<!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>