掃碼登入實現

簡介：

在一次專案的開發中，看到了一篇文章掃碼登入的原理，覺得好像可以做這個，於是乎就自己動手寫了這個簡單版本的掃碼登入，已及遇到的問題，在這裡和大家分享一下。

1.實現原理

用一張圖片來概括一下，實現原理來自於java團長的一篇文章，掃碼登入實現原理

2.程式碼實現

我寫的是一個簡單版本，因為我沒有手機客戶端，所以在實現的思路上可能和圖片裡的不大一樣，但是大體思路是一致的，僅供大家參考

2.1頁面上有一個ajax的方法不停的去請求伺服器，用隨機產生的字串作為鍵，因為要不重新整理頁面每次請求的字元建都要是一致的，所以使用了無刷新技術，接收到後臺發過來值來判斷髮送到什麼頁面

setInterval("fanw()","2000");//不停的請求
  function fanw(){
	  $.ajax({
		  type: "post",
		  url: "useraction.action?methodName=loginfalg",
		  dataType: "json",
		  data:{
			   <%String x=UUID.randomUUID().toString();%>
			   random:'<%=x%>'//一個隨機的字串用來作為鍵去請求伺服器
		  },
		   success: function(msg){
	//返回處理的方法
	if(msg==2){//普通使用者
		location.href="index.jsp";
	}else if(msg==1){//管理員
		location.href="addBook.jsp";
	}
		   }
		   

		});
  }
 

2.2在二維碼中儲存一個隨機的字串用來區分使用者，java也可以使用jar包達到二維碼生成的效果但是沒有辦法重新整理，所以使用了jQuery的二維碼生成器下載地址為http://www.jq22.com/jquery-info294

//生成二維碼
$(function(){
	$('#tables').qrcode({
	    render: "canvas", //也可以替換為table
	    width: 300,
	    height: 300,
	    //掃碼動作 地址為自己的電腦ip 加專案名和請求的地址
 	    text:"http://192.168.43.217:8080/InternetBook/useraction.action?methodName=sm&user_name=admins&random=<%=x%>"

	});
})
 

2.3在手機上輸入你釋出了的網址（因為沒有手機端所以要這樣做事先登入的動作），先登入好。然後去掃碼，實際上是去請求二維碼中儲存的網址，因為手機瀏覽器請求了這個方法手機瀏覽器session 會把隨機的字串儲存下來，並且去取手機瀏覽器裡的session中儲存的使用者物件（因為session是一個會話）,將隨機字元作為鍵，session取到的使用者物件儲存到Context上下文中，這樣才能被頁面上請求的方法請求到

/**
	 * 
	 * @Title: sm
	 * @Description: (判斷有沒有掃碼動作)
	 * @param request
	 * @param response
	 * @return
	 * @return ActionForward
	 */
	public ActionForward sm(HttpServletRequest request, HttpServletResponse response) {
		String random = request.getParameter("random");//隨機字元用來區分使用者
         //手機瀏覽器
		Object attribute = request.getSession().getAttribute("users");//使用者手機的物件
		if (attribute != null) {
			/**
			 * 有掃碼動作後將random鍵賦值
             *因為要和電腦端聯絡起來所以存放於上下文
			 */
			Users u=(Users) attribute;
			request.getServletContext().setAttribute(random, u);
		}
		 try {
//手機端上提示
			response.getWriter()
			 .println("<script>alert('登入成功！');</script>");
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}

2.4頁面不停請求的方法，用頁面傳過來的隨機字元作為鍵去context中取值，如果值不為空則證明使用者有掃碼動作，並且也有使用者資訊物件，則將此物件儲存到電腦的session中，並且將隨機字元的鍵值對清空，不佔用伺服器的記憶體，然後將使用者型別儲存下來轉換成json物件，傳送到頁面上

/**
	 * 
	 * @Title: loginfalg
	 * @Description: (login不停的請求)
	 * @param request
	 * @param response
	 * @return
	 * @return ActionForward
	 */
	public ActionForward loginfalg(HttpServletRequest request, HttpServletResponse response) {
         String  random=request.getParameter("random");
         Object attribute=null;
         if(random!=null) {
		 attribute = request.getServletContext().getAttribute(random);// 掃碼動作物件
		}
		int index = 0;// 用index作為條件讓使用者判斷
		  if (attribute != null) {// 有掃碼動作 和手機端登入時
			/**
			 * 將掃碼動作儲存下來的物件清空
			 */
			request.getServletContext().setAttribute(random, null);
			/**
			 * 將手機端物件儲存到session
			 */
			request.getSession().setAttribute("users", attribute);

			Users u = (Users) attribute;
			index = u.getUser_type();// 是不是管理員
		}

		String str = JSON.toJSONString(index);
		try {
			super.print(str, response);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}

3.總結

到此一個簡易版本的掃碼登入就算是實現了，重點就是每個頁面產生不同的隨機字元來作為鍵儲存值和請求值鍵，因為沒有手機端，不能讓手機獲取到鍵，所以要用session來傳遞值在方法裡獲取手機的使用者物件，注意請求和儲存的鍵要為同一個，而且前臺的方法要使用ajax來寫，不能讓它不停的重新整理。思路很重要，而且對於一個食物要有自己的看法，希望這篇文章能夠對你能起到幫助