一、前言
這幾天在研究二維碼的掃碼登錄。初來乍到,還有好多東西不懂。在網上看到有人寫了一些通過QRCode或者Zxing實現二維碼的生成和解碼。一時興起,決定自己親手試一試。本人是通過QRCode實現的,下面具體的說一下。
二、二維碼原理
基礎知識參考:http://news.cnblogs.com/n/191671/
很重要的一部分知識:二維碼一共有 40 個尺寸。官方叫版本 Version。Version 1 是 21 x 21 的矩陣,Version 2 是 25 x 25 的矩陣,Version 3 是 29 的尺寸,每增加一個 version,就會增加 4 的尺寸,公式是:(V-1)*4 + 21(V是版本號) 最高 Version 40,(40-1)*4+21 = 177,所以最高是 177 x 177 的正方形。

三、二維碼生成和解碼工具
1.效果如下圖所示。

生成二維碼(不含有logo) 生成二維碼(帶有logo)

對應的解碼
工具很簡單,但是很實用。界面還可以美化,功能還可以加強,初心只是為了練習一下二維碼的生成和解析。
2.二維碼生成和解析的核心類
View Code
3.具體注意的地方
//二維碼 SIZE private static final int CODE_IMG_SIZE = 235; // LOGO SIZE (為了插入圖片的完整性,我們選擇在最中間插入,而且長寬建議為整個二維碼的1/7至1/4) private static final int INSERT_IMG_SIZE = CODE_IMG_SIZE/5;
對於二維碼圖片大小還是不會計算,如果有人看到這里,方便的話可以告訴小弟一聲。我這里的這個值(235)是通過設定好QrcodeVersion(版 本15),以及繪制圖像時偏移量pixoff=2和black區域的size=3,最終生成圖片后,將圖片通過ps打開,然后確定圖片的尺寸信息。
還有就是中間的logo不要過大,否則會導致QRCode解析出錯,但是手機掃碼不一定會出錯。感覺手機掃碼解析比QRCode解析能力強。
Qrcode qrcodeHandler = new Qrcode(); // 設置二維碼排錯率,可選L(7%)、M(15%)、Q(25%)、H(30%),排錯率越高可存儲的信息越少,但對二維碼清晰度的要求越小 qrcodeHandler.setQrcodeErrorCorrect('M'); qrcodeHandler.setQrcodeEncodeMode('B'); // 設置設置二維碼尺寸,取值范圍1-40,值越大尺寸越大,可存儲的信息越大 qrcodeHandler.setQrcodeVersion(15);
一般設置version就好了,網上好多都是7或者8,我嘗試下更大的值,15的話二維碼看起來很密集。
// 設置偏移量,不設置可能導致解析出錯 final int pixoff = 2; final int sz = 3; // 輸出內容> 二維碼 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 * sz + pixoff, i * sz + pixoff, sz, sz); } } } }
繪制black區域的時候要設置偏移量,要不然可能導致二維碼識別出錯。 black區域的大小根據實際情況來就好。
四、二維碼登錄原理
1.原理圖

按照自己的理解畫的,結合上圖,看一下代碼吧。
2.GetQrCodeController.java
/** * @author hjzgg * 獲取二維碼圖片 */ @Controller public class GetQrCodeController { @RequestMapping(value="/getTwoDemensionCode") @ResponseBody public String getTwoDemensionCode(HttpServletRequest request){ String uuid = UUID.randomUUID().toString().substring(0, 8); String ip = "localhost"; try { ip = InetAddress.getLocalHost().getHostAddress(); } catch (UnknownHostException e) { e.printStackTrace(); } //二維碼內容 String content = "http://" + ip + ":8080/yycc-portal/loginPage?uuid=" + uuid; //生成二維碼 String imgName = uuid + "_" + (int) (new Date().getTime() / 1000) + ".png"; String imgPath = request.getServletContext().getRealPath("/") + imgName; //String insertImgPath = request.getServletContext().getRealPath("/")+"img/hjz.jpg"; TwoDimensionCode handler = new TwoDimensionCode(); handler.encoderQRCode(content, imgPath, "png", null); //生成的圖片訪問地址 String qrCodeImg = "http://" + ip + ":8080/yycc-portal/" + imgName; JSONObject json = new JSONObject(); json.put("uuid", uuid); json.put("qrCodeImg", qrCodeImg); return json.toString(); } }
用戶請求掃碼方式登錄,后台生成二維碼,將uuid和二維碼訪問地址傳給用戶。
3.LongConnectionCheckController.java
@Controller
public class LongConnectionCheckController { private static final int LONG_TIME_WAIT = 30000;//30s @Autowired private RedisTemplate<String, Object> redisTemplate; @RequestMapping(value="/longUserCheck") public String longUserCheck(String uuid){ long inTime = new Date().getTime(); Boolean bool = true; while (bool) { try { Thread.sleep(500); } catch (InterruptedException e) { e.printStackTrace(); } //檢測登錄 UserVo userVo = (UserVo) redisTemplate.opsForValue().get(uuid); System.out.println("LongConnectionCheckAction:" + userVo); if(userVo != null){ redisTemplate.delete(uuid); return "forward:/loginTest?username=" + userVo.getUsername() + "&password=" + userVo.getPassword(); }else{ if(new Date().getTime() - inTime > LONG_TIME_WAIT){ bool = false; redisTemplate.delete(uuid); } } } return "forward:/longConnectionFail"; } @RequestMapping(value="/longConnectionFail") @ResponseBody public String longConnectionFail(){ JSONObject json = new JSONObject(); json.put("success", false); json.put("message", "長連接已斷開!"); return json.toString(); } }
用戶獲得uuid和二維碼之后,請求后台的長連接(攜帶uuid),不斷檢測uuid是否有對應的用戶信息,如果有則轉到登錄模塊(攜帶登錄信息)。
4.PhoneLoginController.java
/** * @author hjzgg * 手機登錄驗證 */ @Controller public class PhoneLoginController { @Autowired private RedisTemplate<String, Object> redisTemplate; @RequestMapping(value="/phoneLogin") public void phoneLogin(String uuid, String username, String password){ UserVo user = (UserVo) redisTemplate.opsForValue().get(uuid); if(user == null) { user = new UserVo(username, password); } System.out.println(user); redisTemplate.opsForValue().set(uuid, user); } @RequestMapping(value="/loginPage") public String loginPage(HttpServletRequest request, String uuid){ request.setAttribute("uuid", uuid); return "phone_login"; } }
用戶通過手機掃碼之后,在手機端輸入用戶信息,然后進行驗證(攜帶uuid),后台更新uuid對應的用戶信息,以便長連接可以檢測到用戶登錄信息。
五、源碼下載
二維碼登錄例子以及二維碼生成解析工具源碼下載:https://github.com/hjzgg/QRCodeLoginDemo
