WebSocket实现app扫描二维码登录

最新推荐文章于 2024-08-06 16:33:51 发布
最新推荐文章于 2024-08-06 16:33:51 发布
阅读量901 收藏 4
点赞数
文章标签： 网络 java javascript ViewUI
原文链接：http://www.cnblogs.com/songfayuan/articles/7357880.html
版权

后台框架采用SpringMVC，不同的框架可根据逻辑更改即可：

【思路】- PC端生成二维码，二维码包含uuid（全局唯一标识符），且打通websocket通道，等待服务器返回登录成功信息；APP扫描二维码，获取uuid及登录信息，推送给服务端，处理后的登录信息通过websocket返回给PC端，PC端得到登录信息后保存即登录成功。APP扫描确认登录的信息可以采用ActiveMQ进行推送。

生成二维码部分引入依赖文件

 

     <dependency>
	    <groupId>com.google.zxing</groupId>
	    <artifactId>core</artifactId>
	    <version>3.1.0</version>
	</dependency>
	<dependency>  
         <groupId>com.google.zxing</groupId>  
         <artifactId>javase</artifactId>  
         <version>3.1.0</version>  
     </dependency>

 

二维码登录后台控制层Controller

 

/**
 * 项目名称：dream_user
 * 项目包名：org.fore.user.controller
 * 创建时间：2017年8月8日下午5:29:41
 * 创建者：Administrator-宋发元
 * 创建地点：杭州
 */
package org.fore.user.controller;

import java.io.IOException;
import java.io.OutputStream;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.fore.model.user.UserAccount;
import org.fore.model.user.UserModel;
import org.fore.user.qrcode.websocket.WebSocketHandler;
import org.fore.user.service.UserAccountService;
import org.fore.user.service.UserService;
import org.fore.utils.jms.JmsSender;
import org.fore.utils.mvc.TokenUtil;
import org.fore.utils.mvc.annotation.LimitLess;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.fastjson.JSONObject;
import com.google.zxing.BarcodeFormat;
import com.google.zxing.EncodeHintType;
import com.google.zxing.MultiFormatWriter;
import com.google.zxing.WriterException;
import com.google.zxing.client.j2se.MatrixToImageWriter;
import com.google.zxing.common.BitMatrix;
import com.google.zxing.qrcode.decoder.ErrorCorrectionLevel;


/**
 * 描述：控制层
 * @author songfayuan
 * 2017年8月8日下午5:29:41
 */
@Controller
@RequestMapping("/qrcodelogin")
public class QrCodeLoginController {

	private Logger logger = LoggerFactory.getLogger(QrCodeLoginController.class);
	
	public static int defaultWidthAndHeight=260;
	
	@Autowired
	private WebSocketHandler webSocketHandler;
	@Autowired
	private UserService userService;
	@Autowired
	private UserAccountService userAccountService;
	@Autowired
	@Qualifier(value = "qrCodeLoginSender")
	private JmsSender jmsSender;
	
