基于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")@ResponseBodypublic 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表示第一次登陆没有进行扫码 将登陆信息存入mapUser 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 + ")");//存储UUIDuuid = 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>

<%@ 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: 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>

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

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

js基于GoEasy消息推送
GoEasy介绍 GoEasy专注于服务器与浏览器,浏览器与浏览器之间消息推送,完美兼容世界上的绝大多数浏览器,包括IE6, IE7之类的非常古老的浏览器.支持Uniapp,各种小程序,react,v ...
web中的GoEasy消息推送机制
最近要用到消息推送机制,网上查了很多,什么websocket,pushlet,GoEasy等,最后发现还是GoEasy最简单方便,很容易入手,不到10分钟就可以进行web端的消息推送啦话不多说,直接 ...
基于 springBoot 实现webSocket方式的扫码登录
最近单位又有一个新Java项目. 涉及到扫码登录.之前项目使用的是 ajax轮询的方式.感觉太low了. 所以这次用webSocket的方式进行实现好.废话不多说!咱们开始!! 一.首先咱们需要一张 ...
基于SignalR的消息推送与二维码描登录实现
1 概要说明使用微信扫描登录相信大家都不会陌生吧,二维码与手机结合产生了不同应用场景,基于二维码的应用更是比较广泛.为了满足ios.android客户端与web短信平台的结合,特开发了基于Singl ...
WEB消息推送—GoEasy
web实时推送的技术在大多数项目里面都会用到,尤其是一些实时性要求高的项目,关于这方面的实现技术有许多,类似于webscoket.dwr.comet4j和netpush等等,其中在以往的篇幅里我也介绍 ...
IOS消息推送之APNS
一.背景概述: 1,环境配置 APNS:Apple Push Notification Service.本文对推送相关概念不再赘述,只侧重完整流程. Demo 开发环境:Mac os 10.9.4 ...
java/web/springboot项目使用WebSocket消息推送
java/web/springboot项目使用WebSocket消息推送最近项目中,有消息推送的广播和在线咨询的功能,以前也没搞过啊,有些小伙伴估计也是,那肯定要赶紧学习起来啊~ 不说废话,今天就告 ...
如何构建一套高可用的 APP 消息推送平台
转载自如何构建一套高可用的 APP 消息推送平台消息推送作为移动 APP 运营中的一项关键技术,已经被越来越广泛的运用.本文追溯了推送技术的发展历史,剖析了其核心原理,并对推送服务的关键技术进行 ...
如何构建一套高可用的移动消息推送平台？
消息推送作为移动 APP 运营中的一项关键技术,已经被越来越广泛的运用.本文追溯了推送技术的发展历史,剖析了其核心原理,并对推送服务的关键技术进行深入剖析,围绕消息推送时产生的服务不稳定性,消息丢失. ...

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

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

最新文章

热门文章