前言
目前網頁的主流登入方式是透過手機掃碼二維碼登入。我看了網上很多關於掃碼登入部落格後,發現基本思路大致是:開啟網頁,生成uuid,然後長連線請求後端並等待登入認證相應結果,而後端每個幾百毫秒會迴圈查詢資料庫或redis,當查詢到登入資訊後則響應長連線的請求。
然而,如果是小型應用則沒問題,如果使用者量,併發大則會出現非常嚴重的效能瓶頸。而問題的關鍵是使用了迴圈查詢資料庫或redis的方案。假設要最佳化這個方案可以使用java多執行緒的同步集合+CountDownLatch來解決。
一、環境
1.java 8(jdk1.8)
2.maven 3.3.9
3.spring boot 2.0
二、知識點
1.同步集合使用
2.CountDownLatch使用
3.http ajax
4.zxing二維碼生成
三、流程及實現原理
1.開啟網頁,透過ajax請求獲取二維碼圖片地址
2.頁面渲染二維碼圖片,並透過長連線請求,獲取後端的登入認證資訊
3.事先登入過APP的手機掃碼二維碼,然後APP請求伺服器端的API介面,把使用者認證資訊傳遞到伺服器中。
4.後端收到APP的請求後,喚醒長連線的等待執行緒,並把使用者認證資訊寫入session。
5.頁面得到長連線的響應,並跳轉到首頁。
整個流程圖下圖所示
四、程式碼編寫
pom.xml檔案如下:
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.demo</groupId> <artifactId>auth</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>jar</packaging> <name>auth</name> <description>二維碼登入</description> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.0.0.RELEASE</version> <relativePath /> <!-- lookup parent from repository --> </parent> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <!-- zxing --> <dependency> <groupId>com.google.zxing</groupId> <artifactId>core</artifactId> <version>3.3.0</version> </dependency> <dependency> <groupId>com.google.zxing</groupId> <artifactId>javase</artifactId> <version>3.3.0</version> </dependency> <dependency> <groupId>commons-codec</groupId> <artifactId>commons-codec</artifactId> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>
首先,參照《玩轉spring boot——簡單登入認證》完成簡單登入認證。在瀏覽器中輸入http://localhost:8080頁面時,由於未登入認證,則重定向到http://localhost:8080/login頁面
程式碼如下:
package com.demo.auth; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.InterceptorRegistration; import org.springframework.web.servlet.config.annotation.InterceptorRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; import org.springframework.web.servlet.handler.HandlerInterceptorAdapter; /** * 登入配置 部落格出處:http://www.cnblogs.com/GoodHelper/ * */ @Configuration public class WebSecurityConfig implements WebMvcConfigurer { /** * 登入session key */ public final static String SESSION_KEY = "user"; @Bean public SecurityInterceptor getSecurityInterceptor() { return new SecurityInterceptor(); } public void addInterceptors(InterceptorRegistry registry) { InterceptorRegistration addInterceptor = registry.addInterceptor(getSecurityInterceptor()); // 排除配置 addInterceptor.excludePathPatterns("/error"); addInterceptor.excludePathPatterns("/login"); addInterceptor.excludePathPatterns("/login/**"); // 攔截配置 addInterceptor.addPathPatterns("/**"); } private class SecurityInterceptor extends HandlerInterceptorAdapter { @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { HttpSession session = request.getSession(); if (session.getAttribute(SESSION_KEY) != null) return true; // 跳轉登入 String url = "/login"; response.sendRedirect(url); return false; } } }
其次,新建控制器類:MainController
/** * 控制器 * * @author 劉冬部落格http://www.cnblogs.com/GoodHelper * */ @Controller public class MainController { @GetMapping({ "/", "index" }) public String index(Model model, @SessionAttribute(WebSecurityConfig.SESSION_KEY) String user) { model.addAttribute("user", user); return "index"; } @GetMapping("login") public String login() { return "login"; } }
新建兩個html頁面:index.html和login.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>二維碼登入</title> </head> <body> <h1>二維碼登入</h1> <h4> <a target="_blank" href="http://www.cnblogs.com/GoodHelper/">from 劉冬的部落格</a> </h4> <h3 th:text="'登入使用者:' + ${user}"></h3> </body> </html>
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>二維碼登入</title> <script src="//cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script> <script type="text/javascript"> /*<![CDATA[*/ var app = angular.module('app', []); app.controller('MainController', function($rootScope, $scope, $http) { //二維碼圖片src $scope.src = null; //獲取二維碼 $scope.getQrCode = function() { $http.get('/login/getQrCode').success(function(data) { if (!data || !data.loginId || !data.image) return; $scope.src = 'data:image/png;base64,' + data.image $scope.getResponse(data.loginId) }); } //獲取登入響應 $scope.getResponse = function(loginId) { $http.get('/login/getResponse/' + loginId).success(function(data) { //一秒後,重新獲取登入二維碼 if (!data || !data.success) { setTimeout($scope.getQrCode(), 1000); return; } //登入成功,進去首頁 location.href = '/' }).error(function(data, status) { console.log(data) console.log(status) //一秒後,重新獲取登入二維碼 setTimeout($scope.getQrCode(), 1000); }) } $scope.getQrCode(); }); /*]]>*/ </script> </head> <body ng-app="app" ng-controller="MainController"> <h1>掃碼登入</h1> <h4> <a target="_blank" href="http://www.cnblogs.com/GoodHelper/">from 劉冬的部落格</a> </h4> <img ng-show="src" ng-src="{{src}}" /> </body> </html>
login.html頁面先請求後端伺服器,獲取登入uuid,然後獲取到伺服器的二維碼後在頁面渲染二維碼。接著使用長連線請求並等待伺服器的相應。
然後新建一個承載登入資訊的類:LoginResponse
package com.demo.auth; import java.util.concurrent.CountDownLatch; /** * 登入資訊承載類 * * @author 劉冬部落格http://www.cnblogs.com/GoodHelper * */ public class LoginResponse { public CountDownLatch latch; public String user; // 省略 get set }
最後修改MainController類,最終的程式碼如下:
package com.demo.auth; import java.awt.image.BufferedImage; import java.io.ByteArrayOutputStream; import java.util.HashMap; import java.util.Hashtable; import java.util.Map; import java.util.UUID; import java.util.concurrent.ConcurrentHashMap; import java.util.concurrent.CountDownLatch; import java.util.concurrent.TimeUnit; import javax.imageio.ImageIO; import javax.servlet.http.HttpSession; import org.apache.commons.codec.binary.Base64; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.bind.annotation.SessionAttribute; import com.google.zxing.BarcodeFormat; import com.google.zxing.EncodeHintType; import com.google.zxing.MultiFormatWriter; import com.google.zxing.common.BitMatrix; import com.google.zxing.qrcode.decoder.ErrorCorrectionLevel; /** * 控制器 * * @author 劉冬部落格http://www.cnblogs.com/GoodHelper * */ @Controller public class MainController { /** * 儲存登入狀態 */ private Map<String, LoginResponse> loginMap = new ConcurrentHashMap<>(); @GetMapping({ "/", "index" }) public String index(Model model, @SessionAttribute(WebSecurityConfig.SESSION_KEY) String user) { model.addAttribute("user", user); return "index"; } @GetMapping("login") public String login() { return "login"; } /** * 獲取二維碼 * * @return */ @GetMapping("login/getQrCode") public @ResponseBody Map<String, Object> getQrCode() throws Exception { Map<String, Object> result = new HashMap<>(); result.put("loginId", UUID.randomUUID()); // app端登入地址 String loginUrl = "http://localhost:8080/login/setUser/loginId/"; result.put("loginUrl", loginUrl); result.put("image", createQrCode(loginUrl)); return result; } /** * app二維碼登入地址,這裡為了測試才傳{user},實際專案中user是透過其他方式傳值 * * @param loginId * @param user * @return */ @GetMapping("login/setUser/{loginId}/{user}") public @ResponseBody Map<String, Object> setUser(@PathVariable String loginId, @PathVariable String user) { if (loginMap.containsKey(loginId)) { LoginResponse loginResponse = loginMap.get(loginId); // 賦值登入使用者 loginResponse.user = user; // 喚醒登入等待執行緒 loginResponse.latch.countDown(); } Map<String, Object> result = new HashMap<>(); result.put("loginId", loginId); result.put("user", user); return result; } /** * 等待二維碼掃碼結果的長連線 * * @param loginId * @param session * @return */ @GetMapping("login/getResponse/{loginId}") public @ResponseBody Map<String, Object> getResponse(@PathVariable String loginId, HttpSession session) { Map<String, Object> result = new HashMap<>(); result.put("loginId", loginId); try { LoginResponse loginResponse = null; if (!loginMap.containsKey(loginId)) { loginResponse = new LoginResponse(); loginMap.put(loginId, loginResponse); } else loginResponse = loginMap.get(loginId); // 第一次判斷 // 判斷是否登入,如果已登入則寫入session if (loginResponse.user != null) { session.setAttribute(WebSecurityConfig.SESSION_KEY, loginResponse.user); result.put("success", true); return result; } if (loginResponse.latch == null) { loginResponse.latch = new CountDownLatch(1); } try { // 執行緒等待 loginResponse.latch.await(5, TimeUnit.MINUTES); } catch (Exception e) { e.printStackTrace(); } // 再次判斷 // 判斷是否登入,如果已登入則寫入session if (loginResponse.user != null) { session.setAttribute(WebSecurityConfig.SESSION_KEY, loginResponse.user); result.put("success", true); return result; } result.put("success", false); return result; } finally { // 移除登入請求 if (loginMap.containsKey(loginId)) loginMap.remove(loginId); } } /** * 生成base64二維碼 * * @param content * @return * @throws Exception */ private String createQrCode(String content) throws Exception { try (ByteArrayOutputStream out = new ByteArrayOutputStream()) { Hashtable<EncodeHintType, Object> hints = new Hashtable<EncodeHintType, Object>(); hints.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.H); hints.put(EncodeHintType.CHARACTER_SET, "utf-8"); hints.put(EncodeHintType.MARGIN, 1); BitMatrix bitMatrix = new MultiFormatWriter().encode(content, BarcodeFormat.QR_CODE, 400, 400, hints); int width = bitMatrix.getWidth(); int height = bitMatrix.getHeight(); BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); for (int x = 0; x < width; x++) { for (int y = 0; y < height; y++) { image.setRGB(x, y, bitMatrix.get(x, y) ? 0xFF000000 : 0xFFFFFFFF); } } ImageIO.write(image, "JPG", out); return Base64.encodeBase64String(out.toByteArray()); } } }
其中,使用 Map<String, LoginResponse> loginMap類儲存登入請求資訊
createQrCode方法是用於生成二維碼
getQrCode方法是給頁面返回登入uuid和二維碼,前端頁面拿到登入uuid後請求長連線等待二維碼的掃碼登入結果。
setUser方法是提供給APP端呼叫的,在此過程中透過uuid找到對應的CountDownLatch,並喚醒長連線的執行緒。而這裡是為了做演示才把這個方法放到這個類裡,在實際專案中,此方法不一定在這個類裡或未必在同一個後端中。另外我把使用者資訊的傳遞也寫在這個方法中了,而實際專案是透過其他的方式來傳遞使用者資訊,這裡僅僅是為了演示方便。
getResponse方法是處理ajax的長連線,並使用CountDownLatch等待APP端來喚醒這個執行緒,然後把使用者資訊寫入session。
入口類App.java
package com.demo.auth; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class App { public static void main(String[] args) { SpringApplication.run(App.class, args); } }
專案結構如下圖所示:
五、總結
開啟瀏覽器輸入http://localhost:8080。執行效果如下圖所以:
使用CountDownLatch則避免了每隔500毫秒讀一次資料庫或redis的頻繁查詢效能問題。因為操作的是記憶體資料,所以效能非常高。
而CountDownLatch是java多執行緒中非常實用的類,二維碼掃碼登入就是一個具有代表意義的應用場景。當然,如果你不嫌程式碼量大也可以用wait+notify來實現。另在java.util.concurrent包下,也有很多的多執行緒類能到達同樣的目的,我這裡就不一一例舉了。
根據園友的建議,我發現本篇文章裡的執行緒阻塞是設計缺陷,所以不迴圈查詢資料庫或redis裡,但一臺伺服器的執行緒數是有限的。在下篇我會改進這個設計
如果你覺得我的部落格對你有幫助,可以給我點兒打賞,左側微信,右側支付寶。
有可能就是你的一點打賞會讓我的部落格寫的更好:)