	/**
	 * 描述：PC获取二维码
	 * @param uuid
	 * @param request
	 * @param response
	 * @throws ServletException
	 * @throws IOException
	 * @author songfayuan
	 * 2017年8月11日上午9:04:43
	 */
	@RequestMapping("/getLoginQrCode")
	@ResponseBody
	@LimitLess
	public void getLoginQrCode(String uuid, HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		//生成参数
		//String uuid = generateUUID();
		String host = request.getHeader("Host");
	    JSONObject data = new JSONObject();
	    data.put("code", 200);
	    data.put("msg", "获取二维码成功");
	    data.put("uuid", uuid);
	    data.put("host", host);
	    logger.info("【二维码内容】：{}",data);
        
        //生成二维码
	    Map<EncodeHintType, Object>  hints=new HashMap<EncodeHintType, Object>();
        // 指定纠错等级  
        hints.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.L);  
        // 指定编码格式  
        hints.put(EncodeHintType.CHARACTER_SET, "UTF-8");  
        hints.put(EncodeHintType.MARGIN, 1);
        try {
			BitMatrix bitMatrix = new MultiFormatWriter().encode(data.toString(),BarcodeFormat.QR_CODE, defaultWidthAndHeight, defaultWidthAndHeight, hints);
			OutputStream out = response.getOutputStream();
			MatrixToImageWriter.writeToStream(bitMatrix, "png", out);//输出二维码
            out.flush();
            out.close();
            
        } catch (WriterException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	
	/**
	 * 描述：app确认请求处理
	 * @param uuid
	 * @param host
	 * @param userid
	 * @author songfayuan
	 * 2017年8月11日上午9:05:56
	 */
	@RequestMapping("/sendCodeLoginInfo")
	@ResponseBody
	@LimitLess
	public void sendCodeLoginInfo(String uuid, String host, Integer userid) {
		// 注册成功后 或 登录，需要同步账户信息，获取用户基本信息
		UserAccount account = userAccountService.findCurrentUserAccount(userid);
		userAccountService.syncAccount(account);

		UserModel userModel = userService.findUserById(userid);
		userModel = changeUserForShow(userModel);
		JSONObject token = TokenUtil.generateTokenByQrCodeLogin(userid, host);
		JSONObject object = new JSONObject();
		object.put("code", 10086);
		object.put("uuid", uuid);
		object.put("userinfo", userModel);
		object.put("token", token);
		object.put("msg", "登录成功");
		//this.webSocketHandler.forwardQrCode(object.toString());
		jmsSender.sendMessage(object.toString()); //采用ActiveMQ进行推送，也可以直接注入websocket进行发送
	}
	//处理用户登录信息
	private UserModel changeUserForShow(UserModel userModel) {
		UserModel user = new UserModel();
		user.setId(userModel.getId());
		user.setUserName(userModel.getUserName());
		user.setUserSex(userModel.getUserSex());
		user.setUserPortrait(userModel.getUserPortrait());
		return user;
	}
	
	/**
	 * 描述：唯一标识符
	 * @return
	 * @author songfayuan
	 * 2017年8月11日上午9:06:12
	 */
	public static String generateUUID() {
		String uuid = UUID.randomUUID().toString();
		uuid = uuid.replace("-", "");
		Long currentTime = System.currentTimeMillis();
		String currentDate = String.valueOf(currentTime);
		return uuid + currentDate;
	}
	
}

 

websocket实现（本案例采用Spring自带的websocket）

 

 

package org.fore.sms.qrcode.websocket;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
import org.springframework.web.socket.server.standard.ServletServerContainerFactoryBean;

@Configuration
@EnableWebMvc
@EnableWebSocket
public class QrCodeLoginWebSocketConfig extends WebMvcConfigurerAdapter implements WebSocketConfigurer {

	@Autowired
	private QrCodeLoginWebSocketEndPoint endPoint;
	@Autowired
	private QrCodeLoginHandshakeInterceptor interceptor;

	@Override
	public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
		registry.addHandler(endPoint, "/qrcodelogin.do").addInterceptors(interceptor).setAllowedOrigins("*");
//		 registry.addHandler(endPoint,
//		 "/sockjs.do").addInterceptors(interceptor).setAllowedOrigins("*")
//		 .withSockJS();
	}

	/**
	 * Each underlying WebSocket engine exposes configuration properties that
	 * control runtime characteristics such as the size of message buffer sizes,
	 * idle timeout, and others.
	 */

	/**
	 * For Tomcat, WildFly, and GlassFish add a
	 * ServletServerContainerFactoryBean to your WebSocket Java config:
	 */
	@Bean
	public ServletServerContainerFactoryBean createWebSocketContainer() {
		ServletServerContainerFactoryBean container = new ServletServerContainerFactoryBean();
		container.setMaxTextMessageBufferSize(8192);
		container.setMaxBinaryMessageBufferSize(8192);
		return container;
	}

	/**
	 * For Jetty, you’ll need to supply a pre-configured Jetty
	 * WebSocketServerFactory and plug that into Spring’s
	 * DefaultHandshakeHandler through your WebSocket Java config:
	 */
	// @Bean
	// public DefaultHandshakeHandler handshakeHandler() {
	//
	// WebSocketPolicy policy = new WebSocketPolicy(WebSocketBehavior.SERVER);
	// policy.setInputBufferSize(8192); /* 设置消息缓冲大小 */
	// policy.setIdleTimeout(600000); /* 10分钟read不到数据的话，则断开该客户端 */
	//
	// return new DefaultHandshakeHandler(new JettyRequestUpgradeStrategy(new
	// WebSocketServerFactory(policy)));
	// }

}

 

