二維碼登錄原理及生成與解析

一、前言

　　這幾天在研究二維碼的掃碼登錄。初來乍到，還有好多東西不懂。在網上看到有人寫了一些通過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.二維碼生成和解析的核心類

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.Shape;
import java.awt.geom.RoundRectangle2D;
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 com.swetake.util.Qrcode;

import jp.sourceforge.qrcode.QRCodeDecoder;
import jp.sourceforge.qrcode.exception.DecodingFailedException;  
  
public class TwoDimensionCode {  
    //二維碼 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;
      
    /** 
     * 生成二維碼(QRCode)圖片 
     * @param content 存儲內容 
     * @param imgPath 二維碼圖片存儲路徑 
     * @param imgType 圖片類型 
     * @param insertImgPath logo圖片路徑
     */  
    public void encoderQRCode(String content, String imgPath, String imgType, String insertImgPath) {  
        try {  
            BufferedImage bufImg = this.qRCodeCommon(content, imgType, insertImgPath);  
              
            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 圖片類型 
     */  
    public void encoderQRCode(String content, OutputStream output, String imgType) {  
        try {  
            BufferedImage bufImg = this.qRCodeCommon(content, imgType, null);  
            // 生成二維碼QRCode圖片  
            ImageIO.write(bufImg, imgType, output);  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
    }  
    
    /**
     * @param content
     * @param imgType
     * @param size
     * @param imgPath    嵌入圖片的名稱
     * @return
     */
    private BufferedImage qRCodeCommon(String content, String imgType, String imgPath){
        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(15);  
            // 獲得內容的字節數組，設置編碼格式  
            byte[] contentBytes = content.getBytes("utf-8");  
            // 圖片尺寸  
            int imgSize = CODE_IMG_SIZE;  
            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);  
            // 設置偏移量，不設置可能導致解析出錯  
            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);  
                        }  
                    }  
                }  
            } else {  
                throw new Exception("QRCode content bytes length = " + contentBytes.length + " not in [0, 800].");  
            }  
            //嵌入logo
            if(imgPath != null)
                this.insertImage(bufImg, imgPath, true);
            gs.dispose();  
            bufImg.flush();  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
        return bufImg;  
    }
    
    private void insertImage(BufferedImage source, String imgPath,  
            boolean needCompress) throws Exception {  
        File file = new File(imgPath);  
        if (!file.exists()) {  
            System.err.println(""+imgPath+"   該文件不存在！");  
            return;  
        }  
        Image src = ImageIO.read(new File(imgPath));  
        int width = src.getWidth(null);  
        int height = src.getHeight(null);  
        if (needCompress) { // 壓縮LOGO  
            if (width > INSERT_IMG_SIZE) {  
                width = INSERT_IMG_SIZE;  
            }  
            if (height > INSERT_IMG_SIZE) {  
                height = INSERT_IMG_SIZE;  
            }  
            Image image = src.getScaledInstance(width, height,  
                    Image.SCALE_SMOOTH);  
            BufferedImage tag = new BufferedImage(width, height,  
                    BufferedImage.TYPE_INT_RGB);  
            Graphics g = tag.getGraphics();  
            g.drawImage(image, 0, 0, null); // 繪制縮小后的圖  
            g.dispose();  
            src = image;  
        }  
        // 插入LOGO  
        Graphics2D graph = source.createGraphics();  
        int x = (CODE_IMG_SIZE - width) / 2;  
        int y = (CODE_IMG_SIZE - height) / 2;  
        graph.drawImage(src, x, y, width, height, null);  
        Shape shape = new RoundRectangle2D.Float(x, y, width, width, 6, 6);  
        graph.setStroke(new BasicStroke(3f));  
        graph.draw(shape);  
        graph.dispose();  
    }  
      
    /** 
     * 解析二維碼（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;  
    }  
}  

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