基于goEasy消息推送的扫码登录

此篇介绍我做的基于goEasy消息推送的扫码登录的具体实现。将我的思路和代码一起贴出希望能帮助到对此感兴趣的童鞋，同时也希望大家有什么意见和建议也可以向我提出，另外如果有问题想与我探讨的可以加我的扣扣1040223003联系。

此扫码登录项目采用ssm框架运用goEasy推送功能，主要实现移动端扫描pc端二维码，确认登录，网页端登录成功跳转网页并显示用户姓名，主要包括四个页面和三个主要方法。其流程以及页面效果如下（哈哈哈做的比较简单页面比较简陋只是简单的实现了其完整流程，请不要笑我）：

（1）pc端生成二维码，移动端扫描

首先生成二维码和扫描 ：pc端网页首页为index.jsp页面ajax在页面加载时请求getTwoDemensionCode方法，返回一张二维码并显示在页面上，getTwoDemensionCode 生成的二维码内的信息为String content = “http://” + ip + “:8080/myCode_goEasy/loginPage?uuid=” + uuid;用户在移动端扫描二维码就访问了此路径并在访问过程中将用户个人信息传递过去。（当然我在代码中没有安卓代码这个信息也是一个模拟数据写死在了login.jsp页面中）



（2）移动端确认登录

然后是登录验证操作： loginPage将用户信息以及对应的uuid传递给login.jsp,用户在移动端login.jsp页面点击确认登录触发ajax请求phoneLogin方法，在此方法内检测二维码是否过期以及用户是否合法，并将登录结果返回给loginPage页面的ajax，并且如果登录成功同时用goEasy将消息推送。然后ajax进行页面跳转到home.jsp（移动端的登录成功提示页面）。





（3）pc端登陆成功

最后是在index.jsp的goeasy接收到登录成功的消息提示用户登陆成功，并将pc端网页直接跳转到hello.jsp，显示问候语以及用户信息。





代码如下：

首先是获取二维码的方法

/**
* 获取二维码图片
*/
@Controller
public class GetCodeController {
@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();
ip="192.168.1.21";
} catch (UnknownHostException e) {
e.printStackTrace();
}*/
String  ip="192.168.1.20";//这里是服务器的ip
//二维码内容
String content = "http://" + ip + ":8080/myCode_goEasy/loginPage?uuid=" + uuid;
System.out.println("二维码的 uuid:"+uuid);
//生成二维码
String imgName =  uuid + "_" + (int) (new Date().getTime() / 1000) + ".png";
String imgPath = request.getServletContext().getRealPath("/") + "images"+"/"+imgName;
TwoDimensionCode handler = new TwoDimensionCode();
handler.encoderQRCode(content, imgPath, "png", null);

//生成的图片访问地址
String qrCodeImg = "http://" + ip + ":8080/myCode_goEasy/" + "images"+"/"+ imgName;
JSONObject json = new JSONObject();
json.put("uuid", uuid);
json.put("qrCodeImg", qrCodeImg);
return json.toString();
}

然后是登录检测等方法