package org.fore.sms.qrcode.websocket;

import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor;

@Component
public class QrCodeLoginHandshakeInterceptor extends HttpSessionHandshakeInterceptor {
	private Logger logger = LoggerFactory.getLogger(QrCodeLoginHandshakeInterceptor.class);

	@Override
	public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler,
			Map<String, Object> attributes) throws Exception {
		return super.beforeHandshake(request, response, wsHandler, attributes);
	}

	@Override
	public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler,
			Exception ex) {
		super.afterHandshake(request, response, wsHandler, ex);
	}
}

 

package org.fore.sms.qrcode.websocket;

import java.io.IOException;
import java.util.Map;
import java.util.UUID;
import java.util.concurrent.ConcurrentHashMap;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.fore.model.quota.tcp.ReqCode;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;

@Component
public class QrCodeLoginWebSocketEndPoint extends TextWebSocketHandler {
	private Logger logger = LoggerFactory.getLogger(QrCodeLoginWebSocketEndPoint.class);

	private static Map<String, WebSocketSession> sessionMap = new ConcurrentHashMap<>();
	private static Map<WebSocketSession,String > sessionMap2 = new ConcurrentHashMap<>();

	@Override
	public void afterConnectionEstablished(WebSocketSession session) throws Exception {
		logger.info("WebSocketHandler:客户端{}上线", session.getRemoteAddress());
		String uuid = generateUUID();
		sessionMap.put(uuid,session);
		sessionMap2.put(session,uuid);
	}

	@Override
	protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
		String msg = message.getPayload();
		String ipAddress = session.getRemoteAddress().toString();
		JSONObject requestData = JSON.parseObject(msg);
		Integer code = requestData.getInteger("code");
		JSONObject result = new JSONObject();
		String uuid	= sessionMap2.get(session);
		result.put("code", 200);
		result.put("uuid", uuid);
		switch (code) {
		case ReqCode.REQ_QR_CODE:
			logger.info("WebSocketHandler:客户端{}发送消息{}...", ipAddress, msg);
			if(session.isOpen())
			session.sendMessage(new TextMessage(result.toString()));
			logger.info("WebSocketHandler:客户端{}发送消息{}完成", ipAddress, msg);
			break;
		default:
			break;
		}
	}

	@Override
	public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
		String ipAddress = session.getRemoteAddress().toString();
		logger.info("WebSocketHandler:客户端{}下线", ipAddress);
		logger.info("WebSocketHandler:删除客户端{}的session...", ipAddress);
		logger.info("WebSocketHandler:删除sessionMap的客户端{}连接...", ipAddress);
		String uuid = sessionMap2.get(session);
		sessionMap.remove(uuid);
		sessionMap2.remove(session);
		logger.info("WebSocketHandler:删除sessionMap的客户端{}连接完成", ipAddress);
		logger.info("WebSocketHandler:删除WebSocket客户端{}连接...", ipAddress);
//		logger.info("{}", sessionMap);
		sessionMap.remove(session);
//		logger.info("{}", sessionMap);
		logger.info("WebSocketHandler:删除WebSocket客户端{}连接完成", ipAddress);
		logger.info("WebSocketHandler:删除客户端{}的session完成", ipAddress);
		if(session.isOpen())
		session.close();
	}

	@Override
	public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
		logger.info("WebSocketHandler:客户端{}异常", session.getRemoteAddress(), exception);
	}
	
	//发送消息
	public void sendMessage(String userInfo) throws Exception {
		JSONObject json = JSONObject.parseObject(userInfo);
		String uuid = json.getString("uuid");
		WebSocketSession session = sessionMap.get(uuid);
		if (session == null) {
			logger.info("app发送给PC的登录信息：{}参数不正确！",userInfo);
		}else {
			logger.info("app发送给PC的登录信息：{}",userInfo);
			session.sendMessage(new TextMessage(userInfo));
		}
	}
	
	//唯一标识符
	public static String generateUUID() {
		String uuid = UUID.randomUUID().toString();
		uuid = uuid.replace("-", "");
		Long currentTime = System.currentTimeMillis();
		String currentDate = String.valueOf(currentTime);
		return uuid + currentDate;
	}
}

 