@Controller
public class PhoneLoginController {
/**
* 初始界面
*
* @return
*/
@RequestMapping(value = "/index")
public String index() {
return "index";
}

/**
* 网页的登陆成功后进入网页版的页面
*
*/
@RequestMapping(value = "/hello")
public String hello(HttpServletRequest request, HttpServletResponse response) {
// System.out.println("hello");
// 将uuid对应的user的信息放在session中以便网页上使用
String uuid = request.getParameter("uuid");
User user = LoginUserVo.getLoginUserMap().get(uuid);
HttpSession session = request.getSession();
session.removeAttribute("user");
session.setAttribute("user", user);
return "hello";
}

/**
* 移动端扫码成功后跳转的页面
*
* @return
*/
@RequestMapping(value = "/home")
public String home() {
return "home";
}

/**
* 移动端点击登录后开始的操作 进行验证信息 返回结果
*
* @param request
* @param response
* @throws IOException
*/

@RequestMapping(value = "/phoneLogin")
public void phoneLogin(HttpServletRequest request, HttpServletResponse response) throws IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
String uuid = request.getParameter("uuid");
System.out.println(username + "" + password + uuid);
// TODO 验证登录
boolean bool = true;
// 是否登陆
boolean islogin = false;
if (bool) {
// 如果没有uuid对应的user表示第一次登陆没有进行扫码 将登陆信息存入map
User user = LoginUserVo.getLoginUserMap().get(uuid);
if (user == null) {
user = new User(username, password);
LoginUserVo.getLoginUserMap().put(uuid, user);
bool = false;
islogin = true;
GoEasy goEasy = new GoEasy("rest-hangzhou.goeasy.io", "BC-851eb9ce50e94c699fba4b312b0d0f42");
goEasy.publish(uuid, "登陆成功"); // 直接推送前端 用uuid作为channel保证是对应的用户
} else {
// 如果有uuid对应的user表示二维码已经过期 但是事实上在手机移动端应该进行验证的

islogin = false;
System.out.println("二维码已过期，请刷新页面");
}
}
PrintWriter out = response.getWriter();
out.print(islogin);// 传递登陆是否成功
out.flush();
out.close();
}
/**
* 将用户信息传到用户移动端的确认登录界面
* @param request
* @param uuid
* @return
*/
@RequestMapping(value = "/loginPage")
public ModelAndView loginPage(HttpServletRequest request, String uuid) {
System.out.println("进入loginPage");
request.setAttribute("uuid", uuid);
// 在此得到Phone传过来的user信息 但是在这里没有写移动端代码就在页面login.jsp上直接写了虚拟数据

ModelAndView mv = new ModelAndView("Login");
return mv;
}
}

index.jsp:

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="https://cdn.goeasy.io/goeasy.js"></script>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var uuid;

$.get("/myCode_goEasy/getTwoDemensionCode", function(data, status) {
var obj = eval("(" + data + ")");
//存储UUID
uuid = obj.uuid;
//显示二维码
$("#QrCodeImg").attr("src", obj.qrCodeImg);
//开始验证登录
var goEasy = new GoEasy({
appkey:'BC-851eb9ce50e94c699fba4b312b0d0f42'
});
goEasy.subscribe({
channel:uuid,
onMessage: function(message){
alert(message.content);
window.location.href ='hello?uuid='+uuid;
}
});
});
});

</script>
<title>生成二维码</title>
</head>
<body>
<div style="margin-top: 200px; margin-left: 500px;"  id="divCon">
<img src="" id="QrCodeImg" />
<p style="margin-left: 10px;" >请在移动端扫描二维码以登录</p>
</div>

</body>
</html>

Login.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="https://cdn.goeasy.io/goeasy.js"></script>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<title>用户登录</title>
</head>
<body>
<table width="88%" border="0" style="width: 80%; display
c2e1
: none;">
<tr>
<td>登录名：</td>
<td><input type="text" id="username" name="username" value="fly" /></td>
<td>密码：</td>
<td><input type="password" id="password" name="password"
value="123456" /></td>
</tr>
</table>
<table>
<tr>
<td><p
style="font-size: 32px; margin-left: 360px; margin-top: 300px;">Windows端登录确认</p></td>
</tr>
<tr>
<td><input
style="background-color: green; color: white; margin-left: 400px; margin-top: 500px; height: 80px; width: 200px; font-size: 28px;"
type="button" onclick="login()" value="确认登录" /></td>
</tr>
</table>

</body>

<script type="text/javascript">
/*   username:$("#username").val(),#的是对应的id名字 */
function login() {
$.post("/myCode_goEasy/phoneLogin", {
uuid : $.getUrlParam('uuid'),
username : $("#username").val(),
password : $("#password").val()
}, function(data, status) {
if (data == "false") {
alert("二维码过期,请重新刷新网页获取二维码");
} else {
alert("登录成功");
window.location.href = "home";

}
/*  当时考虑也可以在此处进行消息推送  */
/*   var goEasy = new GoEasy({appkey:'BC-851eb9ce50e94c699fba4b312b0d0f42'});
goEasy.publish({  channel: '通知',message: 'Hello world!'    });

*/

});

}

//获取网页参数
(function($) {
$.getUrlParam = function(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null)
return unescape(r[2]);
return null;
}
})(jQuery);
</script>
</html>

hello.jsp

hello!${user.name}欢迎登录app网页版

home.jsp

<body>
<center><h1>您的网页端设备已经成功登录。</h1></center>
</body>

以上就是所有关于我的扫码登录的代码实现的介绍~~~哈哈哈哈嗝，我要睡觉去了。。。