JMS实现

package org.fore.sms.qrcode.jms;

import org.fore.utils.jms.Listener;
import org.fore.sms.qrcode.websocket.QrCodeLoginWebSocketEndPoint;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

import com.alibaba.fastjson.JSONObject;

@Component
public class QrCodeLoginListener implements Listener {
	private Logger logger = LoggerFactory.getLogger(QrCodeLoginListener.class);
	@Autowired
	private QrCodeLoginWebSocketEndPoint qrCodeLoginWebSocketEndPoint;

	@Override
	public void onMessage(String message) {
		logger.info("app确认登录信息:接收app推送的确定PC登录消息{}", message);
		JSONObject object = JSONObject.parseObject(message);
		try {
			qrCodeLoginWebSocketEndPoint.sendMessage(object.toJSONString());
		} catch (Exception e) {
			logger.info("app确认登录信息:接收app推送的确定PC登录消息异常", e);
		}
	}

}

核心代码就酱......

 

转载于:https://www.cnblogs.com/songfayuan/articles/7357880.html

aoyin1017
关注
vue3 - 最新手机扫码PC网站二维码登录功能，用手机端扫描PC端vue3网页的登录二维码，然后在手机上点击“确认登录“完成登录，PC网页生成登录二维码，用户拿手机扫码，手机上点确定后电脑端做出响应
高级前端工程师
03-28 4341
vue3，uniapp，微信小程序，vue3+uniapp实现移动端+pc端互通扫码登录，微信扫码登录，手机扫电脑微信登录码登录功能，vue3手机微信扫码登录详细教程，如何实现微信扫码授权登录，手机小程序怎么和网页pc扫二维码登录互通监听手机端确认登录，vue3手机+网页扫码登录，pc微信网页授权，网站接入微信扫码登录功能详细教程，手机小程序扫网页二维码登录的原理，vue3接入微信扫码授权登录流程，vue使用手机app扫描二维码登录，微信扫码登录后获取信息数据，vue生成二维码实现手机APP扫码进行web网
基于websocket实现扫描小程序码登录web页面和微信小程序(双端登录)
it_ape的博客
12-02 2177
SpringBoot+WebSocket+Redis控制二维码失效时间 这里运用了github上基于微信SDK的更易用的SDK weixin-java-miniapp 第一步:导入需要的maven依赖 <!--springboot整合了websocket--> <dependency> <groupId>org.spr...
websocket 扫码登录
吃糖牙疼的博客
05-17 1566
用户在扫码成功后，自动登录网页 过程解析 用户加载登录页面，JS自动生成unicode，并且两秒钟后自动发送给websocket服务器，将unicode存储在websocketSession中， 用户点击微信扫码按钮，将Unicode用作sceneId，随机生成二维码，并在当前页面不跳转的情况下，显示给当前用户 用户扫码后，微信服务号后台获取到Unicode作为的sceneId，通知websoc...
webSocket【移动端（uniapp）和PC端（vue2+elementUI）】开箱即用
最新发布
m0_71585401的博客
08-06 208
webSocket【移动端（uniapp）和PC端（vue2+elementUI）】开箱即用
app扫描二维码登陆
dingxiaohuang4790的博客
08-06 608
先说明一下实现原理： 　　如同微信扫描登陆一样，就是一种pc的自动登陆授权。在网站首页得有切换登陆的选项：密码登陆 扫码登陆 当用户切换到扫码登陆时，向服务器请求一次获得一个唯一的uukey 利用这个uukey生成一张二维码 用户用app扫描此二维码 app处理uukey+普通登陆所需要的数据 请求后台 　　uukey存在且登陆数据正确（uukey本来与用户无管...
使用websocket实现手机扫描PC端二维码，移动端canvas手绘签名确定后将图片同步到PC端 扫码及时更新图片
苏雨丶
03-15 6756
这个Demo我放到线上啦，大家可以试一下（前端是用vue写的，后台是用springboot写的 还处于学习阶段  帮不到各位大神也请各位轻点喷 http://draw.niezhiliang.com/ 我们首先看下效果，我把图截下来来： 1.这个是线上地址打开的页面 2.这是扫描二维码后手机打开的界面（不要用微信去扫，微信显示不安全  用支付宝或其他的可以出来页面） 3.当手机页...
扫码登录流程及原理
雅俗共赏的博客
03-29 2298
二维码登录
android实现扫描网页二维码进行网页登录功能
01-20
- 更新数据：当Android app扫描二维码后，通过网络请求将用户名与随机数关联，更新数据库中的用户名字段。 3. **网络请求与API交互**： - Android app扫描后，将获取到的二维码内容（随机数）作为参数，发送HTTP...
Java二维码登录流程实现(包含短地址生成，含部分代码)
sinat_36171659的博客
03-22 2449
近年来，二维码的使用越来越风生水起，笔者最近手头也遇到了一个需要使用二维码扫码登录网站的活，所以研究了一下这一套机制，并用代码实现了整个流程，接下来就和大家聊聊二维码登录及的那些事儿。 二维码原理 二维码是微信搞起来的，当年微信扫码二维码登录网页微信的时候，感觉很神奇，然而，我们了解了它的原理，也就没那么神奇了。二维码实际上就是通过黑白的点阵包含了一个url请求信息。端上扫码，请求url，做对应的操作。 一般性扫码操作的原理 微信登录、支付宝扫码支付都是这个原理： 如图所示： 1. 请求二维码 桌面端.
vue3-pc端生成微信二维码、扫码支付监听支付回调（WebSocket）功能实现
fat_shady的博客
02-22 5527
pc端微信支付功能，展示二维码，websocket连接获取支付成功回调
利用webSocket实现扫码登录PC端
博客
08-16 9300
ws实现扫码登录
Spring Boot+WebSocket实现扫码登录
落的博客
11-04 1288
Spring Boot + Web Socket 实现扫码登录
Asp.Net QRCode创建WEB二维码时遇到的问题！
weixin_34128839的博客
12-30 127
12 条评论 C# Qrcode是一个开源的二维码生成类库，项目地址是:http://www.codeproject.com/Articles/20574/Open-Source-QRCode-Library 今天手头一个项目需要添加动态生成二维码的功能，所以把这个类库稍微研究了一下，遇到了一个问题。在我重新编译QRCodeLib这个类库的时候报错！ 报错信息为：...
（一）WebSocket 详解，以及用QWebSocket 实现服务端和客户端（含代码例子）
bigger_belief的博客
05-17 9362
介绍了WebSocket特点，以及如何使用，用QWebSocket 实现一个客户端和服务端的主要步骤
使用shiro与websocket做单一登陆
格雷弗斯的博客
05-23 5598
shiro配置就不说了，网上多的很，websocket的配置可以看我另一篇文章：&lt;dependency&gt; &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt; &lt;artifactId&gt;spring-boot-starter-websocket&lt;/artifactId&gt; &lt;/depen...
Websocket 实现扫码二维码登录
chouda4733的博客
10-28 1445
最近在做一个扫码登录功能，为此我还在网上搜了一下关于微信的扫描登录的实现方式。当这个功能完成之后，我决定将整个实现思路整理出来，方便自己以后查看也方便其他有类似需求的程序员们。 1. 在没有输入用户名及密码的情况下，如何解决权限安全问题？换句话讲，如何让服务器知道扫码二维码的客户端是一个合法...
java扫码登录+websocket（或前端轮询）
weixin_43275578的博客
08-04 429
扫码登录
【websocket系列】uniapp-springboot-websocket整合
Think_and_work的博客
01-28 2170
uniapp 这里不需要导入什么依赖 直接使用uniapp自带的就可以了 参考文档：https://developers.weixin.qq.com/miniprogram/dev/api/network/websocket/wx.sendSocketMessage.html <template> <view class="warp"> <!--这里我是直接想获得mq传过来的信息，所以我就没有做太多的处理了，直接进入页面的时候连接websocket--> </tem
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值